How to Use the `picture` Tag in HTML#

The <picture> tag in HTML is used to provide multiple sources for an image, allowing for responsive images that adapt to different screen sizes and resolutions. This guide explains how to use the <picture> tag.

Basic Syntax#

The <picture> tag contains one or more <source> elements and an <img> element:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="Description of the image">
</picture>

Use Cases#

Responsive Images#

The <picture> tag is commonly used to provide responsive images that adapt to different screen sizes:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="Description of the image">
</picture>

Art Direction#

You can use the <picture> tag to provide different images for different contexts, such as different crops or compositions:

<picture>
  <source srcset="image-landscape.jpg" media="(orientation: landscape)">
  <source srcset="image-portrait.jpg" media="(orientation: portrait)">
  <img src="image-default.jpg" alt="Description of the image">
</picture>

Conclusion#

The <picture> tag is a powerful tool for providing responsive images and art direction in HTML. By using the <picture> tag, you can ensure that your images look great on all devices and screen sizes.

How to Use the picture Tag in HTML#