data-srcset retina display issue

[JohnRSim]

I have 2 monitors connect to my main laptop that has a retina display.

When I load the browser at 320px medium image is displayed. As I scale my browser width up from 320px as soon as I reach 463px wide - using chrome dev tools to slowly scale the large image is displayed.

However if you look at the code below - the large image should only display at 1024w and medium should display at 640w but it looks as if their is a code issue for retina displays where it thinks the screen size is double.

Also when I scale the browser back down the image stays at the larger resolution is this by design as the image has already loaded it leaves the largest loaded image in?

<img
    alt="Lazy load image example with srcset"
    sizes="100vw"
    data-srcset="http://placehold.it/1024x682?text=large 1024w,
        http://placehold.it/600x400?text=medium 640w,
        http://placehold.it/320x214?text=small 320w"
    data-src="http://placehold.it/600x400?text=fallback"
    class="b-lazy" />

[dinbror]

Hi @JohnRSim.

Have you tried testing it without blazy and data attributes?

However it sounds like you are looking for something like the picture element. Srcset is for handling resolutions and only serve wants needed (minimu) so yes if your browser downloads a high res image and you scale the window down it wont load a smaller size.

[JohnRSim]

I need to support IE9+ so unfortunately cannot use the picture element. I tried to use the breakpoints but that is no longer supported since 1.6 looking at the documentation.

if I use CSS media queries instead of blazy it all appears to work. Would it be helpful to do a quick video for you to see an example on the retina screen?

That makes sense for Srcset.

Thanks J.

[dinbror]

@JohnRSim But scrset is neither supported in IE9 ;) The breakpoints feature still works. I marked it as obsolete because I'll remove it in the future but it's still alive.

There are polyfills for the picture element you can use. Otherwise is it an issue that it will show the fallback image in legacy browser (Progressive enhancement)?

[JohnRSim]

The image stays at default so I presumed support had gone for breakpoints. Tried with src and data-src for the default image -

<img class="b-lazy img-responsive"  
            data-src="http://placehold.it/768x337?text=default" 
            data-src-small="http://placehold.it/360x214?text=small"
            data-src-medium="http://placehold.it/768x337?text=medium"
            data-src-large="http://placehold.it/1024x152?text=large"
            data-src-xlarge="http://placehold.it/1920x285?text=xlarge"
            alt=""   
        />          

<script src="blazy.js"></script>
<script>
window.bLazy = new Blazy({
    breakpoints: [{
        width: 360 // max-width
        , src: 'data-src-small'
    },
    {
        width: 768 // max-width
        , src: 'data-src-medium'
    },                              
    {
        width: 1024 // max-width
        , src: 'data-src-large'
    }, 
    {
        width: 1400 // max-width
        , src: 'data-src-xlarge'
    }],                         
    success: function(element){
        console.info("image lazy loaded successfully.");                            
    },
    error: function(element,message){
        console.error(element,message);
    }
});
</script>

[dinbror]

What is the width of your screen?

How the breakpoints works:

The breakpoints are defined by the device width not the browser width. It means that it’ll look at your screen width which won’t change when you resize your browser window. The reason why I’m looking at the device width and not the width is that I don’t want to load multiple image sources for the same image when you resize (multiple server request per image). And if you have a big screen but the initial width of your browser window is something small I don’t want to upscale a low res image when you resize it up.

[JohnRSim]

That makes sense thanks 👍 - I had presumed your breakpoints were based on browser width.

So if I'm adding a breakpoint for a tablet - 1024x768

I have 2 breakpoints 1 desktop 1024+ and one tablet 768+

I have the page load at 768px wide tablet in portrait mode. Then I rotate the ipad to landscape the width is now 1024px essentially my min desktop designed width.

Will the image requested stay as 768px or will it dynamically load in the 1024px image? I'm guessing it will stay as the 768px until I refresh in landscape mode and then will load the desktop image?

I there a mode to change breakpoints to run off browser width when developing and testing - I can update the code and manually set from screen width to window width. Instead of doing through device testing an using something like browserstack.

[dinbror]

It will stay at 768px.

You can change this line while testing (line 112): if (object.width >= window.screen.width) { or use devtools in chrome to emulate another device

[dinbror]

Closing. Nothing to do with blazy