Responsible Responsive Design: SRCSet

Responsible Responsive Design: SRCSet

To begin, please download these files.

A basic strategy that evolved to deal with different screen widths is the now-classic img {max-width:100%; height: auto;} responsive image style.

However, with the advent of high-resolution screens on mobile devices (and some desktops), potential limitations of this approach become readily apparent.

This is part of the reason for the rise of icon fonts and svg graphics: the high resolution of some devices made raster interface art often look grainy.

Similarly, images in web pages originally designed for non-retina screens can also look grainy. In response to these considerations, developers started using bigger images and then scaling them down via the above CSS.

The obvious drawback, however, it that this forces regular-resolution devices to download high-resolution images. Remember: if we double the resolution, we quadruple the file size.

Some Background

To understand why that works in the first place, we must understand the difference between a device pixel and a css pixel.

To illustrate, let me tell you about my computer setup: I have a new-ish 27″ iMac with the so-called retina screen. For a second monitor, I have connected my old 27″ non-retina iMac to the new one via the DisplayPort.

Now I will go to mqtest.io on the high-resolution screen:

Higher Resolution

Then I will drag that browser window to the lower-resolution screen and reload the page:

Lower Resolution


The device-height and device-width are the same on the two devices However, the device-pixel-ratio differs. Note, also, that the resolution differs, too.

This illustrates the difference between CSS pixels and device pixels.

On the regular-resolution screen, the ratio is 1:1. On the higher resolution screen, the ratio is 2:1. Some newer phones, in fact, have a 3:1 or even 4:1 ratio.

On my higher-resolution retina screen, there are 5120 pixels on the horizontal axis. On the lower-resolution iMac, there are 2560 px.

The two screenshots show the same values for the width & height of the screen, but if you download each and then compare their sizes, you will see that the high-resolution screenshot actually has twice as many pixels horizontally and twice as many vertically.

In other words, on the retina screen, two device pixels are used for every css pixel.


To illustrate another way, if you have a retina screen iMac, open up Photoshop and make a new document that is 2560 x 1440 pixels. Then press the tab key to remove the interface elements and then press Command-1 to view the file at actual size. You will see that it takes up the entire screen.

Now compare that to the Tech Specs section of the Apple Store:

Retina Screen Tech Spec


And that’s just desktop machines. As noted above, some newer screens have 3x or 4x pixel density.

Srcset: Different Images to Different Screens

A new attribute, srcset, has been developed to help deal responsibly with screens of different sizes or pixel density. 

Using it, we can get higher-resolution devices to download higher-resolution images while not forcing less capable devices to download images that will just get scaled down anyway.


Examine the files I got you to download at the top of this page. They are the same image of a clock, but each is a different size:

File Name Width
Image01.jpg 700
Image01@2x.jpg 1400
Image01@3x.jpg 2200


The reasons for the potentially strange-looking way the files are named will become apparent shortly.

Take the image files you downloaded from the top of this page and create a new site in your editor (in Sublime or Atom, drag the img-srcset-examples folder on top of the program icon).


In a new HTML file, add the following code:

<img src="images/image01.jpg">  

<figcaption>Figure 1: old-style clock</figcaption>


For what we’re doing here, the figure and figcaption elements are not required, but I just felt like using it ( Figure is generally used the same way it might appear in a textbook, as an accompanying element explaining some text ).

Test the page in a browser. You will see a picture of an alarm clock with the text 700px in the top right.

Add some CSS. Set the figure to max-width: 700px; margin: 100px auto.  Add the usual responsive images code: img {max-width: 100%; height: auto}.

Now modify your code by adding the SRCSET attribute. It allows us to specify multiple files with corresponding pixel densities:

<img src="images/image01.jpg" srcset="images/image01@2x.jpg 2x, images/image01@3x.jpg 3x" alt="Old Style Clock">

<figcaption>Figure 1: old-style clock</figcaption>



Now test your page again. Depending on what device you are viewing the page on, you will likely see a different image: one corresponding to your device’s pixel density. As noted, the number of pixels in the image are listed in the top right.

A nice thing about this addition of the srcset attribute is that if the browser does not understand it, it will use the image specified in the image tag’s traditional src attribute. If we go to caniuse.com, we see that there is widespread support now, but that IE11 doesn’t support it. No matter: IE11 gets a fallback from the SRC attribute.

About the way the files are named: a lot of people add the @ + number to the filename as a way of distinguishing the different pixel-densities targeted.

Additional Tasks

So how do we know what pixel densities to target? As with anything web-design-related, there’s a ton of information out there.

One place you can get some information is similar to mqtest.io: a website called mydevice.io. It, in fact, contains even more info than mqtest.io. If you go to it, it will show you some of the things your browser is capable of, and if you go to the bottom of the page, you will find a link that says “Show me other devices?”.

If you click that, you get a good sense of the range of pixel densities of current devices.

Finally, if you are in WMDD4835, you should have received an email inviting you to sign up with CrossBrowserTesting.com. This is a normally paid service that has made available to Langara some student testing accounts.

Login to crossbrowsertesting and use the mydevice.io information to figure out how to

1) select a range of devices and browsers that have different pixel densities and save them as a testing set (with a respectable range of browsers, devices, and operating systems)
2) put the site we’ve been working with online (most likely on mylinux)
3) with the URL of the site and your crossbrowsertesting test set, run screenshot tests of the page you built. You should see the three different images loaded in a range of devices.
4) from the crossbrowsertesting interface, download screenshots of the tested pages