Provide optimized images for different devices using the image selection features of the
sourceelement children of the
pictureelement to provide alternative images.
srcsetattribute of the
imgelement to provide alternative images.
Frequently Asked Questions
- Does it matter which element you use?
pictureelement is not a display element. All it does is provide the ability to associate other images with its child
imgtag. The actual rendering of the selected image is done via the
imgelement so the tag you use makes no difference to the rendering.
The one advantage of the
pictureelement is that it allows publishers to define more complex selection criteria. The
pictureelement is often used because its multiple child
sourceelements can make reading the selection criteria easier.
Although providing alternative images is more of a general usability issue, there are many good side benefits for accessibility in providing images optimized to users' displays.
A cover image, for example, optimized for color displays may not be as legible when rendered on devices with monochrome displays. Similarly, providing images correctly sized and optimized for screen resolutions can aid users with low vision. Optimized images can help avoid pixelation problems of a single image forced to fit the display capabilities of all devices.
The following sections provide brief introductions to the key capabilities of the
img elements. For more detailed information about these
elements, refer to the resources in the Related Links section.
picture element is a wrapper for an
img element that allows
additional images to be associated with that tag. Consequently, a
must always have a child
img element ensures that an image is available for display even if
picture element is not recognized. The
img element is
also where the alternative text and, when necessary, extended description are provided.
The same alternative text and description are used regardless of the image displayed, so the images in the set must only vary in their display characteristics (i.e., the information in the images must not differ).
The alternative images available for user agents to display are specified in child
source elements (refer to examples 1 and
The characteristics of the image(s) specified in each
source element are
defined using the following attributes:
This attribute specifies a list of one or more URLs to the image(s) to use.
Each image URL may also be followed by either a width descriptor:
srcset="covers/small.jpg 480w, covers/large.jpg 960w"
or a pixel density declaration:
srcset="covers/low_res.jpg 1x, covers/hi_res.jpg 2x"
The width descriptors tell the user agent how wide the image is so it can determine whether it will optimally fit the viewport. When width descriptors are specified, the
sizesattribute also has to be set.
Pixel density refers to the display resolution. Standard resolution screens are 1x, retina displays are 2x (double the pixel density), and newer screen resolutions have even reached 3x and 4x resolutions.
Note that the
srcattribute is not valid on a
sourcechildren. Even if there is only a single image option, it must be specified in
srcset. When multiple images are specified, the
sizesattribute must be set.
The media type of the image.
sourceelement refers to multiple images of different media types, the attribute should not be set.
A media query specifying the conditions in which to use the image.
sizesattribute specifies the display width(s) for the image. Each width, excluding the last, may include a media query that specifies the conditions to use the image in. The last size specified is the default if none of the other conditions apply.
For example, in the following declaration, if the maximum screen width is 480px, the image will occupy the entire screen width. If it is larger, the image only occupies half the screen width.
sizes="(max-device-width: 480px) 100vw, 50vw"
The user agent determines which width applies to the device and then uses that information to calculate the most appropriate image to use from the
img element provides a similar, but more basic, set of options compared
picture element: it only allows the
sizes attributes. As these attributes work in exactly
the same way, please refer to their definitions in the
element section for more information.
img element must always specify a
src attribute with the default
image, regardless of whether it is used inside a
picture element or not. This
image is displayed if the user agent cannot find a better match for the device, no
other options are specified, or the user agent does not support image selection.