picture element

Description

The picture element has been designed to provide native support for responsive images in HTML5. When used together with source and img it acts as an image that will be loaded differently depending on the properties of the device it's displayed on. In other words, supporting browsers will load a different image (provided by the source elements) for each specified type of device.

A picture element can contain any number of source elements followed by an img element. Each source will provide a different image for a different device type (pixel density, viewport size, image format, etc), while the img element will represent the image itself and constitute a default fallback for the cases where no source apply and/or support for picture is absent.

The presence of the img element within a picture is required. If it's absent, no image will be displayed whatsoever.

As of 15/04/13, support for the picture element is very low. Authors may have to rely on scripts to replace its functionality cross-browser.

Examples

In our first example, we'll display a picture with three different sources (source), that are to be displayed as convenient in different screen widths. To achieve this, we'll use the media and srcset attributes of the source element. The default resource, provided by the img element will be displayed when no media criteria is met and when support for picture is absent.

<picture>
  <source media="(min-width: 1280px)" srcset="/assets/images/isaac-newton-l.jpg">
  <source media="(max-width: 520px)" srcset="/assets/images/isaac-newton-s.jpg">
  <img class="float-right" src="/assets/images/isaac-newton.jpg" alt="Sir Isaac Newton">
</picture>
<p>Sir Isaac Newton was an English physicist and mathematician (described in his own day as a natural philosopher) who is widely recognised as one of the most influential scientists of all time and as a key figure in the scientific revolution. His book Philosophia Naturalis Principia Mathematica (Mathematical Principles of Natural Philosophy), first published in 1687, laid the foundations for classical mechanics. Newton made seminal contributions to optics, and he shares credit with Gottfried Leibniz for the development of calculus.</p>

Sir Isaac Newton was an English physicist and mathematician (described in his own day as a natural philosopher) who is widely recognised as one of the most influential scientists of all time and as a key figure in the scientific revolution. His book Philosophia Naturalis Principia Mathematica (Mathematical Principles of Natural Philosophy), first published in 1687, laid the foundations for classical mechanics. Newton made seminal contributions to optics, and he shares credit with Gottfried Leibniz for the development of calculus.

Now we'll provide again different sources, but this time using the new combination of srcset and sizes in the img element only (although it could be used with picture and source too). The idea in this method is to make available different versions of an image in the srcset attribute, each paired with a descriptor indicating its width. This is a very simple task and consists only of providing the image you've previously prepared, followed by a space, its width and the lower-case letter W (for example, "selfie.jpg 640w").

Additionally, the sizes attribute is used to conform a list with the widths the image should have in every screen size (for example, "(min-width: 30em) 40vw", which says that the image should have a width equal to 40% of the viewport width (vw) when the total width of the viewport is greater than 30em). With all this information, it's up to the browser the choosing of the correct image for any particular scenario, saving authors a great deal of time and effort (in contrast to media queries).

This method is ultra flexible and has been designed to replace media queries in responsive layouts that change their shape based on device properties.

<img class="float-right" src="/assets/images/isaac-newton.jpg" alt="Sir Isaac Newton" srcset="/assets/images/isaac-newton-l.jpg 280w, /assets/images/isaac-newton.jpg 180w, /assets/images/isaac-newton-s.jpg 80w" sizes="(min-width: 60em) 30vw, (max-width: 20em) 80vw, 50vw">
<p>Sir Isaac Newton was an English physicist and mathematician (described in his own day as a natural philosopher) who is widely recognised as one of the most influential scientists of all time and as a key figure in the scientific revolution. His book Philosophia Naturalis Principia Mathematica (Mathematical Principles of Natural Philosophy), first published in 1687, laid the foundations for classical mechanics. Newton made seminal contributions to optics, and he shares credit with Gottfried Leibniz for the development of calculus.</p>

Note: this example emulates a picture in a website that's been designed to be viewed in different devices. Showing the live example here would be inconsistent with the page layout as the units are expressed in vw (percentage of the viewport width).

Lastly we'll provide different sources based on another property. This time, the type attribute of the source element will be crucial, as we'll use it to provide the same image in two formats: the new WebP in the source element (not widely supported) and the traditional JPEG in the img element (as a fallback). In this example, browsers supporting the WebP format will display the image provided in the source element, while the rest will use the image provided in the img element.

<picture>
  <source type="image/webp" srcset="/assets/images/victor-hugo.webp">
  <img class="float-right" src="/assets/images/victor-hugo.jpg" alt="Victor Hugo">
</picture>
<p>Victor Marie Hugo was a French poet, novelist, and dramatist of the Romantic movement. He is considered one of the greatest and best known French writers. In France, his literary fame comes first from his poetry but also rests upon his novels and his dramatic achievements. Outside France, his best-known works are the acclaimed novels Les Misérables, 1862, and Notre-Dame de Paris, 1831 (known in English as The Hunchback of Notre-Dame). He also produced more than 4,000 drawings, which have since been admired for their beauty, and earned widespread respect as a campaigner for social causes such as the abolition of the death penalty.</p>

Victor Marie Hugo was a French poet, novelist, and dramatist of the Romantic movement. He is considered one of the greatest and best known French writers. In France, his literary fame comes first from his poetry but also rests upon his novels and his dramatic achievements. Outside France, his best-known works are the acclaimed novels Les Misérables, 1862, and Notre-Dame de Paris, 1831 (known in English as The Hunchback of Notre-Dame). He also produced more than 4,000 drawings, which have since been admired for their beauty, and earned widespread respect as a campaigner for social causes such as the abolition of the death penalty.

Attributes

Events