Definition
An HTML element <picture> used for “art direction” and format fallbacks, allowing developers to explicitly dictate which image source the browser must use under specific conditions.
Why It Matters
Sometimes just scaling an image down isn’t enough; an image may need to be cropped differently on a small screen to keep the subject visible, or a modern image format needs a reliable fallback for older browsers.
Core Concepts
- Art Direction: Using
<source>tags withmediaqueries to serve different crops or compositions based on viewport width. - Format Fallback: Providing a modern format like WebP (
<source type="image/webp">) with a standard JPEG or PNG<img>as the final fallback. - The
<img>Requirement: A<picture>element must always contain an<img>tag, which is the actual element rendered by the browser (the<source>tags just feed it data).