HTML Course 12.3 The picture element for adaptive images

HTML Course 12.3 The <picture> Element for Adaptive Images

The <picture> element provides a powerful mechanism for delivering adaptive images tailored to different device capabilities, viewport sizes, pixel densities and art-direction needs. By combining one or more <source> elements with a fallback <img>, the browser selects the optimal resource based on media queries, image formats or resolution descriptors.

1. Why Use <picture>?

• Art Direction: Serve differently cropped or composed images depending on screen size or orientation.
• Format Selection: Offer modern formats (e.g. WebP, AVIF) first, falling back to JPEG/PNG in older browsers.
• Density Switching: Provide high-DPI (“@2x”, “@3x”) variants to sharp displays without over-serving high-res files to standard screens.
• Conditional Delivery: Use media queries (media attribute) to switch images based on viewport width or device features.

2. Basic Syntax and Roles

The core structure is:

• <source>: Specifies a candidate image resource plus optional media, type, sizes or resolution descriptors in srcset.
• <img>: Lowest-priority fallback. Must include src and alt. The browser still uses its responsive image algorithm on the first srcset found, if present.

3. Key Attributes

• media: A media query. Only active when it matches the current viewport or device.
• type: The MIME type (e.g. image/webp). The browser skips sources with unsupported types.
• srcset: A comma-separated list of candidate images with descriptors:
  • 100w (width descriptor) – tells browser the intrinsic width in CSS pixels.
  • 1x, 2x (pixel density descriptor) – ratio of device pixels to CSS pixel.
• sizes: A set of media conditions and slot sizes, telling the browser the intended display width (in CSS px) of the image slot. Only used with width descriptors.

4. How Resolution Selection Works

1. Browser evaluates <source> elements in order:
   1. Skip if media doesn’t match.
   2. Skip if type unsupported.
   3. Take this source and stop processing further sources.
2. Within chosen source, if srcset contains width descriptors (e.g. 300w):
   1. Parse sizes to determine the slot width in CSS px.
   2. Choose the candidate whose w most closely matches the slot width × device-pixel-ratio.
3. If srcset contains pixel density descriptors (e.g. 1x, 2x), pick the candidate whose ratio best matches the DPR.
4. If no srcset, use the src on <img>.

5. Example: Format Fallback + Density Switching

Serve WebP if supported, else JPEG. Include 1x, 2x variants to handle retina screens.

6. Example: Art Direction

Use entirely different crops for mobile vs desktop:

7. Example: Combined Width Descriptors & Media Queries

Provide a spectrum of widths at different breakpoints:

8. Browser Support & Fallback

• Modern browsers support <picture> and responsive images. Older browsers ignore <picture> and use the <img src> fallback.
• Always include a plain src on <img> for backward compatibility.
• Use feature detection (e.g. Modernizr.picture) if you need polyfills in legacy environments.

9. Best Practices

• Include descriptive alt text on <img>.
• Keep breakpoints aligned with your CSS layout grid.
• Optimize and compress all image variants.
• Balance the number of variants: too many might slow down build and complicate caching.
• Test on real devices with different DPR settings and viewport sizes.

By mastering the <picture> element, you can deliver visually crisp, bandwidth-efficient and context-aware images that enhance performance and user experience across the full spectrum of devices.