"Sizes attribute" field

Hi,

You cannot define which one image size will be used. You use the sizes attribute to tell the browser how much space the image is supposed to take. Then the browser will pick the most suitable size to use depending on the device density.

This means that if you define that this image will get 300 pixels wide in viewports below 320 pixels, devices with retina displays will get the M size ( 600 pixels ).

So what you have to do is use the sizes attribute to describe the size the image will take in various resolutions.

So in your case the sizes attribute should be something like:

sizes="(max-width: 320px) 300px, 100vw"

You can always search the web for articles describing the sizes attribute usage as https://builtvisible.com/responsive-images-for-busy-people-a-quick-primer/


Let me know if you need more help with this.

You have to clean the browser cache, the resize the browser window and then visit the page.

If the browser has already an image in cache, it will not check which size is best to download. Actually it will not download any image size, it will use the cached file.