Hello,

I wonder how this module works. By looking at the number of projects that use it I think it works well so It's probably me that don't understand one thing.

Let's imagine I define the following HTML (bootstrap based) :

<div class="row">
  <div class="col-sm-3">
    <img class="img-responsive" src="{{ 'myimage.png'|media }}" width="200" alt="My image" />
  </div>
  <div class="col-sm-9">
    <h2>My title</h2>
    <p>Lorem ipsum...</p>
  </div>
</div>

So, I have 2 column layout, image on the left on a small column and text on a right large column, pretty classic. The 200 width of my image fit well.

But If I resize my browser to reach the "xs" breakpoint (< 768px), it become a one column layout.

The problem is that my image should take the full width of the viewport, but it's stuck to 200px width due to the width=200 declaration in the html.

So I wonder what is the interest of the plugin actually, It's made to provide responsive images, but it stuck the images witdth to a fixed, hardcoded value...

I probably missed something but I don't see what, could you explain me please ?

Thanks

This plugin does not modify the width attribute in the html. The width attribute has to come from somewhere else.

The plugin parses all images out of your html and creates different sized copies. Then it adds the srcset attribute to your html so the browser will only download the small images for small viewports.