HTML Picture Element
In this page:
The picture Container
The picture tag is a responsive image container that holds multiple source tags and a single img tag fallback. The browser evaluates the media rules of each source tag, loading and displaying only the first matching image file.
Note: Always include a standard img tag inside your picture element to act as a fallback for older browsers.
Warning: The picture tag is just a wrapper; if you do not include the fallback img tag inside, the image will not display.
Example: The picture Container
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A photo">
</picture>Responsive Art Direction
Art direction means serving different image compositions (such as square crops or different orientations) to fit different screen layout shapes. You do this by setting responsive media queries inside the source tags' media attributes.
Note: Use square-cropped images on mobile devices to focus attention on key details in your illustration.
Warning: Ensure your image aspect ratios are proportional to prevent layout distortion during scaling.
Example: Responsive Art Direction
<picture>
<source media="(max-width: 600px)" srcset="photo-square.jpg">
<img src="photo-wide.jpg" alt="A photo">
</picture>Serving Modern Image Formats
Modern image formats (like WebP or AVIF) provide much better compression than legacy JPEGs or PNGs, keeping file sizes small and load speeds fast. By specifying format types inside your source tags, you can serve WebP files to modern browsers while falling back to standard JPEGs for older systems.
Note: Always specify the mime-type of your image formats inside the type attribute of your source tags.
Warning: If you do not specify a type attribute, the browser may fail to parse the file format correctly.
Example: Serving Modern Image Formats
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A photo">
</picture>Optimizing Network Bandwidth
If your site loads massive widescreen images on mobile screens, you are wasting user data and slowing down your load speed. The picture tag prevents redundant downloads by ensuring the browser only downloads the single matching source file, ignoring the other options.
Note: Use picture tags to optimize your site's load speed and save server bandwidth.
Warning: Do not duplicate your image file paths across different source tags, as this can confuse the browser.
Example: Optimizing Network Bandwidth
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(min-width: 601px)" srcset="large.jpg">
<img src="large.jpg" alt="A photo">
</picture>Accessibility on picture
Because the browser only uses the source tags to select which file path to load, the actual image rendering is handled by the nested img tag. This means you must write your alt text descriptions directly inside that fallback img tag.
Note: Write your alt text on the fallback img tag; do not write alt attributes on source tags.
Warning: Leaving the alt attribute off your fallback img tag makes your entire picture element invisible to screen readers.
Example: Accessibility on picture
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A red bicycle leaning against a wall">
</picture>- Forgetting to include the fallback img tag inside your picture element, which prevents images from rendering.
- Writing alt text descriptions on the source tags instead of on the fallback img element.
- Failing to specify image formats in the type attributes of your source tags, which can prevent modern formats from loading.
- The picture element is a responsive image container that holds multiple source tags and an img fallback tag.
- Use media attributes to handle art direction and types to serve highly compressed, modern image formats (like WebP).
- Write your alt text descriptions directly on the fallback img tag to keep your responsive images accessible.
Standard HTML5 picture elements and source tags are supported natively by all modern web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: