HTML: Picture Tag

By Xah Lee. Date: 2020-11-12. Last updated: 2022-05-24.

2026-08-20

html picture tag

what is HTML picture tag

ai answer

The HTML <picture> element is a container used to provide multiple versions of an image so the browser can choose the most suitable one.

Purpose

It lets you serve different images based on:

Screen size / viewport (art direction — e.g. a cropped image on mobile)
Image format support (e.g. WebP or AVIF for modern browsers, with a JPEG/PNG fallback)
Device pixel density (via srcset)

The browser looks at the <source> elements inside <picture>, picks the best match, and displays it. If nothing matches (or the browser is very old), it falls back to the <img> element.

Basic Syntax

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description of the image">
</picture>

Common Use Cases

1. Different image formats (modern formats with fallback)

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

2. Art direction (completely different crops for different screens)

<picture>
  <source media="(min-width: 768px)" srcset="wide-landscape.jpg">
  <img src="tall-portrait.jpg" alt="A photo">
</picture>

Key Points

You must include an <img> element as the last child — it acts as the fallback and also defines the size, alt text, and other attributes.
The <picture> element itself does not display anything; the chosen image is shown in the space of the <img>.
It has been widely supported in browsers since around 2016.

In short: use <picture> when you need more control than a simple <img> with srcset/sizes (especially for art direction or format switching).

2020-11-12

The picture tag is similar to the Image Tag. It is for inline image with multiple sources for browser to chose a right size for user's device. It is invented sometimes around 2015.

The picture tag must contain zero or more source tags, and and must have one img tag at the end.


<picture>
 <source media="(min-width:1000px)" srcset="cat_big.jpg">
 <source media="(min-width:500px)" srcset="cat_small.jpg">
 <img src="cat.jpg" alt="cat">
</picture>