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
- Preserves separation of content markup and styling
- 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.
<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">
New elements and attributes you’ll notice in the example code include the
source element and its
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
Suggestions for how
alt text should be handled have not changed and would apply to
picture as they currently apply to
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.