HTML Course 12.2 The srcset and sizes attributes on images

HTML Course 12.2: The srcset and sizes Attributes on Images

Modern devices come with varying screen sizes and pixel densities. To serve responsive images that look sharp on all devices without wasting bandwidth, HTML5 introduces the srcset and sizes attributes on the <img> element. These attributes allow the browser to pick the optimal image file based on viewport width, layout size, and device pixel ratio.

Why Responsive Images?

• Avoid serving a large, high-resolution image to a small mobile device.
• Prevent blurry images on high-DPI (“Retina”) screens.
• Save bandwidth and improve page-load performance.
• Enable art direction by choosing the best crop or resolution for each layout.

The srcset Attribute

srcset is a comma-separated list of image candidate strings. Each candidate consists of a URL and a descriptor, either:

• Width descriptor (w): Indicates the intrinsic width of the image in pixels. Example: 800w.
• Pixel density descriptor (x): Indicates device pixel ratio. Example: 2x for “Retina” displays.

When using x descriptors, you don’t need a sizes attribute—browsers simply pick the candidate closest to the device’s DPR:

<!-- Using pixel-density descriptors -->
<img
  srcset='images/photo-1x.jpg 1x, images/photo-2x.jpg 2x'
  src='images/photo-1x.jpg'    <!-- Fallback for older browsers -->
  alt='Mountain landscape'>

When using w descriptors, you must pair srcset with sizes so the browser can calculate which image width best matches the rendered slot size:

<!-- Using width descriptors -->
<img
  srcset='
    images/landscape-small.jpg 480w,
    images/landscape-medium.jpg 800w,
    images/landscape-large.jpg 1200w
  '
  sizes='
    (max-width: 600px) 480px,   <!-- If viewport ≤ 600px, image slot is 480px wide -->
    (max-width: 900px) 800px,   <!-- If ≤ 900px, slot is 800px -->
    1200px                      <!-- Otherwise slot is 1200px -->
  '
  src='images/landscape-large.jpg'  <!-- Fallback -->
  alt='Mountain sunrise'>

The sizes Attribute

sizes is a comma-separated list of media conditions and slot widths:

If you omit sizes when using w descriptors, the browser assumes sizes='100vw' (i.e. full viewport width).

Selection Algorithm

1. Parse the media conditions in sizes left-to-right, pick the first matching slot width.
2. Multiply that slot width by device pixel ratio (DPR) to get the required resource width.
3. From srcset candidates, pick the smallest image whose descriptor ≥ required width. If none match, pick the largest available.

Responsive-Width Example

<!-- Fluid layout: image is 50% of container on large screens, full width on small -->
<img
  srcset='
    images/card-320.jpg 320w,
    images/card-640.jpg 640w,
    images/card-1024.jpg 1024w
  '
  sizes='
    (min-width: 800px) 50vw,   <!-- On viewports ≥ 800px, slot ≈ half viewport -->
    100vw                      <!-- Otherwise slot fills viewport -->
  '
  src='images/card-1024.jpg'  <!-- Fallback -->
  alt='Product card illustration'>

Pixel-Density Example

<!-- Perfect for icons or UI elements -->
<img
  srcset='
    icons/checkmark-1x.png 1x,
    icons/checkmark-2x.png 2x,
    icons/checkmark-3x.png 3x
  '
  src='icons/checkmark-1x.png'
  width='32' height='32'
  alt='Checkmark icon'>

Best Practices

• Always include a src fallback for legacy browsers.
• Use w descriptors plus sizes for fluid layouts or art direction.
• Use x descriptors for simple DPR-based scaling (e.g. icons).
• Keep descriptor lists short—three to five entries is usually enough.
• Test on different viewports and DPR devices to verify correct image selection.
• Ensure server-side caching and compression are configured for all image variants.

By mastering srcset and sizes, you can deliver crisp, appropriately sized images to every user, improving both user experience and performance.