News

New HTML tricks for responsive images

Get inspired by Fieldwork and add progressive HTML for serving images for all screens

step6

Fieldwork reveal their working secrets and demonstrate how to add progressive HTML for serving images for all screens

Screen shot 2015-02-16 at 09.22.06

Why responsive images?

On modern, image-rich websites such as madebyfieldwork.com it has become vital for content to consistently look good. Designers want to ensure page images render as beautifully as possible on a myriad of devices and resolutions. New HTML5 proposals add ‘art direction’ capabilities for serving optimised images based on the current viewport. Here we’ll look at provisional specifications for the srcset attribute and also the <picture> element.

Get Google Chrome support

The techniques we’re looking at here are provisional, with browser support largely confined to Google Chrome 38+ and its Blink fork of WebKit, so please ensure you follow accordingly. Other browsers can use picturefill.js (scottjehl.github.io/picturefill), a polyfill for unsupported <picture> element features, but we’ll stick with Google Chrome for previewing the native HTML and using Mobile Mode within the excellent View>Developer>Developer Tools panel.

Use image srcset attribute

The srcset attribute is new to the <img> element and essentially defines alternative image files for the normal src field. Each listed image is given a value, used to swap in higher resolution versions at higher device pixel ratios. So 2x should be read as 2 device pixels per CSS pixel. This is especially useful when targeting Retina displays with larger pixel densities:

001
002<img src=”small.jpg” srcset=”small.jpg 1x, medium.jpg 2x, large.jpg 3x” style=”width:300px; height:300px;”>
003

Test those ratios

This can be tested with the three images of doubling dimensions – so for example 300 by 300 pixels, 600 by 600 pixels and 900 by 900 pixels. As the <img> element is set to 300 by 300 pixels, the larger images will swap in to display more crisply and fit the appropriate pixel ratio. In Chrome we can simulate this in Mobile Mode by incrementing the ‘Device pixel ratio’ value to the right of the resolution dimensions in the top-left corner.

<picture> and <source>

The <picture> element is combined with the <source> element normally associated with loading video and audio. By then defining a media query with a desired minimum viewport width, you can serve an optimised image again with the srcset attribute – including a necessary <img> element fallback as default where the method is not supported:

001<picture>
002 <source media=”(min-width: 700px)”     srcset=”myImage2.jpg”> 
003 <source media=”(min-width: 500px)”     srcset=”myImage1.jpg”> 
004  
005 <img src=”myImage.jpg” alt=”fallback”> 
006
007 </picture>
008  

Test on viewport resize

Again you can test this by resizing the viewport within Chrome’s Mobile Mode or by just resizing the browser window. As you change the width value within the Screen resolution dimensions, you will see the example images switch at the stipulated media query threshold. The example page and images are provided on FileSilo for testing, however if you try it in an unsupported browser you will only observe fallbacks.

×