html - 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?

Answer 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

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