Mastering Responsive Images with the <picture> Element

The HTML <picture> element gives web developers more flexibility in specifying image resources. It allows you to provide multiple image sources to a browser, so the browser can choose the most appropriate one based on factors like screen size, viewport, pixel density, and image format support. This is a powerful tool for creating truly responsive and optimized websites.

Why Use the <picture> Element?

There are two main reasons to use the <picture> element:

Art Direction: You can show a different, cropped, or modified image for different screen sizes. For example, a wide landscape image on desktop might be cropped to focus on the main subject for a narrow mobile screen.
Format Support: You can provide modern image formats like WEBP or AVIF for browsers that support them, with a fallback to a standard format like JPG for older browsers.

Syntax and Structure

The <picture> element works as a wrapper for one or more <source> elements and a final, fallback <img> element.

Example Explained:

The browser will look at each <source> element from top to bottom.
It will check if the media query in the media attribute matches the current viewport.
The first <source> element that matches is used, and the browser will not check any of the following elements.
The <img> element at the end is mandatory and serves as a fallback for older browsers that do not support the <picture> element, or if none of the media queries match.

When to Use <picture> vs. CSS Media Queries

While CSS media queries can also be used to show different images at different breakpoints (by changing the background image of a div), the <picture> element is the semantically correct and more efficient way to handle responsive images for content. It allows the browser to download only the image it needs, saving bandwidth and improving performance, whereas a CSS background solution might cause the browser to download multiple images unnecessarily.

HTML The Picture Element