The picture element is a new addition to HTML5 that is well-adopted by the W3C's Responsive Images Community Group (RICG).
SEE ALSO: How to use the HTML5 download attribute
Picture Element and Fallback Content
Similar to the video and audio elements that were introduced in HTML5, the picture uses source elements to provide a set of images that the browser can choose from. The source element typically contains the attributes type and media to let the browser know the file type and the media type. Given the information in the attributes, the browser should render the first source element with a supported file type that also matches the media query.
<picture> <source src="landscape.webp" type="image/webp" media="screen and (min-width: 20em) and (orientation: landscape)" /> <source src="landscape.jpg" type="image/jpg" media="screen and (min-width: 20em) and (orientation: landscape)" /> <source src="portrait.webp" type="image/webp" media="screen and (max-width: 20em) and (orientation: portrait)" /> <source src="portrait.jpg" type="image/jpg" media="screen and (max-width: 20em) and (orientation: portrait)" /> </picture>
For situations in which a browser doesn't know how to handle picture or cannot render any of the stated source elements, you can include a fallback content. The fallback content is often either an image or descriptive text; if the fallback content is an image element, then a further fallback is provided (as you normally do) in the alt attribute. The picture element can also fallback onto non-image based content such as a description of the image.
<picture> <source type="image/webp" src="image.webp" /> <source type="image/vnd.ms-photo" src="image.jxr" /> <img src="fallback.jpg" alt="fancy pants"> </picture>
The picture element differs from video and audio because it allows you to use an additional attribute srcset on each of the source elements. This attribute allows you to specify different images based on a device's pixel density (e.g. retina display).
<picture> <source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg 3x" type="image/jpeg" media="(min-width: 40em)" /> <source srcset="med.jpg 1x, med-2x.jpg 2x, med-3x.jpg 3x" type="image/jpeg" /> <img src="fallback.jpg" alt="fancy pants" /> </picture>
Why Use the Picture Element?
The picture element was introduced so that exactly only one image should be downloaded according to the users display:
- Displays that support a viewport of 40ems wide should get a large image
- Displays that support a viewport narrower than 40ems should get the medium image
- Browsers or devices that don't support the picture element get the fallback content
If a browser chooses to display the large or medium source element, it can then choose an appropriate resolution based on those specified in the srcset attribute:
- Browsers on a low-resolution device (iMac, Widescreen PC) show the 1x image
- Browsers on a high-resolution device (iPhone with Retina display) show the 2x image
- Browsers on a next-generation device with higher resolution show the 3x image
Overall this means that only one image file is downloaded instead of several copies of the same image, regardless of feature support, viewport dimensions or screen resolution.
What's the Hold Up?
At the moment, browsers are slow to implement all the new features of the HTML5 API's. Whilst there are services available that will recreate the behaviour and provide partial support, they aren't part of the official builds and therefore only prototypes.
For the time being, I'd put this on hold until more browsers start to adopt the implementation and make it standard across all browsers.
SEE ALSO: Foundation 4 has been released (HTML5)
Have you implemented the picture element in production? Which is your favourite HTML5 addition? Get in touch with us by mentioning #ALJTMedia on Twitter, leaving a comment on our Facebook, Google+ or LinkedIn page, or writing a comment below.