How to lazy load an image in CSS

Question

.image--about {
    background: url(../img/ZIZF.gif) no-repeat center;
    background-size: cover
}

I have this CSS. I want to use lazy loading to following images that I load via CSS, can you please help me out?

That might help: https://www.sitelint.com/blog/lazy-loading-css-background-images-for-better-website-loading-performance/ — Cezary Tomczyk, Jun 18 '23 at 08:27

Muhammed Albarmavi · Answer 1 · 2020-12-24T09:08:31.567

1

I don't know if it possible to apply lazy loading by css but it 's possible with HTML by adding single attribute loading="lazy"

<img src="myimage.jpg" loading="lazy" alt="..." />

other values for loading like eager and auto

edited Dec 24 '20 at 09:08

answered Dec 24 '20 at 09:02

Hey I have tried adding the folloewing attribute in images , but i just want to add it in css , my image loads via css , if you could help me so – diviyanshmodi Dec 24 '20 at 13:47
I look for it but so far there is now way to load image by css only there is servals methods that include JavaScript and a single method as I mention in my answer – Muhammed Albarmavi Dec 24 '20 at 16:35
check this for more info https://web.dev/lazy-loading-images/ – Muhammed Albarmavi Dec 24 '20 at 16:35

1 Answers1