Responsive Images in HTML with the `<picture>` Element

Optimize images for all devices using the HTML `<picture>` element. This tutorial shows how to serve different images based on screen size and browser capabilities, improving website performance and user experience.

Responsive Images with the HTML `<picture>` Element

The HTML <picture> element provides a way to serve different images optimized for various screen sizes and devices, improving performance and user experience.

How the `<picture>` Element Works

The <picture> element acts as a container for one or more <img> elements, each specifying an image source (src) and a media condition (media). The browser selects the most appropriate image based on the user's device and screen characteristics.

<picture>
  <img src="small.jpg" media="(max-width: 600px)" alt="Small Image">
  <img src="medium.jpg" media="(min-width: 601px) and (max-width: 1200px)" alt="Medium Image">
  <img src="large.jpg" alt="Large Image">
</picture>

The last <img> element acts as a fallback if none of the media conditions match (or if the browser doesn't support <picture>).

When to Use the `<picture>` Element

The <picture> element is valuable in two key scenarios:

1. Bandwidth Optimization

Smaller screens or devices don't require large image files. The browser will choose the first suitable image, ignoring larger options, thus saving bandwidth and loading time.

2. Format Support

Different browsers and devices have varying image format support. Using <picture>, you can offer multiple image formats (e.g., WebP, JPEG, PNG), ensuring compatibility across devices.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback Image">
</picture>

The browser will choose the WebP image if supported, otherwise using the JPEG fallback.

Summary Table