Answers.Body: <p>It looks like the <code>sizes</code> attribute needs to be tweaked. Absolute image sizes need to be specified in <code>px</code> units, not <code>w</code>. </p>
  
  <pre><code>&lt;img src="{{ craft.imager.base64Pixel(16, 9) }}" 
       sizes="(min-width:641px) 400px, 100vw" 
       srcset="{{ craft.imager.srcset(transformedImages) }}" 
       class="{{ imageClass }}"&gt;
  </code></pre>
  
  <p>The way the browser reads <code>sizes</code> is left to right and picks the first match. So the assumption would be that if the viewport width isn't greater or equal to 641px, then it must be smaller than 641px. So there's no need for <code>(max-width: 640px)</code>. The last value is the default size. </p>
  
  <p>Alternately, this could be expressed by declaring the smallest viewport size to largest like this:</p>
  
  <pre><code>sizes="(max-width:640px) 100vw, 400px"
  </code></pre>
  
  <p>Also, instead of saying "when the viewport is smaller than 640px, use the 640px image", e.g. <code>(max-width: 640px) 640px</code>, what you probably want is <code>100vw</code>. I'm assuming the image doesn't always stay 640px even when the screen gets smaller. If your design is responsive, the image will scale down with the screen width. </p>
  
  <p>Using <code>100vw</code> means that when your viewport is 400px wide or smaller, the browser can now choose to download the 400px wide image version. Or if the viewport is 640px wide, the 640px wide image is a better match.</p>
  
  <p>Here's an example on Codepen: <a href="https://codepen.io/alexroper/pen/VxGgLj" rel="nofollow noreferrer">https://codepen.io/alexroper/pen/VxGgLj</a></p>
  
  <p>Another possible reason you're not seeing the 400px size is if you're using a hi-dpi, "Retina" display or similar 4k monitor. The browser picks the best image to display from the available ones in <code>srcset</code>. If you specified the target image size as 400px (CSS reference pixels), but you're display is 2x "Retina" display, the browser will favor using the higher resolution image. The high pixel density of a 2x display can fit 800 pixels in a 400-pixel space. 640px isn't as large as 800px, but it's better than 400px so the browser would choose that image.</p>
  
  <p>So even tho an iPhone 5 has a screen size of 320 × 568 in css reference pixels, the physical pixels are double that (640×1136). Safari will prefer to download the higher res 640px image over the 400px one in the img tag example above.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-16T07:09:46.940Z
Answers.LastActivityDate: 2018-05-16T17:27:30.427Z
Answers.LastEditDate: 2018-05-16T17:27:30.427Z
Answers.UserDisplayName: Alex Roper
Body: <p>Have read this <a href="https://nystudio107.com/blog/creating-optimized-images-in-craft-cms" rel="nofollow noreferrer">article</a>, but still having issues.</p>
  
  <p>Craft 3.0.4
  Imager 2.0.0</p>
  
  <p>My template code is:</p>
  
  <pre><code>{% set image = block.image.one() %}
  {% set focalPoint = image.focalPoint | default("50% 50%") %}
  
  {# 
    // set transform for floated images
    // override in full width
  #}
  {% set transformedImages = craft.imager.transformImage(image,
      [
          { width: 400, ratio: 4/3, jpegQuality: 85 },
          { width: 640, ratio: 4/3, jpegQuality: 85 },
      ],
      {
          format: 'jpg',
          allowUpscale: false,
          mode: 'crop',
          jpegQuality: 80,
          interlace: true,
          position: focalPoint,
      }
  ) %}
  
  
  {# determine if image floats or not #}
  {% if block.imageFormat == "left" %}
    {% set imageClass = "floated-left" %}
  {% elseif block.imageFormat == "right" %}
      {% set imageClass = "floated-right" %}
  {% else %}
      {# full width #}
      {% set imageClass = "full-width" %}
  {% endif %}
  {# end floats or not #}
  
  {# full width image here #}
  {% if block.imageFormat == "fullWidth" %}
  
  {% else %}
  {# floated images here #}
    &lt;img 
      src="{{ craft.imager.base64Pixel(16, 9) }}" 
      sizes="(max-width: 640px) 640w, (min-width:641px) 400w" 
      srcset="{{ craft.imager.srcset(transformedImages) }}" 
      class="{{ imageClass }}"
      &gt;
  {% endif %}
  </code></pre>
  
  <p>What I expect to happen is that at widths smaller than 640px an image with a width of 640px is served up, at widths 641px and larger and image of 400pxs is served up.</p>
  
  <p>However at large widths I see the 640px width image.</p>
  
  <p>The outputted code on the front end is:</p>
  
  <pre><code>&lt;img 
    src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%279%27%20style%3D%27background%3Atransparent%27%2F%3E"
  
    sizes="(max-width: 640px) 640w, (min-width:641px) 400w" 
  
    srcset="/imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_d5a1008e3f8fb9f7c44fa92474183c3e.jpg 400w, /imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_3edaa49114a08f6f3438bb6daad2e68a.jpg 600w, /imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_7c3d51f40436135917e37f29c276802d.jpg 640w"
  
    class="floated-left"&gt;
  </code></pre>
  
  <p>Not sure what I'm doing wrong. Please advise.</p>
  
Tags: <craft3><plugin-imager><responsive-images>
Title: responsive image and srcset with Imager
ThreadText: # responsive image and srcset with Imager
  
  (Asked by: username_0 on 2018-05-15)
  
  Have read this [article](https://nystudio107.com/blog/creating-optimized-images-in-craft-cms), but still having issues.
  
  Craft 3.0.4
  Imager 2.0.0
  
  My template code is:
  
  ```
  {% set image = block.image.one() %}
  {% set focalPoint = image.focalPoint | default("50% 50%") %}
  
  {# 
    // set transform for floated images
    // override in full width
  #}
  {% set transformedImages = craft.imager.transformImage(image,
      [
          { width: 400, ratio: 4/3, jpegQuality: 85 },
          { width: 640, ratio: 4/3, jpegQuality: 85 },
      ],
      {
          format: 'jpg',
          allowUpscale: false,
          mode: 'crop',
          jpegQuality: 80,
          interlace: true,
          position: focalPoint,
      }
  ) %}
  
  {# determine if image floats or not #}
  {% if block.imageFormat == "left" %}
    {% set imageClass = "floated-left" %}
  {% elseif block.imageFormat == "right" %}
      {% set imageClass = "floated-right" %}
  {% else %}
      {# full width #}
      {% set imageClass = "full-width" %}
  {% endif %}
  {# end floats or not #}
  
  {# full width image here #}
  {% if block.imageFormat == "fullWidth" %}
  
  {% else %}
  {# floated images here #}
    <img 
      src="{{ craft.imager.base64Pixel(16, 9) }}" 
      sizes="(max-width: 640px) 640w, (min-width:641px) 400w" 
      srcset="{{ craft.imager.srcset(transformedImages) }}" 
      class="{{ imageClass }}"
      >
  {% endif %}
  
  ```
  
  What I expect to happen is that at widths smaller than 640px an image with a width of 640px is served up, at widths 641px and larger and image of 400pxs is served up.
  
  However at large widths I see the 640px width image.
  
  The outputted code on the front end is:
  
  ```
  <img 
    src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%279%27%20style%3D%27background%3Atransparent%27%2F%3E"
  
    sizes="(max-width: 640px) 640w, (min-width:641px) 400w" 
  
    srcset="/imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_d5a1008e3f8fb9f7c44fa92474183c3e.jpg 400w, /imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_3edaa49114a08f6f3438bb6daad2e68a.jpg 600w, /imager\uploads\32\love-letters-in-pink-hearts_4460x4460-1_7c3d51f40436135917e37f29c276802d.jpg 640w"
  
    class="floated-left">
  
  ```
  
  Not sure what I'm doing wrong. Please advise.
  
  **Tags:** craft3, plugin-imager, responsive-images
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-05-16. Score: 1 | Accepted answer
  
  It looks like the `sizes` attribute needs to be tweaked. Absolute image sizes need to be specified in `px` units, not `w`.
  
  ```
  <img src="{{ craft.imager.base64Pixel(16, 9) }}" 
       sizes="(min-width:641px) 400px, 100vw" 
       srcset="{{ craft.imager.srcset(transformedImages) }}" 
       class="{{ imageClass }}">
  
  ```
  
  The way the browser reads `sizes` is left to right and picks the first match. So the assumption would be that if the viewport width isn't greater or equal to 641px, then it must be smaller than 641px. So there's no need for `(max-width: 640px)`. The last value is the default size.
  
  Alternately, this could be expressed by declaring the smallest viewport size to largest like this:
  
  ```
  sizes="(max-width:640px) 100vw, 400px"
  
  ```
  
  Also, instead of saying "when the viewport is smaller than 640px, use the 640px image", e.g. `(max-width: 640px) 640px`, what you probably want is `100vw`. I'm assuming the image doesn't always stay 640px even when the screen gets smaller. If your design is responsive, the image will scale down with the screen width.
  
  Using `100vw` means that when your viewport is 400px wide or smaller, the browser can now choose to download the 400px wide image version. Or if the viewport is 640px wide, the 640px wide image is a better match.
  
  Here's an example on Codepen: <https://codepen.io/username_1/pen/VxGgLj>
  
  Another possible reason you're not seeing the 400px size is if you're using a hi-dpi, "Retina" display or similar 4k monitor. The browser picks the best image to display from the available ones in `srcset`. If you specified the target image size as 400px (CSS reference pixels), but you're display is 2x "Retina" display, the browser will favor using the higher resolution image. The high pixel density of a 2x display can fit 800 pixels in a 400-pixel space. 640px isn't as large as 800px, but it's better than 400px so the browser would choose that image.
  
  So even tho an iPhone 5 has a screen size of 320 × 568 in css reference pixels, the physical pixels are double that (640×1136). Safari will prefer to download the higher res 640px image over the 400px one in the img tag example above.
  
  
  ---
  
  