How to handle responsive iamges

Hi,

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 https://learn.getgrav.org/16/content/media#responsive-images
I should rename my images to: [email protected] 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?

Hey,

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

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

Hope this helps.