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
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">
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
srcset stack up against other HTML5 proposals, such as the
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
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.
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.