<picture> / <source>

Since:		HTML5（2014）

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

sample_picture_source.html

<!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 style="margin: 20px;">

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

  <!-- Prefer modern formats: AVIF → WebP → JPG -->
  <picture>
    <source type="image/avif" srcset="photo.avif">
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="Photo">
  </picture>

  <!-- srcset with width descriptors for Retina / responsive images -->
  <picture>
    <source
      srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
      sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px">
    <img src="hero-800.jpg" alt="Hero image">
  </picture>

</body>
</html>

Result

The displayed image changes as you resize the browser window. At 800px or wider, the cat photo is shown. At 400px or wider, the test image is shown. Below 400px, the favicon is shown as a fallback.

View sample page

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.

Browser Compatibility

Desktop

Chrome

38 and later ○

37 and earlier ×

Firefox

38 and later ○

37 and earlier ×

Safari

9.1 and later ○

8.1 and earlier ×

Edge

13 and later ○

Not supported ×

Opera

25 and later ○

24 and earlier ×

Mobile

iOS Safari

9.3 and later ○

8.3 and earlier ×

Android Browser

38 and later ○

37 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN / Can I Use.

WebP/AVIF Format Priority

With <picture>, you can let the browser choose the best image format based on its support. AVIF has the highest compression; if unsupported, WebP is used; if that is also unsupported, JPEG is the fallback.

<!-- Controlling image format priority -->
<picture>
  <!-- 1. Use AVIF if supported (highest compression) -->
  <source srcset="hero.avif" type="image/avif">
  <!-- 2. Use WebP if supported (high compression, widely supported) -->
  <source srcset="hero.webp" type="image/webp">
  <!-- 3. Fall back to JPEG if neither is supported -->
  <img src="hero.jpg" alt="Site hero image" width="1200" height="600">
</picture>

<!-- Combining responsive images with format optimization -->
<picture>
  <!-- Mobile (max 480px wide): portrait image -->
  <source media="(max-width: 480px)" srcset="banner-sp.webp" type="image/webp">
  <source media="(max-width: 480px)" srcset="banner-sp.jpg">
  <!-- Desktop: landscape image -->
  <source srcset="banner-pc.webp" type="image/webp">
  <img src="banner-pc.jpg" alt="Banner image" width="1200" height="400">
</picture>

Format	Compression	Major Browser Support	Notes
AVIF	Best	Chrome / Firefox / Safari 16+	Next-generation format. Not supported by IE
WebP	High	Chrome / Firefox / Safari 14+	~30% smaller than JPEG. Widely adopted
JPEG	Moderate	All browsers	Best for photos. Use as fallback
PNG	Lower	All browsers	Best for transparency, logos

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary

<picture> / <source>

Syntax

Common Attributes

Sample Code

sample_picture_source.html

Result

Notes

Browser Compatibility

WebP/AVIF Format Priority