How we could load lazy Background image?

Question

There is a css property which all new version of browser supports for img lazy loading that is loading with lazy value on image tags. But is there any css solution for background-iamg lazy loading? 👈🐧
I know that there is some packages for that and interestion observer API is another solution but it's hard to Implement.

Answer 1

So google was wrong??! Disgusting 😐
could be, day by day technologies gets updates and a simple & fast to code solution is better then copy- past & older solution.

Answer 2

https://web.dev/lazy-loading-images/
https://imagekit.io/blog/lazy-loading-images-complete-guide/
https://stackoverflow.com/questions/12014606/how-to-lazy-load-div-background-images
Hope that this helps you ;)

Answer 3

Ugulberto Sánchez
I know the intersection API can handle it, but my question is specifically about a css solution for background-image lazy loading, which we have a css solution for lazy load on <img/> tag that all new version browsers support it.

Answer 4

Thanks but I am comfortable with css so if there is no solution for it, I will replace all background-image with img tags

Answer 5

There is no solution for css only loading background images, i searched it on google. You can use also js to do that…

Answer 6

So google was wrong??! Disgusting 😐

Answer 7

Completely true.
Sorry that I was wrong 😔

Answer 8

Use the WebP format: The WebP image format may be faster to load than other formats, such as JPEG or PNG. You can use online tools to convert your images to the WebP format or load the image on a CDN

Answer 9

You may want to read article I wrote:

https://www.sitelint.com/blog/lazy-loading-css-background-images-for-better-website-loading-performance/

HTH