Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
High resolution images are often not needed for the smaller viewports of small devices. Image size can be made responsive by using the same "container" for the image in all the viewport sizes, but changing out the image source file. There are two techniques for doing this. In both cases all images must be adequately described using the same principles for describing images.
Technique 1: The
The picture element can be used to describe image sources. The
<picture> element needs a base image using the
<img> element, which is enabled with alternative text. No matter what
<source> is used in the
<picture> is used, the same alt attribute is used.
Technique 2: The srcset Attribute
A similar approach is to use a single element, but use the srcset attribute to define image sources for different viewports. The element space is enabled with alternative text.
Figure 1: Dragon 320.jpg
Figure 2: Dragon 640.jpg
Figure 3: Dragon 1024.jpg