How to use HTML5’s responsive element

Creating adaptive images for the web is frequently a source of frustration and compromise. Web designers often struggle with the choice of using large, high-resolution images scaled down for small devices, or compromising on quality by using lower-resolution images, which look terrible when scaled up for larger monitors.

To solve this problem, the W3C has been exploring the HTML Responsive Images Extension, which makes use of a new element.

Their proposal states:

“The picture element represents a list source of image data and associated attribute that define when an image should be used. Image data sources may be explicitly declared based on media queries or can be suggested to the browser via the srcset attribute on the picture element.”

Basically, the new HTML5 element groups multiple versions of an image, based on certain characteristics, such as their resolution and format. This means that the optimum image can be selected, based upon the user’s device and requirements.

Aims of the element

Amongst other things, the new element aims to:

• Be responsive to screen resolution, pixel density and width/height
• Have the ability to be polyfilled
• Have the ability to fall back on older user agents
• Be responsive to user zoom
• Retain the same level of accessibility as the img element
• Preserve separation of content markup and styling
• Support cases where web designers need to define entirely different images, rather than just different resolutions of the same image

What’s the srcset element?

The srcset attribute is a comma-separated list of URLs for alternate resources of a single image at different resolutions. This has the advantage of only one image being downloaded, according to the user’s specific set-up. Here’s an example of how it works with the element:

The above example specifies that users with support and a viewport at least 45 ems wide should get the ‘big’ image, whilst users with support and a viewport between 18 and 45 ems should get the ‘med’ image. Anyone without support should get the fallback image, although this could equally be a text option, improving accessibility. If the browser chooses to display the big or medium source, it can choose an image at an appropriate resolution (1x or 2x) based on the srcset attribute.

There are also potential solutions being explored for zooming and for vertical/horizontal orientation issues.

Two disadvantages

The main disadvantage at the moment is that the element is not currently supported in any shipped browsers, although there is some support in Yoav Weiss’s Chromium build and Scott Jehl’s Picturefill. If the proposal makes it through the rigorous WC3 process, this will no doubt change.

Another significant negative is that currently, even though one of the first two images is being loaded, the fallback is simultaneously loaded, even though it is not required or used. This is because browsers look ahead and start to download images immediately, including the fallback image. Whilst this might not seem much of a problem, it does mean that users are using – and maybe paying for – unnecessary bandwidth. There are some workaround solutions to this problem, but these require extensive coding, which seems like a lot of effort to go to just to display an image.

So it seems that whilst there are definite advantages to the element proposal, there is also some way to go in order to make it function in the most efficient manner and create a more elegant solution.

Watch this space for further updates!