Responsive Images

Published on 27 Oct 2014 at 7:28 pm.
Filed under Google,Mobile,Web Design.

After years of debate Responsive Images are here. That means your site can look better and load faster.

Now that the specification for Responsive Images has settled down browsers are working hard to add support. Most browser vendors are doing this in stages.

1. Support for better quality images.
2. Alternative Images for different size screens.

Responsive Images: Better Quality Images

When I am talking about better quality images I’m talking about loading images for devices with a larger pixel depth. Your typical desktop has a pixel depth of 1. This simply means that a pixel is a pixel.

Then we get to mobile devices (and those MacBook Pros with retina). In Apple-speak a “retina” device is one that has a pixel depth ratio of 2. You’ll load an image that is 10 pixels wide but only display an image that is 5 pixels wide. This makes things look much more clear.

Now don’t let that word “retina” confuse you. That is just a marketing thing by Apple. This calculation is an industry standard which you can easily calculate as we’ve covered before.

You will find devices like the Kindle Fire HD with a ratio of 1.5 and devices like the Samsung Galaxy S5 and the iPhone 6 Plus with a value of 3 — though the iPhone is rounding up with this. Nothing currently on the market exceeds this value.

Thumbnail image zoomed in on the Samsung Galaxy S5 in the Puffin 4 (left) and the Chrome 37 (right) web browsers. Puffin 4 does not support responsive images while Chrome 37 does.

Support for responsive images in this method is pretty straight forward. Look at the following code to display an image:

<img src="thumbnail.jpg" width="300" height="300" alt="Thumbnail of a floor" srcset="thumbnail-450jpg 1.5x, thumbnail-600.jpg 2x, thumbnail-900.jpg 3x" />

For those familiar with HTML they will know that most of that code has been around for decades. For those unfamiliar with HTML we are displaying an image with the file name “thumbnail.jpg”. We are telling the browser that it should only display the image in a 300×300 space. We are telling search engines and blind users that the phrase “Thumbnail of a floor” represents this image.

The srcset attribute is the new HTML5 attribute that powers responsive images. It can take a complex set of values separated by a comma. Between each comma are two values — the path to the file name, and the device pixel ratio followed by the letter ‘x’. Using the example above an iPhone user would download the thumbnail-600.jpg file, while my Galaxy S5 would download the thumbnail-900.jpg file. A browser that does not support srcset will simply download the original file.

Support for the srcset attribute landed in Chrome 34, Opera 21, and Safari 8. Firefox 32 can support this attribute but disabled it by default as they are working on some edge case scenarios. Internet Explorer is considering support for its next version.

Responsive Images: Reduce Image Size

Downloading a 1200 pixel image and making the browser shrink it down to display in a 300 pixel window wastes a lot of bandwidth. It’d be a lot better if the browser could just download a 300 pixel image instead. That’s where the next stage of responsive images comes into play. Here you set a width based on media queries and then use that width and the device pixel ratio to decide which image to download. Consider this new code:

<img src="splash.jpg" sizes="(max-width: 320px) 300px, (max-width: 640px) 600px, 1200px" srcset="splash.jpg 1200w, splash-2400.jpg 2400w, splash-900.jpg 900w, splash-600.jpg 600w, splash-300.jpg 300px" alt="A huge wave" />

Now there is a lot to digest in that block of HTML so I’ll take it one step at a time. First is the new sizes attribute. You can use that attribute instead of the width and height attributes. You can still include them to speed up rendering time for browsers that don’t support responsive images. For those that do this will override those values.

In this example we are telling the browser that if the screen is only 320 pixels wide then the width for the image is 300 pixels wide. If the screen is 640 pixels then image is 600 pixels wide. If it’s wider then that then the width is 1200 pixels.

Now comes the tricky part — downloading the right file. We are still going to use the srcset attribute like we used before, but instead of specifying the device pixel ratio followed by a ‘x’ we are specifying the image width with a ‘w’. The browser then uses this information along with the device pixel ratio to calculate the right image to download. Browsers may also take a person’s internet connection speed or a browser configuration option into account as well when making that calculation but so far they do not as far as I am aware. That would just mean that they would ignore a device pixel ratio value in the calculation on slow connections.

In this example a person with an older smart phone with a width of 320 with a device pixel ratio of 1 would do download the splash-300.jpg file. If they had a smartphone that had a ratio of 2 or if screen width was between 320 and 640 they would download the splash-600.jpg. If they had a smartphone with a width of 320 and a ratio of 3 they would download the splash-900.jpg file. If the screen sizes exceeds 640 and the ratio is 1 then they would download the original image since I used the same file name as set in the src attribute. Finally if the screen size exceeds 640 and the ratio is 2 (or more) then they download the splash-2400.jpg file.

IMPORTANT NOTE: In this example I specifically specified the original image in the srcset attribute. I did so because Chrome versions that support the first stage of responsive images but do not support the second stage do not understand the ‘w’ modifier. Since they do not understand any of the rules they instead download the very first image — they do not ignore it entirely and fall back to the src attribute. If you listed them from smallest to largest (or vice versa) you would get the wrong image.

Support for the second stage of responsive images came in yesterday’s release of Chrome 38. It is coming in the next version of Opera (24). It is not supported anywhere else at this time. We know it will come to Safari in the future, but it did not make it into iOS 8.

Responsive images are a great way to support your growing mobile clients. They let you offer a better user experience and potentially save on bandwidth. Saving on bandwidth will make your site load faster and potentially save you money.

Thank you and keep building your brand.

This post was originally published as Responsive Images for Brand Builder Websites.