Srcset not loading the correct image

Chackmool · October 21, 2024, 7:08pm

Hello, I follow this tutorial from documentation:

https://docs.wappler.io/t/responsive-images-with-srcset/4368

My code looks like this:

<div class="container-fluid">
            <div class="row">
                <div class="col p-0 d-none d-md-block">
                    <img class="img-full" alt="Huatulco Playa" loading="lazy" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">

                </div>
                <div class="col p-0 d-none d-md-block">
                    <img class="img-full" alt="Huatulco Playa" loading="lazy" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">
                </div>
                <div class="col p-0 d-none d-md-block">
                    <img class="img-full" alt="Huatulco Playa" loading="lazy" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">
                </div>
                <div class="col p-0 d-none d-md-block">
                    <img class="img-full" alt="Huatulco Playa" loading="lazy" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">
                </div>

            </div>
        </div>

But I notice that always load the images in LOW quality and only if you resize the browser window manually it loads the correct nones.

Take a look to my video.

Suppose to load the large images on the large screens and low quality on mobile.

I think lazy load is not loading the correct images or what I am doing wrong?? @Teodor

Teodor · October 21, 2024, 7:33pm

The scrip will calculate the appropriate size of the image depending on the width of the element wrapping the image, not on your browser width.
So it depends on how wide is your col, wrapping the image, not the browser size.

Chackmool · October 21, 2024, 7:41pm

How is it possible that shrinking a div or column causes a higher-quality image to load? It doesn’t make sense to me. The initial image should be high quality, and when the size is reduced, a lower-quality version should load instead.

Teodor · October 21, 2024, 7:42pm

As explained the script will automatically choose the appropriate image size, based on the wrapping element's width on load.

Please provide a link where i can check this. Works perfectly fin in my local tests, the correct images are loaded.

Chackmool · October 21, 2024, 7:50pm

Sent in private Message.

Chackmool · October 21, 2024, 7:55pm

On safari seems to work on Chrome or Firefox dont.

Chackmool · October 21, 2024, 8:02pm

Here’s a test I did on Firefox. Notice how it initially loads a low-quality image, but when you shrink the window, it switches to a higher-quality version. Not make sense to me.

Teodor · October 21, 2024, 8:20pm

The same code as yours works perfectly fine in both Chrome and Safari, on my test page.
Try creating a brand new page with only the container/row/col images and without any custom classes applied to the images. Images should have just width:100%; added as shown in the docs.

So test with a page just like this one, no additional stuff to see if it still happens to you:

<!doctype html>
<html>

<head>
    <base href="/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="dmxAppConnect/dmxLazyLoad/dmxLazyLoad.js" defer></script>
    <script src="dmxAppConnect/dmxLazyLoad/lazysizes.min.js" defer></script>
    <link rel="stylesheet" href="dmxAppConnect/dmxAnimateCSS/animate.min.css" />
    <script src="dmxAppConnect/dmxAnimateCSS/dmxAnimateCSS.js" defer></script>
</head>

<body is="dmx-app" id="lazy" dmx-style:overflow="menustatus.value=='open'?'hidden':'visible'">

    <div dmx-animate-inview:10.duration:1500="fadeIn">
        <div class="container-fluid">
            <div class="row g-0">
                <div class="col">
                    <img dmx-lazyload="" data-srcset="assets/images/demo-niru-huatulco-1.jpg 300w,assets/images/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" width="100%">
                </div>
                <div class="col">
                    <img dmx-lazyload="" data-srcset="assets/images/demo-niru-huatulco-1.jpg 300w,assets/images/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" width="100%">
                </div>
                <div class="col">
                    <img dmx-lazyload="" data-srcset="assets/images/demo-niru-huatulco-1.jpg 300w,assets/images/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" width="100%">
                </div>
                <div class="col">
                    <img dmx-lazyload="" data-srcset="assets/images/demo-niru-huatulco-1.jpg 300w,assets/images/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" width="100%">
                </div>
            </div>
        </div>
    </div>
    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

It's something with the img-full class you applied to the images or some other styling affecting them on load.

Chackmool · October 21, 2024, 11:27pm

Hi @Teodor

I make a testing and I found that the bug comes if you add ALT text to the image. I put your code and below the original one and compare them.

Take a look for the last image from the first row and the first image from the last row.

You need to clear cache.

<!doctype html>
<html>

<head>
    <base href="/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.2/css/all.css" integrity="sha384-PPIZEGYM1v8zp5Py7UjFb79S58UeqCL9pYVnVPURKEqvioPROaVAJKKLzvH2rDnI" crossorigin="anonymous" />
    <script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
    <script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
    <link rel="stylesheet" href="dmxAppConnect/dmxAnimateCSS/animate.min.css" />
    <script src="dmxAppConnect/dmxAnimateCSS/dmxAnimateCSS.js" defer></script>
    <script src="dmxAppConnect/dmxLazyLoad/dmxLazyLoad.js" defer></script>
    <script src="dmxAppConnect/dmxLazyLoad/lazysizes.min.js" defer></script>
</head>

<body is="dmx-app" id="index">


    <div dmx-animate-inview:10.duration:1500="fadeIn">
        <div class="container-fluid">
            <div class="row g-0">
                <div class="col">
                    <img dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" class="img-full">
                </div>
                <div class="col">
                    <img dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" class="img-full">
                </div>
                <div class="col">
                    <img dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" class="img-full">
                </div>
                <div class="col">
                    <img dmx-lazyload="" alt="TEST - ALT" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto" class="img-full">
                </div>
            </div>
        </div>
    </div>

    <div id="total-content3" dmx-animate-inview:10.duration:1500="fadeIn">

        <div class="container-fluid">
            <div class="row g-0">
                <div class="col">

                    <img class="img-full" alt="Huatulco Playa" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">

                </div>
                <div class="col">
                    <img class="img-full" alt="Huatulco Playa" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">
                </div>
                <div class="col">
                    <img class="img-full" alt="Huatulco Playa" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">
                </div>
                <div class="col">
                    <img class="img-full" alt="Huatulco Playa" dmx-lazyload="" data-srcset="assets/images/layout/demo-niru-huatulco-1.jpg 300w,assets/images/layout/demo-niru-huatulco-1-lg.jpg 580w" data-sizes="auto">
                </div>

            </div>
        </div>
    </div>




    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

If you add Alt text stops working if you remove it works again. Can you take a look from your side?

ben · October 21, 2024, 11:50pm

Hi Juan, using developer tools and choosing iPad Mini, these are the results:

Portrait view:

Landscape view:

I hope this helps.

Chackmool · October 21, 2024, 11:53pm

Thanks Ben, the problem comes on load. On resize work fine. And when you have already the cache works. But I find that the Alt text is affecting the script. I know that we can use a Dynamic Alt but it suppose to dont affect .

Teodor · October 22, 2024, 6:09am

Please add this to your css and see if it fixes the problem:

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}

Chackmool · October 22, 2024, 4:33pm

This seems to fix the issue. Is this something I need to add always on my projects??

system · October 24, 2024, 4:33pm

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.