Does the HTML picture Element Have "alt" Attribute?

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.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.