What does loading="lazy" on do, and when should you NOT use it?

Defers loading until the image nears the viewport; avoid it on the LCP image

Compresses the image on the fly in the browser; avoid it on transparent PNGs

Loads the image in a background thread; avoid it on mobile devices

HTML & CSS · Middle · Question 23 of 75

What does `loading="lazy"` on `<img>` do, and when should you NOT use it?

1Compresses the image on the fly in the browser; avoid it on transparent PNGs
✓Correct answer: Defers loading until the image nears the viewport; avoid it on the LCP image
3Loads the image in a background thread; avoid it on mobile devices

Explanation

Native lazy loading saves bandwidth for below-the-fold images. But for a hero image it's harmful: the browser starts loading later and LCP suffers. For an important image, use fetchpriority="high" instead. The attribute has nothing to do with compression or formats.

What does `loading="lazy"` on `<img>` do, and when should you NOT use it?

Explanation

Further reading

Problem with a question

Test yourself

What does loading="lazy" on <img> do, and when should you NOT use it?

Explanation

Further reading

Test yourself

What does `loading="lazy"` on `<img>` do, and when should you NOT use it?