<picture> / <source>

The picture and source elements let you serve different images depending on the device's screen size, resolution, or supported format.

Syntax

<!-- Switch images using media queries -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description text">
</picture>

<!-- Switch image format (prefer WebP if supported) -->
<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Description text">
</picture>

Common Attributes

Attribute	Description
srcset	Specifies the URL(s) of the image to use. You can provide multiple values combined with width descriptors (e.g., 800w) or pixel density descriptors (e.g., 2x).
sizes	Specifies the display width of the image paired with media conditions. This helps the browser choose the most appropriate image.
media	Specifies a media query. The first `source` element whose condition matches is used.
type	Specifies the MIME type of the image (e.g., image/webp, image/avif). If the browser does not support the type, that source is skipped.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>picture Sample</title>
</head>
<body>

  <!-- Switch images based on viewport width -->
  <picture>
    <source media="(min-width: 800px)" srcset="hero-large.jpg">
    <source media="(min-width: 400px)" srcset="hero-medium.jpg">
    <!-- Fallback when no condition matches -->
    <img src="hero-small.jpg" alt="Hero image">
  </picture>

  <!-- Prefer WebP; fall back to JPG if unsupported -->
  <picture>
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="Photo">
  </picture>

</body>
</html>

Result

If the viewport is 800px or wider, "hero-large.jpg" is displayed. If it is 400px or wider, "hero-medium.jpg" is displayed. Otherwise, "hero-small.jpg" is shown. In browsers that support WebP, "photo.webp" is displayed; in others, "photo.jpg" is shown.

<!-- When viewport width is 800px or more -->
<img src="hero-large.jpg" alt="Hero image"> is displayed

<!-- When viewport width is between 400px and 799px -->
<img src="hero-medium.jpg" alt="Hero image"> is displayed

<!-- When viewport width is less than 400px -->
<img src="hero-small.jpg" alt="Hero image"> is displayed

Notes

The picture element is a container used to implement responsive image switching. Place multiple source elements inside it, and always include an img element at the end. The img element is required as a fallback. If you omit it, some browsers may display nothing.

The media and type attributes on a source element can be used together. The browser evaluates each source from top to bottom and uses the first one that matches. Using the type attribute to prioritize modern formats like WebP or AVIF can reduce file size and speed up page loading.

For simple Retina display support, the srcset attribute on the img element may be sufficient. Choose the approach that fits your use case.