Serve the Right Image with HTML5 <picture> and srcset Without Wasting Bandwidth

The problem: one image for all devices wastes bytes

Shipping a single large hero to mobile and desktop means phones download pixels they can never display, and desktops get a blurry fallback. The useful takeaway is to let the browser pick, not the server guess. The element with and srcset lets you declare art-directed variants and resolution choices, and the inside provides a guaranteed fallback.

Desired outcome

At a given viewport width and device pixel ratio, the browser downloads exactly one image resource that matches your media condition and format preference. On narrow screens you get a cropped composition and a smaller file; on wider screens you get a wider composition and a higher resolution file. Screen readers still receive alt text from the fallback .

Prerequisites

Prepare variants before writing markup. You need at least two widths per breakpoint, and optionally different formats for the same width.

• Art direction variants: e.g., hero-mobile.jpg, hero-desktop.jpg with different crops.
• Resolution variants: e.g., hero-800.webp and hero-1600.webp for the same crop.
• Consistent naming so srcset descriptors map clearly to files.
• A build step or manual export that produces WebP and a JPEG fallback. WebP is chosen via the type attribute; JPEG is the universal fallback.

No special permissions are required. Work in your project’s static assets folder and edit the HTML template where the image is rendered.

Focused procedure

1. Order matters: most specific source first

Browsers evaluate elements in order and use the first match. Put media-specific and format-specific sources before the generic ones.

2. Write the markup

Wrap around sources then a fallback . Each can use media, type, and srcset. The supplies alt and a default src.

<picture>
  <!-- Desktop art direction, WebP preferred -->
  <source media="(min-width: 1024px)" type="image/webp" srcset="hero-desktop-1200.webp 1200w, hero-desktop-2400.webp 2400w" sizes="(min-width: 1440px) 1200px, 100vw">
  <!-- Desktop art direction, JPEG fallback -->
  <source media="(min-width: 1024px)" srcset="hero-desktop-1200.jpg 1200w, hero-desktop-2400.jpg 2400w" sizes="(min-width: 1440px) 1200px, 100vw">

  <!-- Mobile art direction, WebP preferred -->
  <source media="(max-width: 1023px)" type="image/webp" srcset="hero-mobile-600.webp 600w, hero-mobile-1200.webp 1200w" sizes="100vw">
  <!-- Mobile art direction, JPEG fallback -->
  <source media="(max-width: 1023px)" srcset="hero-mobile-600.jpg 600w, hero-mobile-1200.jpg 1200w" sizes="100vw">

  <!-- Fallback for browsers without <picture> support -->
  <img src="hero-desktop-1200.jpg" alt="Product hero showing key features" loading="lazy">
</picture>

Key points in this example:

• media selects art direction by viewport width.
• type selects format; browsers that understand WebP will stop at the first matching source.
• srcset with w descriptors plus sizes tells the browser the display width to choose from.
• The final is required and provides alt text for accessibility.

3. Avoid common ordering mistakes

If a generic source appears before a specific media source, the generic match wins and art direction is lost. If you omit media on a source intended for a breakpoint, the browser may download a larger file on small screens.

Expected checks

Verify selection, not just rendering.

• Open the page in Chrome DevTools, enable the device toolbar, and change widths across 600px, 1024px, and 1440px. In the Network tab filter by Img and confirm only one candidate per resize is requested.
• Visually inspect the image at each breakpoint to confirm the crop changes as defined by media conditions.
• Confirm alt text is present and readable by a screen reader; the alt is the accessible name for the whole .
• Run the markup through the W3C Markup Validation Service. Valid and usage should report no errors.

Limitations and recovery

Older browsers such as IE11 do not support . They will ignore elements and render the fallback. That is acceptable if the fallback is a reasonable default, but you will not get srcset selection.

Recovery options:

• Keep the src pointing to a reasonably sized default, not the largest variant.
• For broad compatibility needs, consider a lightweight polyfill for or server-side image scaling based on client hints.
• If you change the markup, rollback is simply reverting the HTML file to the previous -only version.

Incorrect srcset descriptors or missing sizes can cause the browser to over-download. Check that w descriptors match actual file widths and that sizes reflects the layout width.