Picture Element (`<picture>`)

The `<picture>` element lets a browser choose among alternative image sources based on media conditions or supported image formats. It is useful for responsive images and format optimization while preserving a normal `<img>` fallback.

A `<picture>` contains one or more `<source>` elements followed by an `<img>` element. Each source can describe a candidate image using attributes such as `media`, `type`, and `srcset`.

The browser evaluates the available `<source>` candidates and selects an appropriate image. For example, `media` can provide a different crop for narrow screens, while `type` can offer a modern format such as WebP or AVIF when supported.

The `<img>` remains important because it provides the fallback and is the element that ultimately displays the selected resource. Its `alt` text also supplies the accessible text alternative for the image.

Unlike CSS background images, `<picture>` is intended for content images that belong in the document. It gives the browser information needed to choose an appropriate resource before downloading an unnecessary alternative.

Key points

• Use `<picture>` when the image resource or crop should change based on conditions such as viewport size or format support.
• Put one or more `<source>` elements inside `<picture>`, followed by an `<img>` fallback.
• Use `media` for media-condition-based selection and `type` for format-based selection.
• Keep a useful `alt` attribute on the fallback `<img>`.
• `srcset` and `sizes` on `<img>` are often sufficient when only resolution or intrinsic size needs to vary.

Interview questions

What problem does the `<picture>` element solve?

`<picture>` lets the browser choose between multiple image resources. The choices can depend on conditions such as viewport characteristics or supported image formats. This can support responsive art direction and modern image formats. An `<img>` element remains inside it as the fallback and display element.

How do `media` and `type` differ on `<source>`?

`media` describes a media condition under which a source is appropriate, such as a viewport-width condition. `type` identifies the image MIME type so the browser can avoid a format it does not support. They solve different selection problems and can be used together when appropriate.

Why is `<img>` placed inside `<picture>` instead of replacing it completely?

The `<img>` is the fallback and the element that renders the selected image. It also provides attributes such as `alt`, width, and height. If no `<source>` is selected, the browser can use the `<img>` resource. This makes the markup robust across browsers and source choices.

When should you use `<picture>` instead of just `srcset`?

Use `<img srcset>` when the same image can serve different display sizes or resolutions. Use `<picture>` when you need explicit source switching, such as a different crop for mobile or a format-specific source. The two mechanisms address related but distinct responsive-image requirements. In some designs, `<picture>` can contain sources while the fallback `<img>` also uses `srcset`.