Responsive Images: Navigating the picture Tag, srcset, and Fluid Viewports

The High-Resolution Image Challenge

Responsive web grids scale images to fit layout widths. However, browsers still download the identical source file regardless of screen size.

• ◆The Issue: A mobile phone on a 3G connection downloads a 2000px, 1.5MB desktop background image, causing slow page loads.
• ◆The Goal: Serve small images to mobile devices and high-resolution images to Retina monitors.

The emerging HTML5 Responsive Images specifications address this bottleneck.

Performance Rule: Match image dimensions to device viewports, avoiding unnecessary data transfer on mobile connections.

The emerging srcset and picture specifications

Web standards bodies are validating two solutions:

1. The srcset Attribute

Allows developers to specify a list of image sources and their widths, allowing the browser to select the optimal file:

<img src="small.jpg" 
     srcset="medium.jpg 768w, large.jpg 1200w" 
     alt="Responsive Hero Banner" />

2. The <picture> Tag

For art direction scenarios where you want to serve completely different images based on media conditions:

<picture>
    <source media="(max-width: 480px)" srcset="mobile-banner.jpg">
    <source media="(min-width: 481px)" srcset="desktop-banner.jpg">
    <img src="default.jpg" alt="Dynamic Layout Image">
</picture>

By implementing responsive image rules, web applications improve page speed scores on mobile devices.