Responsive Images

Learn how to serve appropriately sized images to different devices using the srcset and sizes attributes, improving page load speed and user experience.

What it is

Responsive images allow a browser to select the most suitable image file from a set of options based on the device's screen size, resolution, and viewport width. Instead of loading one large image that might be too big for a phone or too small for a desktop, you provide multiple versions. The core mechanism relies on two HTML attributes: srcset, which lists candidate images with their intrinsic widths (in pixels) or pixel densities, and sizes, which tells the browser how wide the image will appear in CSS pixels under various media conditions.

Why it matters

• Performance: Reduces bandwidth usage by preventing mobile users from downloading desktop-sized assets.
• User Experience: Ensures sharp images on high-DPI screens without blurry upscaling on low-DPI screens.
• SEO: Faster load times contribute positively to search engine rankings.
• Accessibility: Helps maintain visual clarity across diverse viewing environments.

Syntax or steps

The basic pattern involves adding srcset and sizes to an <img> tag alongside a fallback src.

1. Prepare multiple image files at different resolutions (e.g., 400w, 800w, 1200w).
2. In srcset, list each URL followed by its width descriptor (e.g., image-400.jpg 400w).
3. In sizes, define media queries indicating how much space the image occupies relative to the viewport (e.g., (max-width: 600px) 100vw).
4. Keep the original src as a fallback for older browsers.

Example

<img 
  src="hero-small.jpg" 
  alt="Mountain landscape"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  srcset="hero-small.jpg 400w, hero-medium.jpg 800w, hero-large.jpg 1200w">

Explanation:

• src="hero-small.jpg": Fallback for browsers that do not support srcset.
• alt="...": Essential for accessibility.
• sizes:
  • If the viewport is ≤ 600px, the image takes up 100% of the viewport width (100vw).
  • If the viewport is ≤ 1200px, it takes up 50% (50vw).
  • Otherwise, it takes up 33% (33vw).
• srcset: Provides three candidates. The browser calculates the required display width using sizes and the device pixel ratio, then picks the closest match from srcset. For example, on a 375px wide phone with a 2x retina display, the browser needs ~750px of actual pixels. It sees hero-medium.jpg (800w) is the best fit.

Common mistakes

• Mismatched descriptors: Using w (width) in srcset but forgetting to specify sizes. Without sizes, the browser assumes the image is always 100vw, potentially serving oversized images on narrow layouts.
• Incorrect file naming: Not clearly distinguishing between resolution variants can lead to confusion during maintenance. Use consistent suffixes like -400w, -800w.
• Ignoring aspect ratios: If your responsive design changes the crop or aspect ratio significantly, consider using the <picture> element instead of simple srcset on an <img>.
• Missing fallback src: While modern browsers support srcset, omitting src breaks rendering in very old browsers or specific edge cases.

When to use it

Practice

Guided Exercise: Create an HTML file with an image that displays at 100% width on mobile and 50% width on desktop. Provide two source images: cat-400.jpg and cat-800.jpg.

Challenge: Add a third option cat-1200.jpg and adjust sizes so that on screens wider than 1000px, the image only takes up 30% of the viewport.

Hint: Your sizes attribute should look similar to: (min-width: 1000px) 30vw, (min-width: 600px) 50vw, 100vw.

Quick check

Question: What does the w descriptor in srcset represent?

Answer: It represents the intrinsic width of the image file in pixels (CSS pixels), allowing the browser to calculate which file provides enough detail for the current display context.

Summary

Responsive images optimize performance by letting the browser choose the best asset from a provided list. By correctly pairing srcset (available files) with sizes (layout constraints), you ensure fast loads and crisp visuals across all devices.