This specification provides developers with a means to declare multiple versions of an image at different resolutions, and, through [MEDIAQ] (CSS Media Queries), a means to create specialized presentations of an image and control when they are presented to a user. This is achieved by introducing the picture element to HTML, and by enhancing the source element to support specifying multiple source urls.
By relying on [MEDIAQ], 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 responsive web design directly in the HTML markup. Media features 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.
The picture element remains backwards compatible with legacy user agents (they will use the child img element) while offering the same accessibility options as the existing img element.