<p>This is all pretty well documented here: <a href="https://nystudio107.com/blog/creating-optimized-images-in-craft-cms" rel="nofollow noreferrer">Creating Optimized Images in Craft CMS</a></p>

<p>But if you need general help on <code>srcset</code> and <code>&lt;picture&gt;</code> elements check out <a href="https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/" rel="nofollow noreferrer">Responsive Images Done Right: A Guide To  And srcset</a> and <a href="https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/" rel="nofollow noreferrer">Don’t use  (most of the time)</a></p>

CC BY-SA 3.0
2017-07-16T20:37:23.597Z
2017-07-16T20:37:23.597Z
andrew.welch
<p>I’m trying to setup responsive images with the imager plugin, that has 100% width on mobile sizes and then the images are in a 3 column grid on tablet and desktop. But although I’ve got the code outputting the three sizes, the browser is only showing the largest one at all sizes. So can someone see what I’ve done wrong in the following code</p>

<pre><code>      {% set image = row.image.first() %}
      {% set transformedImages = craft.imager.transformImage(image,
          [
              { width: 360, ratio: 4/3 },
              { width: 294, ratio: 4/3 },
              { width: 720, ratio: 4/3, jpegQuality: 60 },
          ],
          {
              format: 'jpg',
              allowUpscale: false,
              mode: 'crop',
              jpegQuality: 80,

              interlace: true
          }
      ) %}
      {% if image | length %}
      &lt;img class="img-responsive"
           src="{{ transformedImages[1].url }}"
           sizes="(min-width: 768px) 33vw, 100vw"
           srcset="{{ craft.imager.srcset(transformedImages) }}"
           alt="{{ image.title }}"
           width="100%"&gt;
      {% endif %}
</code></pre>

<p>I’m assuming it’s to do with the <code>sizes="(min-width: 768px) 33vw, 100vw"</code> So the 360 width is desktop, and the 294 width is tablet, and the largest size of 720 width is mobile to account for the 2x density.</p>

<p><a href="https://i.sstatic.net/f4yFf.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/f4yFf.png" alt="enter image description here"></a></p>

<plugin-imager>
responsive sizes with imager plugin
# responsive sizes with imager plugin

(Asked by: username_0 on 2017-07-07)

I’m trying to setup responsive images with the imager plugin, that has 100% width on mobile sizes and then the images are in a 3 column grid on tablet and desktop. But although I’ve got the code outputting the three sizes, the browser is only showing the largest one at all sizes. So can someone see what I’ve done wrong in the following code
      {% set image = row.image.first() %}
      {% set transformedImages = craft.imager.transformImage(image,
          [
              { width: 360, ratio: 4/3 },
              { width: 294, ratio: 4/3 },
              { width: 720, ratio: 4/3, jpegQuality: 60 },
          ],
          {
              format: 'jpg',
              allowUpscale: false,
              mode: 'crop',
              jpegQuality: 80,

              interlace: true
          }
      ) %}
      {% if image | length %}
      
      {% endif %}

I’m assuming it’s to do with the sizes="(min-width: 768px) 33vw, 100vw" So the 360 width is desktop, and the 294 width is tablet, and the largest size of 720 width is mobile to account for the 2x density.

**Tags:** plugin-imager

---

## 1 answers

### Answer by username_1 on 2017-07-16. Score: 2 | Accepted answer

This is all pretty well documented here: [Creating Optimized Images in Craft CMS](https://nystudio107.com/blog/creating-optimized-images-in-craft-cms)

But if you need general help on `srcset` and  elements check out [Responsive Images Done Right: A Guide To And srcset](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/) and [Don’t use (most of the time)](https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/)


---

