Guías HTML para picture

The <picture> element is a container that lets you provide multiple image sources for different viewport sizes, resolutions, or format support. It works together with zero or more <source> elements and exactly one <img> element. The browser evaluates each <source> in order, selects the best match based on its media, type, or srcset attributes, and then displays the chosen image in the space occupied by the <img> element. If no <source> matches—or if the browser doesn’t support the <picture> element at all—the <img> element’s src attribute is used as the final fallback.

The <img> element isn’t optional; it’s structurally required by the HTML specification. Without it, the <picture> element is incomplete and invalid. This matters for several reasons:

• Rendering: Browsers rely on the <img> element to actually display the image. A <picture> element with only <source> children will render nothing in most browsers.
• Accessibility: The <img> element carries the alt attribute, which provides a text alternative for screen readers and other assistive technologies. Without it, there’s no accessible description of the image.
• Fallback support: Older browsers that don’t understand <picture> or <source> will ignore those elements entirely and fall back to the <img>. Without it, those users see nothing.
• Standards compliance: The WHATWG HTML specification explicitly states that the <picture> element’s content model requires one <img> element, optionally preceded by <source> elements and inter-element whitespace.

The <img> element should always be the last child inside <picture>, placed after all <source> elements.

Examples

Invalid: <picture> without an <img> element

This markup triggers the validation error because the required <img> child is missing:

<picture>
  <source srcset="hero-large.webp" type="image/webp">
  <source srcset="hero-large.jpg" type="image/jpeg">
</picture>

Fixed: Adding the required <img> element

Add an <img> as the last child with a src pointing to the default image and a descriptive alt attribute:

<picture>
  <source srcset="hero-large.webp" type="image/webp">
  <source srcset="hero-large.jpg" type="image/jpeg">
  <img src="hero-large.jpg" alt="A panoramic view of the mountain landscape">
</picture>

Using <picture> for responsive images with media queries

When serving different image sizes based on viewport width, the <img> element provides the default (typically the smallest) image:

<picture>
  <source srcset="banner-wide.jpg" media="(min-width: 1200px)">
  <source srcset="banner-medium.jpg" media="(min-width: 600px)">
  <img src="banner-small.jpg" alt="Promotional banner for summer sale">
</picture>

The browser checks each <source> in order. If the viewport is 1200 pixels or wider, banner-wide.jpg is used. If it’s between 600 and 1199 pixels, banner-medium.jpg is used. Otherwise, the <img> element’s src value of banner-small.jpg is displayed.

Using <picture> for format selection

You can also use <picture> to offer modern image formats with a fallback for browsers that don’t support them:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Close-up of a sunflower in bloom">
</picture>

Browsers that support AVIF will use the first source, those that support WebP will use the second, and all others will fall back to the JPEG specified in the <img> element. In every case, the <img> element is what makes the <picture> element valid and functional.