HTML Tags
HTML <picture> Tag
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
html
<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
html
<!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>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
<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.