picture elementsource elements.picture elementThe picture element used for displaying an image that can come from a range of sources. Which image the user agent displays depends on [forthcoming algorithm].
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: The picture element must not be used 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.
+Authoring requirement: as with the img element, the picture element must not be used 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.
Sample picture element markup:
<picture> - <source> + <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=""> </picture>
img elementUnlike the picture element, the img element is limited to a single image resoure, but cases where an author need to define different image sources depending on the factors such as the design, size resolution, and display density. The most suitable image source may be an image sized appropriately for the display size or pixel density. 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 (see: art direction use case).
It is also not possible to assign a source directly to a picture element. For that case, use an img element.
img elementUnlike the img element, which is limited to pointing to a single image resource, the picture element is intended to allow an author to reference many different image sources that the browser can then choose based on a media query or some other relevant condition. This means that a user agent can best select an image source that is most suitable for available display size, pixel density, or possibly even network bandwidth. 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 (see: art direction use case).
It is also not possible to assign a source directly to a picture element. For that case, an author needs to use an img element instead.
When used with the picture element, a document SHOULD only contain source elements need to represent the same subject matter, while cropping and zooming can differ.
srcset attribute The srcset attribute of the source element is a comma-separated list of valid non-empty URL potentially surrounded by spaces referring to alternate media resources for a single image at different resolutions.
The value of the srcset attribute use the image-set notation micosyntax.
-The srcset attribute of the source element is is used to refer to alternate media resources for a single image at different resolutions. The expected value of the attribute is a comma-separated list of valid non-empty URL potentially surrounded by spaces that makes use of the image-set notation micosyntax.