Question regarding source choice

[BMCwebdev]

Hi there. I cannot find the answer in the documentation, so I thought I'd come here to ask. When working with a non art direction image choice, is there an option for this scenario:

1. I load page on full desktop browser size (or even say landscape mode on tablet).
2. I then shrink my browser window (or turn tablet to portrait).
3. Seeing as a large image was already loaded, and this is not art direction, can lazysizes just use the already downloaded large image, or must it then download the small image to replace?

Thank you!

[aFarkas]

This is handled by the browser. I don't do anything special here. Currently chrome won't load a smaller image.

I'm not sure, but I think, that all other browsers will load the smaller one. I can't say, whether this has a reason. (Smaller image less memory usages etc.)

In case you think the browsers should handle this different, please file a bug report there:

• https://bugzilla.mozilla.org/enter_bug.cgi
• https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/new/

In case you want to fully control this and you are using the data-sizes="auto" feature, you can write something like this:

document.addEventListener('lazybeforesizes', function(e){
      var width = parseFloat(e.target.getAttribute('sizes'));
      if(width && width > e.detail.width){
            e.detail.width = width;
      }
});

Note: In this case you might improve things, but you take away the browsers ability to intelligently handle things differently.