Responsive Images with Picture.

The <picture> element allows you to provide different versions of an image for different screen sizes or device resolutions, significantly improving performance and art direction.

The Essentials

The <picture> element is a container for one or more <source> tags and one <img> tag.

The <source> tag uses 'srcset' to point to different image files.

The 'media' attribute allows you to use media queries to choose the right image.

The browser picks the FIRST <source> that matches the media query.

The <img> tag is required at the end as a fallback for older browsers.

Responsive images save bandwidth by not loading huge files on small mobile screens.

Professional Insights

Art Direction vs. Resolution Switching

Use <picture> when you want to change the image entirely (e.g., a landscape photo on desktop but a cropped portrait on mobile). For just different sizes of the SAME image, 'srcset' on a regular <img> tag is more efficient.

Device Pixel Ratio (DPR)

You can provide high-resolution images for Retina displays using the '2x' descriptor in srcset (e.g., srcset='img.jpg, img-hd.jpg 2x').

WebP and Modern Formats

The <picture> element is the best way to serve modern formats like WebP or AVIF while keeping a JPEG fallback. The browser will use the modern format if supported and ignore it if not.

The Importance of the Fallback <img>

The <img> tag inside <picture> is not just a fallback; it's what actually renders the image. The <source> tags just provide the data. Always include alt text on the <img> tag.

Critical Pitfalls

Forgetting to include the <img> tag inside the <picture> element.

Putting the 'alt' attribute on the <source> tag instead of the <img> tag.

Not ordering <source> tags correctly—the browser stops at the first match.

Using huge 4K images on mobile because you didn't provide a smaller source.

Interactive Lab

Sprint Tasks

Create a <picture> element

Add a source that shows 'mobile.jpg' when the screen is max-width 600px

Add a fallback img tag with src='desktop.jpg' and alt='A scenic view'

Loading editor...

Production Preview