Introduction

Supporting retina devices means making sure we are serving 2x images to screens with double the pixel density. In the past, this has proven to be a pain point for developers, who have either chosen to needlessly serve high resolution images to non-retina devices (bad for performance), or used background images and media queries to swap images (bad for accessibility).

The Solution

Enter the <picture> element. At its most basic, it looks like this:

<picture>
 <img src="circle.png" alt="a round white circle">
</picture>

It starts with just a wrapper around our image that, on it's own, doesn't do anything.

<picture>
 <source srcset="circle-2x.png" media="(min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
 <img src="circle.png" alt="a round white circle">
</picture>

The <source> element allows us to swap in an alternative image source to use when a certain condition in the "media" attribute is met. In this case, we're targeting devices that have a pixel ratio of 2, and a minimum resolution of 192dpi - two conditions that tip off the browser that the user is on a retina device. If these two conditions are met, 'circle.png' will be swapped out with circle-2x.png and the user will see the retina image instead!

What's really awesome about this is that the retina image will ONLY load if the picture element detects the user is on a retina device. This means faster loading times for non retina devices.

Current Browser Support

<picture> and <srcset> are supported in the latest versions of all modern browsers.

There is no support for IE 11 and below, however there is a great polyfill available called Picturefill.