picture elementHTMLImageElement.The picture element used for displaying an image that can come from a range of sources (see srcset attribute). Which image the user agent displays depends on the
- algoithm for deriving the source image.
The chosen image is the embedded content.
The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.
The width and height attributes represent the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. They are in everyway the same as those of an img element. The value of attributes, if specified, are valid non-negative integers.
The width and height attributes represent the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. They are in every way the same as those of an img element. The value of attributes, if specified, are valid non-negative integers.
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: as with the img element, documents must not use the picture element 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.
picture elementimg 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 browsing situation or contraint. 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 RECOMMENDED that for cases where a single image source is available, and where no responsive adaption is needed, authors use the img element.
Unlike 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 browsing situation or constraint. 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 RECOMMENDED that for cases where a single image source is available, and where no responsive adoption is needed, authors use the img element.
picture elementsrcset attribute 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 matches the valid-srcset production:
valid-srcset = [ <image-set-decl>, ]* [ <image-set-decl> | <color>] ) -<image-set-decl> = [ <image> | <string> ] <resolution>-
+
The srcset attribute of the source element is is used to refer to alternate image resource 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 matches the valid-srcset production:
valid-srcset = [ image-set-decl "," ]* [ image-set-decl ] +image-set-decl = uri resolution+
The uri component is defined in [[!CSS21]] and the resolution component is defined in the CSS Image Values and Replaced Content Module Level 4 Specification [[!CSS4-IMAGES]].
The following is an example of a valid-srcset.
large-1.jpg 1x, large-2.jpg 2x+
The algoithm for deriving the source image as follows. The result is the image source to be used by the picture element, which reflects the picture element's src IDL attribute:
The algorithm for deriving the source image as follows. The result is the image source to be used by the picture element, which reflects the picture element's src IDL attribute:
What we want to do is have the picture behave exactly the same as an img element, but with the only difference being that it is source elements is used to determine the value of the src IDL attribute (and hence what image content is displayed). How that is determined is through using the media attribute attribute of the source element.
To avoid complexity, the type attribute is all child source elements is ignored in this context.
Becomes the rough CSS equivelent of (a virtual stylesheet for the document?):
+Becomes the rough CSS equivalent of (a virtual stylesheet for the document?):
-//assume #pictureElement is magically scoped to the correspoding element.
+//assume #pictureElement is magically scoped to the corresponding element.
@media all{
#pictureElement{
background-image: image-set(small-1.jpg 1x, small-2.jpg 2x);
@@ -279,7 +284,7 @@ Gray Scale and High Contrast Modes
Pre-existing Polyfills
- - Scott Jehl’s Picturefill closely matches the proposed syntax, albiet using
div elements in order to be used today:
+ - Scott Jehl’s Picturefill closely matches the proposed syntax, albeit using
div elements in order to be used today: