SXA Responsive Image Variant is not working correctly

Question

I am using the SXA Responsive Image Variant in the SXA's default Image component.

Using this configuration:

Here whether I enter the values in the Sizes field or not. It is only considering the values from Widths field only.

According to this syntax (max-width: 480px) 400px, if the windows max-width is 480px it should load the image with 400px.

HTML Response:

<img src="/demo/-/media/Shared/Images/MBB5156.jpg?w=280&amp;hash=C8E4B1503A9CDBF34FC87046A7467C0D" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, (max-width: 880px) 800px, (max-width: 1080px) 1000px, (max-width: 1680px) 1600px, 3000px" srcset="/demo/-/media/Shared/Images/MBB5156.jpg?w=280&amp;hash=C8E4B1503A9CDBF34FC87046A7467C0D 280w,/demo/-/media/Shared/Images/MBB5156.jpg?w=440&amp;hash=AB7FE6DC984DBAA8B53205555CAC7A7F 440w,/demo/-/media/Shared/Images/MBB5156.jpg?w=800&amp;hash=1286ED5A6DB6C26C046946C2A35F9569 800w,/demo/-/media/Shared/Images/MBB5156.jpg?w=1000&amp;hash=7AE55563B1FDD6D9FEC7F1079EBFAA20 1000w,/demo/-/media/Shared/Images/MBB5156.jpg?w=1600&amp;hash=3359D1126A5DAC2DC303B24D645CFC6A 1600w,/demo/-/media/Shared/Images/MBB5156.jpg?w=3000&amp;hash=D044DECA80605E7C71C9AC79C4BDCAD6 3000w">

Even if I change the value in Sizes field, Sitecore does not consider it. Here Widths field is treated the same for browsers max-width and the image width.

Thanks for the help.

Answer 1

The Responsive Image variant uses supported browsers' built-in responsive image handling. See the MDN article for details.

The browser will cache the largest version loaded - sometimes even if you clear the browser cache.

The main surefire way I've found in Chrome to test this is to use Incognito, open DevTools, check the Disable cache box, toggle the device bar on, use the Responsive device, set the window width very small, refresh the page, and manually slide the window from small to large - then watch the Network tab to see the different images loading.