Native lazy-loading (loading=lazy) not working even with flags enabled - html

Question

I am currently trying to update my Website using the new loading="lazy" attribute as shown here: https://web.dev/native-lazy-loading
As seen in the video, everything works as expected, but compared with my waterfall diagram in chrome, it doesn't.
How it looks:
How it should look:
This is how its implemented:
<img class="has-border" src="https://andreramoncombucket.s3.amazonaws.com/static/assets/img/work/personal-website/pw_full.jpg" style="object-fit: cover;" alt="..." loading="lazy">

Answer 1

I had a similar issue when trying to implement it.
I use Chrome by default and it was not working. When I tested it in Firefox, it did work. That made me think it was a browser problem.
After digging in a bit more, I found out the "problem" for my case. It might be the same probably for many others.
It turns out Chrome is more impatient than Firefox when loading images tagged as lazy. That means it loads the images much earlier, so an image will not be loaded when it appears at the screen but earlier than that.
Firefox, on the other side, is loading the images almost when they are about to be shown at the screen.
The images I was testing were below the fold, but the page was not very long, so Chrome was loading the images anyway.
When I tried it in a much longer article, the images that were deep down the article did load lazily in Chrome as well.
Hope this helps!

Answer 2

I had a similar problem, and after some research, I found the solution:
Just need to add width and height to the IMG tag, this is because the browser needs to know the size of the element before applying lazy loading.
Your code:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
Your code after adding width and height:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="200px" height="200px">
Another alternative is using inline style:
<img class="has-border" src="..." style="object-fit:cover; height:200px; width:200px;" alt="..." loading="lazy">
Take into consideration I just randomly set the dimensions of the IMG tag to 200px.
You can find more information on this web.dev article
hope it helps 👍

Answer 3

I have the worst reason it wasn't working - I forgot to add the width and height attributes (they were instead added as styles in my broken code)

Answer 4

optionally if you dont want to change your image size use this
Original code
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
With working Lazy load with no size restrictions
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="auto" height="100%">

Answer 5

I have applied loading="lazy" to all of my images, included width="111px" height="111px" attributes for my <img> tags and even converted them into WebP format to reduce size, but my Firefox browser still keeps loading all images from the entire page. I don't touch or scroll after refresh.
The indicator Dev tools says that it is - lazy-img.
I use Nodejs, vue and tailwind.
What could be wrong?

Answer 6

It could be because of cache.
If you see here lazy-img in the Network tab that means everything is fine.
You can test on a private window if you want just to double check.

Answer 7

The image should be positioned as "relative" in style.