The Proposed Picture Element in HTML

New at the W3C is a proposal to create a way to work responsive images. The proposal, called HTML Responsive Images Extension, suggests a new HTML element called <picture>. The editors of the document are Mat Marquisa member of the  Responsive Images Community Group and Adrian Bateman from Microsoft Corporation.

The document is a draft, which means many things may change before these suggestions become a recommendation at the W3C.

The reasons and goals for the proposed element are spelled out:

  • Respond to different screen pixel width/height
  • Respond to different screen pixel densities
  • Respond to user zoom on image resource.
  • Provide user agents with information they need to select the most appropriate image source given low bandwidth situations
  • Will fallback gracefully on older user agents
  • Can be polyfilled effectively
  • Retains, at a minimum, the same level of accessibility as current img element
  • Preserves separation of content markup and styling
  • Provides a purely client-side solution which can include JavaScript, but doesn’t require it
  • Supports use cases where authors need to explicitly define different image versions as opposed to simply different resolutions of the same image
  • Provides a consistent and predictable pattern for delivering alternate media sources based on client context
  • Supports succinct but understandable mark-up

A lofty list of goals, all necessary and important. Responsive design gurus have struggled for some time with how to deal with images in a responsive site. The list of goals reflects that discussion and those needs.

The proposal states, “The picture element represents a list sources of image data and associated attributes 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.”

Here’s some example code.

<picture alt="">
	<source media="(min-width: 45em)" 
 srcset="large-1.jpg 1x,large-2.jpg 2x">
	<source media="(min-width: 18em)" 
 srcset="med-1.jpg 1x,med-2.jpg 2x">
	<source srcset="small-1.jpg 1x, small-2.jpg 2x"> 
	<img src="small-1.jpg"> 
</picture>

New elements and attributes you’ll notice in the example code include the source element and its srcsetattribute. Each source defines one or more image sources and the conditions under which that source should be used. The srcset attribute is a comma separated list of URLs for alternate resources for a single image at different resolutions.

You see a 1x or 2x designation after the image name. This is a reference to resolution, with 2x being a high resolution image meant for high res (aka iOS retina displays which have made everyone’s images look like crud) devices.

Finally, the example code ends with a fallback img element for devices that don’t recognize the picture element.

Suggestions for how alt text should be handled have not changed and would apply to picture as they currently apply to img.

There is an attempt to describe cases like zooming, whether a device is displaying in horizontal or vertical orientation, and other potential snafus. You can read these in the full proposal.

4 thoughts on “The Proposed Picture Element in HTML

  1. Interesting proposals regarding images and pictures. It would be interesting to see how much support the various web browsers give to these proposals.

  2. It can be quite a daunting task to serve the right image based on screen size, bandwidth, resolution etc. But I’m sure if this proposal makes it’s way to the w3C standard, dealing with responsive images will get pretty simple and straightforward.

Leave a Reply