Section 27: Responsive Images — Picture, Srcset and Sizes

Learning Objectives

• Understand why responsive images matter.
• Use srcset and sizes to offer different image resolutions.
• Use picture and source for art direction and alternate formats.
• Understand image dimensions and accessibility.

1. What Are Responsive Images?

Responsive images let the browser choose an appropriate image resource based on the display size, layout and device capabilities. This can improve image quality and reduce unnecessary downloads.

2. Basic Image

<img
  src="/images/course-banner-800.jpg"
  alt="HTML course banner"
  width="800"
  height="450">

Width and height communicate the image's intrinsic dimensions and help browsers reserve layout space. CSS can still scale the image to fit its container.

3. Using srcset with Width Descriptors

<img
  src="/images/course-800.jpg"
  srcset="/images/course-400.jpg 400w,
          /images/course-800.jpg 800w,
          /images/course-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800"
  height="450"
  alt="Students learning HTML on a laptop">

The w descriptors identify the intrinsic pixel widths of the image resources. The sizes attribute describes the image's expected rendered width at different viewport sizes. The browser uses these hints along with display density and other factors to select a suitable resource.

4. Using Density Descriptors

<img
  src="/images/logo.png"
  srcset="/images/logo.png 1x,
          /images/logo-2x.png 2x"
  width="200"
  height="60"
  alt="Codementrix">

Density descriptors such as 1x and 2x are an alternative to width descriptors. Do not mix width descriptors and pixel-density descriptors in the same srcset list.

5. Art Direction with picture

Use picture when different layouts need different crops or compositions, such as a wide desktop banner and a portrait mobile image.

<picture>
  <source
    media="(max-width: 600px)"
    srcset="/images/banner-mobile.jpg">
  <source
    media="(min-width: 601px)"
    srcset="/images/banner-desktop.jpg">
  <img
    src="/images/banner-desktop.jpg"
    width="1200"
    height="500"
    alt="A developer working on a web project">
</picture>

The browser checks source elements in order and uses a suitable match. The img element remains necessary as the fallback and carries the alternative text.

6. Alternate Image Formats

<picture>
  <source type="image/avif" srcset="/images/course.avif">
  <source type="image/webp" srcset="/images/course.webp">
  <img src="/images/course.jpg"
    width="800" height="450"
    alt="HTML course preview">
</picture>

This lets supporting browsers use AVIF or WebP while retaining a JPEG fallback. The image files must actually exist and be served with appropriate media types.

7. Responsive Image CSS

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

This common rule prevents images from overflowing their containers while preserving their aspect ratio when dimensions are not otherwise constrained.

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.