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

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 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 👍