How srcset Serves Responsive JPEGs to Mobile

The HTML srcset attribute enables web browsers to select and download the optimal JPEG image file for a user's specific screen size and pixel density. Instead of forcing a mobile device to download a large desktop-oriented asset, developers define a list of image variants with corresponding width descriptors. By evaluating these image options alongside the viewport dimensions and display characteristics, mobile browsers calculate the exact resolution needed and request only the most efficient file, saving bandwidth and improving load times.

The Mechanism: Width Descriptors

To serve responsive JPEGs, the srcset attribute pairs image file paths with width descriptors, represented by the letter w (for example, image-small.jpg 400w). The width descriptor indicates the intrinsic pixel width of that specific JPEG file.

A standard implementation looks like this:

<img src="fallback.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Example photo">

The browser reads this list before any image is downloaded, gaining full awareness of every available file size.

The Role of the sizes Attribute

The srcset attribute works in tandem with the sizes attribute. While srcset tells the browser the physical dimensions of the available files, sizes communicates how much layout space the image will occupy on the screen at different viewport breakpoints.

In the example above, (max-width: 600px) 100vw informs the mobile browser that on viewports up to 600 pixels wide, the image will span 100% of the viewport width (100vw). Because layout styles (CSS) may not yet be parsed when the browser initiates resource preloading, the sizes attribute gives the browser the immediate context it needs to calculate layout width.

Accounting for Device Pixel Ratio (DPR)

Mobile devices typically feature high-density displays (such as Retina screens) with Device Pixel Ratios of 2x, 3x, or higher. A mobile screen might measure 390 CSS pixels wide, but it actually requires a physical image width of 780 pixels (for a 2x screen) or 1,170 pixels (for a 3x screen) to display crisply.

The mobile browser performs a simple equation:

Required Width = Viewport Width (or CSS Layout Width) × Device Pixel Ratio

If a user visits the site on a mobile device with a 375px wide screen and a 2x display, the required physical resolution is 750 pixels. The browser examines the srcset options (400w, 800w, 1200w), identifies that photo-400.jpg is insufficient to avoid pixelation, and selects photo-800.jpg as the closest match that maintains visual sharpness without wasting unnecessary data on the 1200w asset.

Benefits for Mobile Users

By offloading the image selection logic to the client, responsive srcset syntax ensures that: