2

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

enter image description here

Using this configuration:

enter image description here

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.

  • It's Working fine for me. Please make sure you have the proper image for validation. If it's possible to get it from front end team. – Ragav Aug 27 '19 at 18:03
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.