<p>In your config file, set <code>generateTransformsBeforePageLoad</code> to true:</p>

<p>general.php:</p>

<pre><code>return array(
    //other configs
    'generateTransformsBeforePageLoad' =&gt; true
);
</code></pre>

<p>This will trigger craft to generate and save transforms ahead of loading the page, as explained in the <a href="http://buildwithcraft.com/docs/config-settings#generateTransformsBeforePageLoad" rel="nofollow noreferrer">documentation here</a>, this is will also work if you're using a plugin to provide the images.</p>

CC BY-SA 4.0
2018-06-28T04:11:16.633Z
Just a small comment; in general, we don't want to create image transforms on page load for performance reasons. It's probably better to use something that allows the transforms to be created on Asset save on the backend.
andrew.welch
CC BY-SA 4.0
2015-04-14T02:54:30.953Z
2018-06-26T21:23:30.977Z
2018-06-26T21:23:30.977Z
Aaron Berkowitz
<p>I'm having this problem too. This can't be expected behaviour, can it?</p>

<p>EDIT (SOLVED):</p>

<p>I've learned from MildlyGeeky in the Craft Discord server that this issue is caused by Twig being picky about transforms used in inline CSS styles. It can be resolved by making the transform into a variable and applying the "|raw" filter to it, thus:</p>

<pre><code>{{ transformVariableName|raw }}
</code></pre>

CC BY-SA 4.0
2019-09-09T20:44:23.840Z
2019-09-10T16:22:43.103Z
2019-09-10T16:22:43.103Z
user2157969
<p>I'm new to Craft, and am not sure whether I've got something weird happening or if what I'm experiencing is expected behavior. </p>

<p>I notice that when I add new entries containing image assets that get transformed (using a control panel transform in this case), that the images don't get transformed until the (template) page is loaded a second time. Therefore, each new page contains empty images and alt-text on its first load. Once I refresh the page, the images appear as expected.</p>

<p>Is this expected behavior? Right now this requires me to visit the page of every entry I create, in order to 'seed' it for use.</p>

<p>Not a deal breaker, but I'm just curious whether there's something I'm doing wrong on my end.</p>

<image-transforms><image>
Image Transforms - Image not processed until second page refresh
# Image Transforms - Image not processed until second page refresh

(Asked by: username_0 on 2015-04-13)

I'm new to Craft, and am not sure whether I've got something weird happening or if what I'm experiencing is expected behavior.

I notice that when I add new entries containing image assets that get transformed (using a control panel transform in this case), that the images don't get transformed until the (template) page is loaded a second time. Therefore, each new page contains empty images and alt-text on its first load. Once I refresh the page, the images appear as expected.

Is this expected behavior? Right now this requires me to visit the page of every entry I create, in order to 'seed' it for use.

Not a deal breaker, but I'm just curious whether there's something I'm doing wrong on my end.

**Tags:** image-transforms, image

---

## 2 answers

### Answer by username_1 on 2015-04-14. Score: 3 | Accepted answer

In your config file, set generateTransformsBeforePageLoad to true:
general.php:
return array(
    //other configs
    'generateTransformsBeforePageLoad' => true
);

This will trigger craft to generate and save transforms ahead of loading the page, as explained in the documentation here, this is will also work if you're using a plugin to provide the images.

> **Comments:**
> **username_2**: Just a small comment; in general, we don't want to create image transforms on page load for performance reasons. It's probably better to use something that allows the transforms to be created on Asset save on the backend.  

---

### Answer by username_3 on 2019-09-09. Score: 3

I'm having this problem too. This can't be expected behaviour, can it?
EDIT (SOLVED):
I've learned from MildlyGeeky in the Craft Discord server that this issue is caused by Twig being picky about transforms used in inline CSS styles. It can be resolved by making the transform into a variable and applying the "|raw" filter to it, thus:
{{ transformVariableName|raw }}


---

