‘srcset’ Attribute Solving Responsive Image Dilemma

by Christopher Schmitt

Responsive design has become more complex and vital than ever.

Not only do you need to accommodate design layouts for mobile devices, but you also need to take into account high pixel density displays, like Apple’s Retina devices. These displays have a pixel density up to 326 pixels per inch compared to standard desktop monitors which are around 100 ppi.

Images that look great on standard desktops can look pixelated and fuzzy on high pixel density screens.

It would be great if a responsive image solution not only target varying screen sizes, but target high pixel density screens as well, allowing us to serve up larger images when the pixel density and screen size allowed.

Introducing srcset Attribute

The srcset attribute, which is a proposed attribute for the <img> element, allows you to specify different images for varying viewport widths and pixel densities. This allows you to load a larger image for new high resolution devices while displaying lower resolution images for everyone else.

To see this in action, let’s take a look at the syntax:

<img src="portrait-small.jpg" srcset="portrait-small.jpg 1x, portrait-large.jpg 2x">

The src attribute specifies the fallback image for browsers that don’t support the srcset attribute. Here we’ve specified a low-resolution image for the fallback. The srcset attribute includes a series of comma-separated values.

These values specify an image URL, and the conditions under which to display the image. These conditions include a pixel density, viewport width, or both.

Example of srcset

So, let’s look at the first value in our example.

We’re loading a smaller image for desktops with a standard pixel density, noted as 1x where “1x” meaning one device pixel per CSS pixel:

For high pixel density desktop displays (2x, or 2 device pixels per CSS pixel), we’re pulling a larger image:

Constrainging Images to Viewport Widths

We’re using a small, cropped image for the standard density mobile device, which include devices with a maximum viewport width of 640 pixels (640w):

<img src="portrait-small.jpg" srcset="portrait-small.jpg 1x, portrait-large.jpg 2x, portrait-cropped-sm.jpg 640w">

For high pixel density mobile devices (like new generation iPhones), we’re loading a larger cropped image. We’ve targeted those devices with 640w 2x.

<img src="portrait-small.jpg" srcset="portrait-small.jpg 1x, portrait-large.jpg 2x, portrait-cropped-sm.jpg 640w, portrait-cropped-lg.jpg 640w 2x">

Note that while the images for the high pixel density displays are larger at roughly twice as large the previous image. They still look the same size on the screen, as they fit within the same CSS measurements.

That is, if the “small” image fits into a 900 pixel-wide container on a standard display, then the “large” image also fits into that same 900 pixel-wide container on a high density display.

Since the image itself is “denser” as there are two pixels per CSS pixel instead of just one, it looks crisper and richer as well it should on these high density screens.

Comparing to Other Solutions

How does srcset stack up against other HTML5 proposals, such as the <picture> element?

It has an advantage over <picture> in that takes pixel density into consideration: the <picture> element only accounts for device width. The syntax for srcset is also much more concise, and it also benefits from being part of an already existing HTML tag: the <img> tag.

Critics of srcset complain that the syntax is more cryptic than the competing <picture> element, which could thus be more confusing to implement for coders. Indeed, getting your head around device pixels vs. CSS pixels is itself quite a challenge.

Browser Support

What about browser support? As the srcset attribute is merely a proposal for HTML5, modern browsers don’t yet support it. However, the latest nightly builds of Webkitdo support a basic version of srcset, if you want to experiment with this proposed responsive image solution now. However, the Webkit night only supports basic pixel density value detection, like 1x and 2x, and not advanced options of detecting viewport widths.

For more complete information about compiler optimizations, see our Optimization Notice.