Summary

Provide optimized images for different devices using the image selection features of the picture and img elements.

Techniques

Examples

Example 1 — Adding a fallback image
<picture>
   <source
        srcset="covers/9781449328030.avif"
        type="image/avif"/>
   <img
        src="covers/9781449328030.jpg"
        alt="Accessible EPUB 3 - First Edition"/> 
</picture>
Example 2 — Adding an image optimized for black and white displays
<picture>
   <source
        srcset="covers/9781449328030_bw.jpg"
        media="(monochrome)"/>
   <img
        src="covers/9781449328030_color.jpg"
        alt="Accessible EPUB 3 - First Edition"/>
</picture>
Example 3 — Providing images for different display resolutions
<img
     srcset="covers/9781449328030_small.jpg 1x,
             covers/9781449328030_large.jpg 2x"
     src="covers/9781449328030_small.jpg"
     alt="Accessible EPUB 3 - First Edition"/>

Frequently Asked Questions

Does it matter which element you use?

No. The picture element is not a display element. All it does is provide the ability to associate other images with its child img tag. The actual rendering of the selected image is done via the img element so the tag you use makes no difference to the rendering.

The one advantage of the picture element is that it allows publishers to define more complex selection criteria. The picture element is often used because its multiple child source elements can make reading the selection criteria easier.

Explanation

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 picture and img elements. For more detailed information about these elements, refer to the resources in the Related Links section.

The picture element

The picture element is a wrapper for an img element that allows additional images to be associated with that tag. Consequently, a picture element must always have a child img element.

The child img element ensures that an image is available for display even if the newer 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 2.)

The characteristics of the image(s) specified in each source element are defined using the following attributes:

srcset

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 sizes attribute 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 src attribute is not valid on a picture element's source children. Even if there is only a single image option, it must be specified in srcset. When multiple images are specified, the sizes attribute must be set.

type

The media type of the image.

type="image/jpeg"

If the source element refers to multiple images of different media types, the attribute should not be set.

media

A media query specifying the conditions in which to use the image.

media="(monochrome)"
sizes

The sizes attribute 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 srcset attribute.

The img element

The img element provides a similar, but more basic, set of options compared to the picture element: it only allows the srcset and sizes attributes. As these attributes work in exactly the same way, please refer to their definitions in the picture element section for more information.

The 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.

Related Links