HTML Picture Element
In this page:
<picture>
<source media="(min-width: width)" srcset="image-large.jpg">
<img src="image-default.jpg" alt="Description">
</picture>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.
- Always include a standard img tag inside your picture element to act as a fallback for older browsers.
- Accepted attributes:
- source srcset — image URL(s)
- source media — media query
- source type — MIME type such as image/webp | image/avif
- source sizes — sizes list
- img src / alt — required fallback
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.
- Use square-cropped images on mobile devices to focus attention on key details in your illustration.
- Accepted attributes:
- source media — e.g. (min-width: 800px)
- source srcset — image URL(s)
- img src / alt — fallback
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.
- Always specify the mime-type of your image formats inside the type attribute of your source tags.
- Accepted attributes:
- source type — image/avif | image/webp | image/jpeg | image/png | image/svg+xml
- source srcset — image URL(s)
- img src / alt — fallback
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.
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.
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: