How to handle responsive iamges


most of my images have width of 1600px or 1280px. In the end I need them in 950px and 400px width.

As far as I understand what is written here
I should rename my images to: image@2x.jpg and link them like

![My 1600px Image](image.jpg?derivatives=[400,950])

Now a 400px and 950px should be created?! When I do will be no “srcset=” tag in the code and it seems that no derivate is created.
What am I doing wrong here?


You can output a cropped image size like this:
<img src="{{[header.custom.MyImage].cropZoom(768, 450).url()}}" alt="">

You can then integrate srcset such as:
<img src="{{[header.custom.MyImage].cropZoom(768, 450).url()}}" srcset="{{[header.custom.MyImage].cropZoom(768, 450).url()}} 768w, {{[header.custom.MyImage].cropZoom(320, 450).url()}} 320w" alt="">

Hope this helps.

Thanks for the hint.

I found out that the plugin is not compatible with the derivates. If I deactive the plugin it works.

I am trying another caption plugin now:

Derivates work with this image capture plugin: