Lazysizes: Largest Size Always Loaded In Chrome

[Undistraction]

Firstly, apologies if I'm completely misunderstanding something, but in switching from Picturefill to Lazysizes/respimage, I noticed the images with the largest width in the srcset would always be used, regardless of the initial screen or image size. I assumed I had made a mistake, but looking at the examples on your demo page, I see the same thing happening.

The markup for your third example – _responsive image with srcset and sizes attribute_ – as rendered in Chrome 44.0.2403.125 (64-bit) OSX:

<img sizes="245px" data-sizes="auto" data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w" class=" no-src lazyautosizes lazyloaded" srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
    https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w">

Setting the browser width to 300px wide (meaning the image is 265px wide) and refreshing the page results in a single image download - of the largest image: https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w

Surely in this situation, the smallest image should be served given the window / image dimensions.

[aFarkas]

It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.

You can test whether the right size would be chosen, by disableing the cache.

BTW.: You can also use lazySizes with picturefill. In that case I recommend to use pf 3.0.

[Undistraction]

Ah. Of course. That makes perfect sense. Thanks a lot for this. It's really nicely thought out.

[aFarkas]

This is a native Chrome feature. It is impossible to replicate with JS. In my opinion this feature should be further optimized by Chrome. If the "perfect" but smaller sized candidate is also cached Chrome should decode the smaller image candidate instead of the largest cached one. This would be better for decoding and resize performance and also for memory.

[rafikalid]

This is a sh**, chrome always loads the max size even for the first time
i removed all the cache, and i refreshed the page, chrome always loads the max size instead of small one!

[bYemma]

@rafikalid: Reduce the pixel ratio to 1 in your mobile emulation view.