The <picture> Element: Art Direction for Images

WHY IT EXISTS: A single image source is no longer sufficient for the web. Users have devices with vastly different screen sizes, pixel densities, network speeds, and orientations. The <picture> element was created to solve this by allowing a developer to provide a menu of image options, from which the browser can select the most appropriate one for the user's specific context, saving bandwidth and improving layout.

THE MENTAL MODEL: Think of the <picture> element as an art director for your page's images. It doesn't display an image itself. Instead, it's a wrapper containing a list of potential image sources (<source>) with specific conditions, like screen width or file type. The browser evaluates these conditions and picks the first one that matches. A mandatory <img> element at the end acts as the default, catching any case where no condition is met or the browser is too old to understand <picture>.

HOW IT WORKS: You wrap an <img> element inside a <picture> element. Before the <img>, you add one or more <source> elements. Each <source> has a srcset attribute defining the image file and can have a media attribute (for media queries like viewport width) or a type attribute (for file formats like 'image/webp'). The browser checks each <source> in order. The first one whose conditions are met is used, and the browser stops looking. The final <img> is ignored if a <source> is chosen but is essential as a fallback.

WHEN TO USE IT: Use <picture> when you need to change the actual image content for different breakpoints, a technique called art direction. For example, showing a close-up on a person's face on mobile but the full group photo on desktop. It is also the correct tool for offering different image formats, like serving a modern WebP file to supported browsers while falling back to a JPEG for others.

WHEN NOT TO USE IT: If you are only serving different resolutions of the exact same image to handle varying pixel densities (e.g., 1x, 2x screens), the srcset and sizes attributes on a plain <img> element are often simpler and sufficient. The <picture> element is for when you need more explicit control over which image file is chosen based on conditions beyond just resolution, such as viewport size or format support.

ONE CANONICAL EXAMPLE: A common use case is providing different image crops for different screen orientations. A wide, landscape-oriented image is perfect for a desktop view, but on a mobile phone held in portrait mode, a vertically cropped version is more effective. Using <picture>, you can define a <source media="(orientation: portrait)" srcset="portrait-crop.jpg"> and a <source media="(orientation: landscape)" srcset="landscape-full.jpg">, with a final <img> as the fallback, ensuring the user sees the most appropriate composition.