HTML <picture> Tag
The HTML <picture> element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.
The <picture> element itself does not display anything. Rather, it simply provides a context for its contained img element that enables it to choose from multiple URLs.
Syntax
The <picture> element is written as picture/picture, with zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements (e.g. script and/or template elements).
Like this:
The way it works is, the img element provides the fallback image source (via its src attribute). The source element allows you to specify multiple alternative source sets for img element, based on the screen pixel density, viewport size, image format, and other factors. If none of those suit the situation, then the fallback image (supplied by the img tag) is displayed.
Example
Here's an example to demonstrate.
Click the two orientation buttons at the top right of the editor to toggle the two images. Those two buttons change the orientation of the editor/preview pane, and therefore the width of the viewport. This in turn, causes the image from the source element to be loaded instead of the one from the img element.
You may need to resize your screen to see the effect. Alternatively you can adjust the code to use a more suitable width for your device (i.e. change 600px to a different value).
If the image changes between two different photos when you toggle the buttons, then you're seeing the intended effect.
Here's another example that illustrates a more realistic use case:
In this case, all image sources are based on the same photo. They just use different sizes and croppings.
Syling the Image
When applying styles to the image using CSS, you need to apply them to the img element (or to its class or ID) — not to the <picture> element.
Example:
In this example, I used CSS to add a border to the img element.
If you toggle the two images, you'll see that they both have the same black border as applied to the img.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
The <picture> element accepts the following attributes.
| Attribute | Description |
|---|---|
| None. |
Global Attributes
The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <picture> tag , as well as with all other HTML tags.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
For more detail, see HTML event handler content attributes.