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>

Output

Browser Output

html

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	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 alt text 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.

PreviousHTML <param> Tag NextHTML <canvas> Tag