HTML <picture> Tag

The <picture> element is a container for one or more <source> elements and one <img> element, which is the last child element in the block.

The <source> element contains versions of an image for different display device scenarios. The <img> element describes the image’s size and other attributes. The browser considers each of the child <source> elements and loads the most appropriate image. If no matches are found, the browser displays the image specified by the <img> tag.

The <picture> element allows specifying multiple images to better adapt to different viewport sizes, avoiding the need to scale a single image. It can be used for the following purposes:

to crop and modify images for different media conditions,
to offer alternative image formats when specific formats are not supported.

Note: The object-position and object-fit properties apply to the <img> fallback element to control its sizing and alignment within the container.

The <picture> tag is new in HTML5.

Syntax

The <picture> tag comes in pairs. The content is written between the opening (<picture>) and closing (</picture>) tags.

HTML <picture> Tag

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Example of the HTML `<picture>` tag:

HTML <picture> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="Cityscape at sunset" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Try it Yourself »

The browser evaluates <source> elements in order and loads the first one whose media query matches the current viewport. If no <source> matches, it falls back to the <img> element. The <picture> element is widely supported in all modern browsers.

The alt attribute on the fallback <img> is mandatory: whichever image the browser finally renders, it uses that single alt text. Always write a description of the actual image content, not a placeholder like alt="img".

Two jobs <picture> does

<picture> solves two different problems, and you choose the technique by which attribute you put on the <source> elements:

Art direction — show a different crop or composition depending on the viewport. A wide landscape shot on desktop, a tight portrait crop on mobile. Use the media attribute (a CSS media query) to pick the right image.
Format negotiation — serve the same image in a more modern, smaller format when the browser supports it (AVIF or WebP), falling back to JPEG/PNG everywhere else. Use the type attribute (a MIME type) so the browser skips formats it can't decode.

The browser walks the <source> list top to bottom and uses the first one that both matches (its media query, if any) and is supported (its type, if any). Order matters: put your most-preferred option first.

Format switching (AVIF, then WebP, then JPEG)

This is the most common real-world use of <picture>. Modern browsers that understand AVIF download the smallest file; older ones fall back to WebP, and anything else gets the universally supported JPEG. The browser loads exactly one image.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="A red fox standing in fresh snow" />
</picture>

Because the <source> elements carry only a type, every browser is offered all three — it simply picks the first format it can decode. No media queries are involved here; this is purely about file format.

Art direction (different crops with `media`)

Here the goal is to change which image is shown, not just its format. On screens 800px and wider the browser gets a wide banner crop; narrower screens get a square crop that keeps the subject readable on a phone.

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg" />
  <source media="(max-width: 799px)" srcset="hero-square.jpg" />
  <img src="hero-square.jpg" alt="Team celebrating a product launch" />
</picture>

Use media whenever the content of the image should differ between breakpoints.

Resolution switching with `srcset` and `sizes`

If you only need the same image at different pixel sizes — not a different crop or format — you usually don't need <picture> at all. A single <img> with srcset and sizes lets the browser pick the best resolution for the device's screen, viewport, and pixel density:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A red fox standing in fresh snow"
/>

How to read this:

srcset lists candidate images, each tagged with a width descriptor (400w means the file is 400px wide). The browser knows each file's real width without downloading it.
sizes tells the browser how wide the image will be displayed. Here it reads: "below 600px viewport the image fills the width (100vw); otherwise it occupies half (50vw)." The browser combines this with the device pixel ratio to choose the most economical candidate from srcset.
src stays as the fallback for browsers that ignore srcset.

srcset with width descriptors also works inside a <source> element, so you can combine resolution switching with art direction or format switching.

When do you actually need `<picture>`?

Goal	Use
Same image, let the browser pick the best resolution for the screen	`<img srcset>` + `sizes`
Same image in a smaller modern format (AVIF/WebP) with a fallback	`<picture>` + `type`
A different crop/composition per breakpoint (art direction)	`<picture>` + `media`

Rule of thumb: reach for <picture> only when you need to control which file the browser uses (format or crop). For plain "serve the right size," <img srcset> is simpler and enough.

Attributes

These attributes apply to the <source> elements inside <picture>:

Attribute	Value	Description
media	media_query	Specifies a media query to match the viewport size.
srcset	URL	Specifies the URL of the image to use in different situations.
sizes	length	Specifies the width of the image for different viewport sizes.
type	MIME_type	Specifies the MIME type of the linked resource (e.g., `image/webp`).
src	URL	Specifies the URL of the image. Used as an alternative to `srcset`.

Each <source> element must include either a srcset or src attribute. The fallback <img> element uses the src attribute.

The <picture> tag supports the Global Attributes.

Practice

What does the HTML picture element do?

It embeds sound content in a document.It defines a container for several source candidates and one fallback image, letting the browser load the most suitable image for the device, screen size, or supported format.It only works for vector graphics such as SVG.It automatically creates a hyperlink around an image.

Syntax

Example of the HTML <picture> tag: