Codectionary / Developer documentation / HTML

<picture> and <source>

The <picture> element lets the browser choose the most appropriate image from multiple <source> options based on screen size, resolution, or format support, falling back to a required <img> element if none match. This is the standard way to serve responsive, art-directed, or next-gen image formats (like WebP or AVIF) with automatic fallback.

Syntax

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

Examples

Format Fallback

Serving a modern format with a JPEG fallback.

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

Responsive Art Direction

Showing a different crop of the same image depending on screen width.

<picture>
  <source media="(min-width: 800px)" srcset="banner-wide.jpg">
  <source media="(min-width: 400px)" srcset="banner-medium.jpg">
  <img src="banner-small.jpg" alt="Homepage banner">
</picture>

Resolution Switching

Serving higher-resolution images to high-density screens.

<picture>
  <source srcset="icon.png 1x, icon@2x.png 2x">
  <img src="icon.png" alt="App icon">
</picture>

Attributes

  • srcset (string): Used on source; one or more candidate image URLs
  • media (string): A media query controlling when that source is used
  • type (string): The MIME type of the image resource, letting the browser skip unsupported formats

Best practices

  • Always include a fallback <img> as the last child — it is what renders if no source matches, and is required for accessibility
  • Put the alt attribute on the fallback <img>, not on picture or source
  • List source elements from most to least preferred format, since the browser uses the first one it supports
  • Use picture for format/art-direction switching, and the simpler img srcset attribute for pure resolution switching

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<img>
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.