loading="lazy" problems in chrome

Question

I've got some images which should lazy load natively. In chrome it works offline but not online. Some, but not all, images are not shown if I use loading="lazy". The first image is shown - the second not and so on. It's really curious, becouse I'm using it now without problems for a couple of years. I would appreciate some hints.

`<div class="item">
    <a href="./about.html">
        <h1>Über mich</h1>
        <picture>
            <source type="image/webp" 
                    srcset="./anna_im_affe_IMG_5482_600.webp 600w,
                            ./anna_im_affe_IMG_5482_1000.webp 1000w" 
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px">
            <img srcset="./anna_im_affe_IMG_5482_600.jpg 600w,
                        ./anna_im_affe_IMG_5482_1000.jpg 1000w"
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px"
                    src="./anna_im_affe_IMG_5482_1000.jpg" alt="xxxx" loading="lazy" width="100%" height="auto">
        </picture>
    </a>
</div>
<div class="item">
    <a href="./kuratierung.html">
        <h1>Kuratierung</h1>
        <picture>
            <source type="image/webp" 
                    srcset="./Unter-Strom-140320-083_semper_600.webp 600w,
                            ./Unter-Strom-140320-083_semper_1000.webp 1000w" 
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px">
            <img srcset="./Unter-Strom-140320-083_semper_600.jpg 600w,
                        ./Unter-Strom-140320-083_semper_1000.jpg 1000w" 
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px" 
                src="./Unter-Strom-140320-083_semper_1000.jpg" alt="xxx" loading="lazy" width="100%" height="auto">
        </picture>
    </a>
</div>`

I have a similar problem in WordPress, everything seems to be correct, no warnings, no errors, but erratic behavior. This post is one of the few relevant matches I was able to find so far, as most other "lazy loading not working" questions describe the opposite situation that images have been loaded in an eager fashion instead of getting deferred. Did you find a solution, by chance? — Ingo Steinke, Dec 05 '22 at 17:22
I can not suggest an edit, as the edit queue on Stack Overflow is still full, so as a reminder: the title could be changed to something like: loading="lazy" not loading height:auto images in Chrome — Ingo Steinke, Dec 06 '22 at 09:24

Ingo Steinke · Answer 1 · 2023-08-26T16:36:24.973

Setting height="auto" instead of specifying the actual image height defaults to zero height (i.e. computed: height: 0) until the image is actually loaded. This seems to cause an issue with Chrome and Chromium browsers sometimes erratically failing to detect image intersection, which results in not loading the image at all, as described in Issue with loading images on Chrome browser v 75, which I could still reproduce in Chrome 108.

If you know the actual image size, you should set the width and height attributes accordingly. Doing so will also prevent layout shift, as discussed in Set height of image with 100% width for CLS. You can change the display size using CSS:

  <img srcset="./Unter-Strom-140320-083_semper_600.jpg 600w,
               ./Unter-Strom-140320-083_semper_1000.jpg 1000w" 
       sizes="(max-width: 800px) 600px,
              (min-width: 700px) 1000px,
              (min-width: 900px ) 600px" 
       src="./Unter-Strom-140320-083_semper_1000.jpg"
       alt="xxx"
       loading="lazy" 
       width="100%" 
       height="auto">

.item img {
  width: 100%;
  height: auto;
}

To prevent the lazy loading issue, even in cases where you don't know the original image size or ratio, you can specify a minimum height of 1px.

.item img {
  width: 100%;
  height: auto;
  min-height: 1px;
}

loading="lazy" problems in chrome

1 Answers1