#67 – "Sizes attribute" field

Hello,

I have a question about the "Sizes attribute" field when creating an Econa custom field. Let's say I have 4 image sizes configured (S 300px, M 600px, L 900px and XL 1440px) and I want the small image (S) to be displayed one every device with a viewport below 320. What would I exactly enter in the "Sizes attribute" field in order for Econa to display the S image?

Thanks,

Sima

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.

So how does the Econa responsive mode work? Because I was testing it but no matter what viewport I am in it always loads the biggest version.

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.