|$ curl https://forge-ai.dev/api/markdown?path=docs/html/picture
$cat docs/picture-element-&-responsive-images.md
updated Recently·18 min read·published
Picture Element & Responsive Images
◆HTML◆Images◆Intermediate
Introduction
The <picture> element, combined with srcset and sizes attributes on <img> and <source>, provides art direction, resolution switching, and format selection for responsive images.
srcset & sizes
The srcset attribute defines a set of image candidates with their widths or pixel densities. The sizes attribute tells the browser how wide the image will display at different viewport widths.
srcset-example.html
HTML
| 1 | <img |
| 2 | src="fallback.jpg" |
| 3 | srcset="small.jpg 400w, |
| 4 | medium.jpg 800w, |
| 5 | large.jpg 1200w" |
| 6 | sizes="(max-width: 600px) 100vw, |
| 7 | (max-width: 1200px) 50vw, |
| 8 | 33vw" |
| 9 | alt="Responsive demo" |
| 10 | > |
The Picture Element
Use <picture> for art direction (different crops per breakpoint) and format selection (WebP, AVIF fallbacks).
picture-format.html
HTML
| 1 | <picture> |
| 2 | <source srcset="image.avif" type="image/avif" /> |
| 3 | <source srcset="image.webp" type="image/webp" /> |
| 4 | <img src="image.jpg" alt="Fallback" /> |
| 5 | </picture> |
ℹ
info
Browsers select the first <source> with a supported format. Always include a fallback <img> with a universal format like JPEG or PNG.