The picture element

Abstract

The picture element is an image whose source content is determined by one or more CSS media queries.

Hi! If you find any bugs, typos, or issues please or !

Status of This Document

This specification was published by the . It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the there is a limited opt-out and other conditions apply. Learn more about .

This document was proposed by the as a solution to .

Table of Contents

1. 1 Introduction
   1. 1.1 Example of usage
   2. 1.2 Differences from img element
2. 2 Conformance
3. 3 Definitions
4. 4 The picture element
5. 5 Algorithm for deriving the source image
6. Open Issues
7. Acknowledgements
8. Normative references

1 Introduction

This section is non-normative.

This specification provides developers with a means to declare multiple sources for an image, and, through CSS Media Queries ([CSS3-MEDIAQUERIES]), it gives developers control as to when those images are to be presented to a user. This is achieved by introducing a new picture element to [HTML] that makes use of the source element. The picture element remains backwards compatible with legacy user agents by degrading gracefully through fallback content (i.e., through the img element) while also potentially providing better accessibility than the existing img element.

By relying on [CSS3-MEDIAQUERIES], a user agent can respond to changes in the browsing environment by selecting the image source that most closely matches the browsing environment - thus embodying a technique known as directly in the HTML markup. that a user agent can potentially respond to include, but are not limited to, pixel widths and heights, and pixel densities, as well as environmental lighting conditions, changes in orientation, and changes in media type such as going from screen to print.

This specification also defines the HTMLPictureElement programming interface, which affords developers a set of attributes and methods for interacting with picture elements through ECMAScript.

1.1 Example of usage

This section is non-normative.

This first sample shows how to combine the picture element with the source element, while also providing fallback content for legacy user agents through the img element.

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
 	<source media="(min-width: 18em)" src="med.jpg">
 	<source src="small.jpg">
  	<img src="small.jpg" alt="">
   <p>Accessible text</p>
</picture>

This second example shows how the picture element can be used with to provide a range of sources suitable for a given media query:

<picture width="500" height="500">
   <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" alt="">
   <p>Accessible text</p>
</picture>

1.2 Differences from img element

Unlike the img element and its current , the picture element is intended to allow an author to reference many different image sources and associate those image sources with a CSS media query [CSS3-MEDIAQUERIES]. The srcset attribute of the img element only allows matching on display dimensions and pixel densities, and the user agent is not required to respect the author's declared desires.

The browser dynamically updates the displayed image based on the browsing environment. This means that the developer determines the most suitable image for the browsing environment. Or the most suitable image source may be a different version of an image that has been modified by the author to be suitable for a particular use.

2 Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

The key words must, must not, required, should, should not, recommended, may, and optional in this specification are to be interpreted as described in [RFC2119].

This specification has the same and applies to the same as [HTML].

Implementations that use ECMAScript to expose the APIs defined in this specification must implement them in a manner consistent with the ECMAScript Bindings defined in the [WEBIDL] specification.

3 Definitions

The following terms are used throughout this specification so they are gathered here for the readers convenience. The following list of terms is not exhaustive; other terms are defined throughout this specification.

The follow terms are defined by the [HTML] specification: , , , and .

4 The picture element

:

.

.

.

.

:

Where  is expected.

:

If zero descendents, then .

One or more source elements.

Zero or one img element, serving as fallback content.

:

width

height

:

[NamedConstructor=Picture,
 NamedConstructor=Picture(unsigned long width),
 NamedConstructor=Picture(unsigned long width, unsigned long height)]
HTMLPictureElement : HTMLImageElement{
   readonly attribute DOMString media; 
}

The picture element used for displaying an image that can come from a range of sources (see srcset attribute). Which image the user agent displays depends on the algorithm for deriving the source image.

On getting the media IDL attribute, the user agent must return the media query that matches the current environment.

It is recommended that for cases where a single image source is available, and where no responsive adoption is needed, authors use the img element.

The chosen image is the embedded content.

For user agents that don't support the picture element, an author can provide an img element as fallback content. User agents should not show this content to the user: it is intended for legacy user agents that do not support picture, so that a legacy img element can be shown instead.

Authoring requirement: as with the img element, documents must not use the picture element as a layout tool. In particular, picture elements should not be used to display transparent images, as they rarely convey meaning and rarely add anything useful to the document.

When used with the picture element, a document should only contain source elements need to represent the same subject matter, but cropping and zooming can differ.

5 Algorithm for deriving the source image

The algorithm for deriving the source image as follows. The result is the image source to be used by the picture element, which reflects the picture element's src IDL attribute:

<picture id="pictureElement">
   <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">
   
   <!-- assume media all --> 
 	<source srcset="small-1.jpg 1x, small-2.jpg 2x">
   
   <!-- the following are ignored -->
   <source media=" is the message " srcset="">
      
</picture>

//assume #pictureElement is magically scoped to the corresponding element. 
@media all{
   #pictureElement{
      background-image: image-set(small-1.jpg 1x, small-2.jpg 2x);
   }
}

@media all and (min-width: 45em){
   #pictureElement{      
      background-image: image-set(large-1.jpg 1x, large-2.jpg 2x);
   }
}

@media all and (min-width: 18em){
   #pictureElement{      
      background-image: image-set(med-1.jpg 1x, med-2.jpg 2x);
   }
}

A user agent may override requests for higher-resolution images based on user preferences. For example: “always request high-resolution images,” “always request low-resolution images,” and “request high-resolution images as bandwidth permits” based on the bandwidth information available to the browser.

Open Issues

We are tracking open issues on Github. !

Reference implementations

We have a list of on Github.

Acknowledgements

A list of is avialble at the W3C Community Group Website.

Normative references

[CSS3-MEDIAQUERIES]

. ()

[HTML]

()

[RFC2119]

[WEBIDL]

()