Responsive Images

8. Lazy Loading

<img
  src="/images/lesson-example.webp"
  width="800"
  height="450"
  loading="lazy"
  alt="Example of an HTML document structure">

Lazy loading can defer off-screen image downloads. Avoid applying loading="lazy" indiscriminately to the main hero image or another image that is immediately visible and important to initial rendering.

Common Mistakes

• Using srcset without correctly describing image widths.
• Writing sizes values that do not match the actual layout.
• Forgetting the fallback img element inside picture.
• Using different crops without checking whether the meaning is preserved.
• Leaving image dimensions out when they can be supplied.

Practice Exercises

1. Create an image with 400, 800 and 1200 pixel srcset resources.
2. Write a sizes rule for a full-width mobile image and an 800-pixel desktop image.
3. Build a picture element with a mobile crop and desktop crop.
4. Add AVIF, WebP and JPEG fallback sources.

Revision Quiz

1. What is the purpose of srcset?
2. What does sizes describe when width descriptors are used?
3. Which element supports art direction with alternative sources?
4. Is the img element still needed inside picture?
5. What do 400w and 800w represent?
6. Should every image be lazy-loaded?

Answer Key and Explanations

1. Offer alternative image resources — The browser can choose a suitable resolution.
2. Expected rendered image width — It helps the browser choose an appropriate source.
3. picture — It can select different sources based on media conditions or formats.
4. Yes. It provides the fallback image and the alt text.
5. Intrinsic pixel widths — The w descriptors communicate the resource widths.
6. No. Important above-the-fold images may need to load immediately.