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: sitelint.com/blog/…

Cezary Tomczyk
– Cezary Tomczyk

2023-06-18 08:27:01 +00:00
Commented Jun 18, 2023 at 8:27 — Cezary Tomczyk
– Cezary Tomczyk, Commented Jun 18, 2023 at 8:27

Muhammed Albarmavi · Accepted Answer · 2020-12-24 09:08:31Z

2

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

others method will required JavaScript check this 👉 Five Ways to Lazy Load Images for Better Website Performance

edited Dec 24, 2020 at 9:08

answered Dec 24, 2020 at 9:02

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

diviyanshmodi Over a year ago

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

Muhammed Albarmavi Over a year ago

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 Over a year ago

check this for more info web.dev/lazy-loading-images

Collectives™ on Stack Overflow

How to lazy load an image in CSS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related