Responsive Images For Retina: Using HTML5’s srcset

This past Thursday saw the release of Apple’s new “Retina”-screen iMac, making it official: we are now in the world of desktop high-DPI screens. This makes the job of designers and developers doubly difficult, expanding an image quality problem that was previously confined to mobile devices and high-end laptops to one that will soon reach computers everywhere.

Thankfully, HTML5 now has a solution. But before looking at that, we should have a better understanding of the Retina problem.

srcset

The ideal solution would be to send high-resolution versions of images to devices that can use them, while maintaining a standard resolution for others. The srcset attribute does just that:

<img src="kirkjufell.jpg" srcset="kirkjufell.jpg 1x, kirkjufell@2x.jpg 2x" alt="Photograph of a blurred waterfall in Iceland with a conical mountain behind it">

This delivers the kirkjufell.jpg image to standard screens, and kirkjufell@2x.jpg to those that are 196DPI or higher. Browsers that don’t support srcset will fall back to the file specified in src, absent a polyfill. It’s also possible for the browser to make decisions on which image version to use based on zoom level or even network conditions. As with <picture>, alt contains the alternative text of all the collective images in the element.

Note that the @2x appended to the filename is not required: it’s just a suggested naming convention for high-DPI images. I’ve embedded 1x and 2x in the example so you can see which version is picked up on different devices.

Browser Support

Browser support for srcset is quite good at the time of writing: Chrome 34+, Safari 7+, Opera 21+ and iOS8 all support the basic syntax, together with the latest versions of Chrome for Android and Opera Mobile. To gain support in all other browsers use picturefill, discussed extensively in the previous article.

Detecting Screen Sizes

Alternatively, we evaluate when to use each image by using the w descriptor in srcset:

<img src="skogafoss.jpg" srcset="skogafoss.jpg 1000w, skogafoss@2x.jpg 2000w" alt="Photograph of a tiny human figure in a red rainjacket drawfed by the scale of the Skógafoss waterfall in Iceland">

Which produces:

The syntax translates to:

“If the viewport width (i.e. the browser window) is 1000 device pixels wide or less, use the standard resolution image; if wider than 1000 pixels, use the 2x version.”

This option starts to blur slightly with the features of the <picture> element. The easiest way to distinguish between the three is:

• deploying the Nx syntax in srcset will use the image that most closely matches the pixel density of the screen, no matter how big or small the browser window is.

• Using the w syntax will switch the image at appropriate device pixel breakpoints in the browser (which are not necessarily the same as @media breakpoints).
• <picture> should still be used for art direction where appropriate.

The w syntax provides a nice opportunity for designers and developers to make judgement calls: “this @2x image is 150k in file size, so I don’t want it downloading on mobile phones. If I set the w value high enough, the @2x version will be used on desktop and laptop screens, and maybe large tablets, but not smaller. I’ll make the element fluid, so that mobile phones can use all the pixels of the standard resolution image”.

Alternatively, w could be used as a simplified alternative to <picture>: “when the viewport is at least xwide.jpg version of the image”. Of course, if you use this technique, you miss out on being able to switch between @1x and @2x versions: the w and Nx syntaxes can’t readily be used together.

Designer/developers who desire a balance between these competing requirements will be interested in the srcset attribute, which I will discuss in depth in the next article.

Do You Need @2x Images?

All of this is wonderful, but rather begs the question: do you actually need to have @2x and @3x images on your site? Does the extra work actually make a significant visual difference?

While the answer is ultimately subjective, experimentation has led me to two conclusions:

• @2x makes a difference if you are compressing bitmapped images as you should be. A 40% “quality” JPEG will, in many cases, scale up well on a Retina display, at the cost of a significant file size. A 15% JPEG will load much faster and look fine on a standard display, but have visible artifacts on a high-DPI screen. srcset bridges these problems with one elegant solution.
• Fine details matter. Bitmap UI elements often suffer on Retina screens. In most cases, you should consider using SVG for icons, rather than srcset.
• A red square is a red square: it’s not going to be improved for Retina by having 4× its original pixels added to it: not every image will benefit from having a doubled (or tripled) clone.

Application Support

Due to the fact that it’s been supported in browsers for longer than <picture>, applications like Sketch and Adobe PhotoShop have some awareness of srcset. However, most workflows suggest enlarging a bitmap before saving it in @2x format, which simply transfers the scaling problem from the browser to the bitmap editor. In my opinion it’s better to start with the largest version in the editor, saving it at an appropriate size as the @2x version, then reducing it to produce the 1x version. Of course, there are also server-side and CMS tools to do the same automatically: I’ll have much more information about those approaches in future articles.

Where Should srcset Be Used?

Given its strong support across multiple browsers, combined with the fact that the polyfill is robust and fallback so graceful, I see little reason not to use srcset in modern web development. Of course, doing so potentially comes at the cost of doubling (or even tripling) the number of image files in a site, so the transition will require close attention to tooling, workflow, role responsibilities and CMS support: I’d suggest starting with banner and hero images, given that these are usually the largest and most visually impressive features on a site, and would likely benefit most from the attention. This could also be combined with art direction via <picture>. I’ll discuss that possibility in the next article, together with a look at the third component of the modern responsive image specification, sizes.

Photographs by Stian Klo, licensed under Creative Commons. Explore these examples further on CodePen