The
<picture>tag in HTML is used to provide multiple image sources for responsive designs.
It allows the browser to choose the most suitable image based on screen size, resolution, or format support.
It’s commonly used with<source>and<img>tags inside it.
Syntax
<picture>
<source srcset="image-small.jpg" media="(max-width: 600px)">
<source srcset="image-large.jpg" media="(min-width: 601px)">
<img src="image-default.jpg" alt="Description">
</picture>Attributes
| Attribute | Description |
|---|---|
| srcset | Specifies the image URL(s) to use for a particular media query or resolution. |
| media | Defines a media condition (like in CSS @media) to choose the appropriate image. |
| type | Specifies the MIME type of the image (e.g., image/webp). |
| alt | Provides alternative text for the <img> tag (required for accessibility). |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture Tag Example</title>
</head>
<body>
<h2>Responsive Images with <picture></h2>
<picture>
<source srcset="https://picsum.photos/id/237/300/300.webp" media="(max-width: 600px)">
<source srcset="https://picsum.photos/id/237/600/300.webp" media="(min-width: 601px)">
<img src="https://picsum.photos/id/237/200/200.webp" alt="Sample Responsive Image" width="600">
</picture>
</body>
</html>Output
Browser Output
Displays a responsive image that changes automatically based on the screen width.
Use our Try It Editor to resize the browser window and see the image switch between image-small and image-large.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ❌No |
<picture> is not supported in Internet Explorer 9.
The <img> element inside <picture> acts as a fallback for unsupported browsers.
Ideal for responsive images and modern formats like WebP.
Notes
- The
<picture>element itself does not display anything — the<img>inside it is what’s visible. - You can include multiple
<source>tags with different media queries or file formats. - Use
<picture>for art direction (different images for different devices) rather than simple scaling. - Always include
alttext in<img>for accessibility.
Conclusion
The <picture> tag provides a powerful method for delivering responsive and adaptive images.
It improves performance and user experience by letting browsers choose the most appropriate image based on screen size or format support.
