The picture Element and Art Direction: The Decisions That Matter
An HTML element that lets a page offer different image files for different screen sizes, formats or conditions, such as a tighter crop on phones or an AVIF version for supporting browsers.
Marcus Adeyemi
The key figures
- source elements
- list alternative images with media or type conditions
- Fallback
- the img element inside picture is used when no source matches
- Format switching
- type="image/avif" and type="image/webp" sources
- Art direction
- different crops chosen with media queries
Why this is worth getting right
It gives control over which image each device receives, which matters for both performance and composition on small screens.
Do this, not that
Do
- Use picture for format fallbacks and art direction
- Use srcset and sizes for simple resolution switching
- Keep alt text on the inner img element
- Set width and height to prevent layout shift
- Test each source on real devices
Don’t
- picture elements where srcset alone would do
- Missing fallback img elements
- Different content in different crops without reason
- Forgetting to update every source when images change
When to bring in help
Our advice Bring in help when hero images need different crops for mobile, or when adopting modern formats.
Where this comes from
- MDN Web Docs — The picture element
- MDN Web Docs — Responsive images
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
