Lazysizes: data-srcset - responsive image doesn't work

Created on 11 Dec 2018 · 3Comments · Source: aFarkas/lazysizes

I need to change the images per each breakpoint.
For example, for
max-width: 767px: image-mobile.jpg
max-width: 1024px: image-desktop.jpg

I'm trying this way, but doesn't work for me:

<div class="image-wrapper">
  <img class="lazyload"
  data-sizes="(max-width: 767px) 767px, 100vw"
  data-src="https://picsum.photos/1600/900?image=3"
  data-srcset="https://picsum.photos/767/900?image=3 767w,
  https://picsum.photos/1024/900?image=3 1024w">
</div>

Should I, add another config to work?

Source

virginiarcruz

Most helpful comment

I assume your expectations are wrong
Do you know the difference between resolution switching and art direction [...]?

@aFarkas your answer wasn't helpful for me either (also having issues with responsive images)

gangsthub on 15 Oct 2019

👍4

All 3 comments

I assume your expectations are wrong. At least with these informations its impossible to judge wether everything is ok or not. But I'm pretty confident it's just working fine.

Do you know the difference between resolution switching and art direction (you are using resolution switching markup but you might want to use art direction markup)? Additionally especially with chromium based browsers it is hard to tell if resolution switching is working correctly.

Please read about the differences and then tell me what you expect and what does happen in detail. Also consider high dpi devices and cached image candidate selection. If things got clear just close the issue.

aFarkas on 11 Dec 2018

👎2

Chrome DevTools is frustrating in this regard, when trying to check network loading of responsive srcset selection. In my experience, it won't load from a srcset at all if using Device Preview and will use cached images in preference to selecting alternate sizes. The only way I've managed to get Chrome DevTools to provide me with useful information is to set DevTools>Settings>Network>Cache = Disabled and to embed the Devtools panel on one side of the window, so I can resize the viewport to mobile widths. However, it's usually quicker to just use an alternate browser.