Home > Abakada: Back to Basics > Language References > HTML Elements > PICTURE Element

---

Represents a container for multiple image sources.

HTML 2, 3.2, 4, 4.01, 5

HTML Syntax

<picture
   class = classname
   id = value
   style = css_style_rules
   title = text
>
   <source ... />
   <img ... />
</picture>

NOTE: Both start and end tags are required.

The <picture> element allows web developers to provide multiple image options for different screen sizes, device pixel densities, or image formats.

This enables browsers to choose the most appropriate image for the user’s viewing conditions, improving website performance and user experience.

The <picture> element is specified with zero or more <source> elements, followed by one <img> element.

<picture>
   <source srcset="photo.avif" type="image/avif" >
   <source srcset="photo.webp" type="image/webp" >
   <img src="photo.jpg" alt="photo" >
</picture>

Each <source> element can specify different image formats, sizes, or media queries. The browser evaluates these elements based on factors like screen size, pixel density, and available image formats.

The <img> element within the <picture> element serves as a fallback. If no <source> elements match the current display conditions, or if the browser does not support the <picture> element, the image specified in the src attribute of the <img> element will be used.

The picture element itself does not display anything; it merely provides a container for its img element that enables it to choose from multiple URLs.

The <picture> element has no attribute of its own, but supports global attributes common to all HTML elements.

The following example shows how the <picture> element may be used.

• 4.8.1 The picture element

IMG   SOURCE