References

Beginner-friendly references for web development, with live, editable examples.

The HTML <picture> tag

Element All modern browsers Updated
Quick answer

The HTML <picture> element lets the browser choose between multiple image sources — by format (AVIF/WebP fallbacks) or by media query (art direction). It wraps one or more <source> elements and a required <img> fallback.

Overview

The <picture> element gives you fine control over which image the browser loads. Inside it you place several <source> candidates followed by a final <img>. The browser walks the sources, picks the first one that matches, and falls back to the <img>.

That trailing <img> is required, and it does double duty: it is the fallback when no source matches, and it carries the alt text and dimensions for the whole picture. Two main jobs call for <picture>: art direction — serving a different crop or composition at different screen sizes via <source media="…"> — and format negotiation — offering modern formats like AVIF or WebP via <source type="…"> with an older fallback.

For the simpler case of serving the same image at different resolutions, you do not need <picture> at all — an <img> with a srcset attribute handles density and width switching on its own.

Syntax

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" width="1200" height="600">
</picture>

Example

Live example 
<picture>
  <source srcset="https://codeshack.io/web/img/icon.png" media="(min-width: 600px)">
  <img src="https://codeshack.io/web/img/icon.png" alt="Logo" width="64" height="64">
</picture>

Best practices

  • Always include the final <img> — it is the required fallback and carries the alt text.
  • Use <source media="…"> for art direction (different crops at different sizes).
  • Use <source type="…"> to offer AVIF/WebP with a JPEG or PNG fallback.
  • For plain resolution switching, a single <img> with srcset is enough.

Frequently asked questions

What is the picture element for?
To choose between multiple image sources — for art direction (different crops) or to serve modern formats like AVIF/WebP with a fallback.
What is the difference between picture and img srcset?
Use <picture> when the image itself changes (different crops or formats); use an <img> with srcset when it is the same image at different resolutions.
How do I serve WebP or AVIF with a fallback?
Add <source type="image/avif"> and <source type="image/webp"> before a JPEG/PNG <img> fallback.
Does picture need an img inside it?
Yes. The <img> is required — it is the fallback and provides the alt text and dimensions.
param pre