The HTML <picture>
element itself does not have an alt
attribute. It is merely a container for images, that contains zero or more <source>
elements and one <img>
element. The <picture>
element is meant to provide a context for its contained <img>
element, allowing the user agent to choose from multiple image sources. For example:
<picture> <source srcSet="path/to/logo.avif" type="image/avif" /> <source srcSet="path/to/logo.webp" type="image/webp" /> <img src="path/to/logo.png" alt="My Logo" />` </picture>
The alt
attribute specified on the img
element is the one that's applied to whatever image is selected by the user agent (based on the <source>
elements and the <img>
element).
The <source>
elements contained inside the <picture>
element help the user agent select the image source that best matches the capabilities of the display device. It does so by examining the <source>
element's srcset
, media
, and type
attributes. If no match is found, then the <img>
element is used as a fallback. In either case, the selected image is presented in the space occupied by the <img>
element.
In summary:
<picture>
element is only a container that provides context to define different image sources for the<img>
element;<source>
element(s) describe different image sources;<img>
element describes how the image should be displayed and which attributes of the image are used.
Hope you found this post useful. It was published . Please show your love and support by sharing this post.