Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-28T04:11:16.633Z
Answers.Text: 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.
Answers.UserDisplayName: andrew.welch
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2015-04-14T02:54:30.953Z
Answers.LastActivityDate: 2018-06-26T21:23:30.977Z
Answers.LastEditDate: 2018-06-26T21:23:30.977Z
Answers.UserDisplayName: Aaron Berkowitz
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-09-09T20:44:23.840Z
Answers.LastActivityDate: 2019-09-10T16:22:43.103Z
Answers.LastEditDate: 2019-09-10T16:22:43.103Z
Answers.UserDisplayName: user2157969
Body: <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>
  
Tags: <image-transforms><image>
Title: Image Transforms - Image not processed until second page refresh
ThreadText: # 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](http://buildwithcraft.com/docs/config-settings#generateTransformsBeforePageLoad), 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 }}
  
  ```
  
  
  ---
  
  