Images Examples

Live demonstrations of image techniques in context

These examples put the images tutorials into practice with complete, working demos. Each one integrates several techniques that are easier to understand in context than in isolation. Work through the related tutorials first, then study how the pieces fit together here.

Projects

  1. Hero Image — A responsive, art-directed hero that loads fast: <picture> with AVIF/WebP fallbacks, correct width/height, and fetchpriority="high" to win the LCP race. Builds on tutorials 07 & 09.
  2. Thumbnail Gallery — A lazy-loaded gallery of below-the-fold thumbnails that link to their full-resolution versions; demonstrates how loading="lazy" and explicit dimensions together prevent layout shift. Builds on tutorial 09.
  3. Art Direction — A single <picture> element that serves AVIF or WebP, switches between a wide crop and a tight crop at a viewport breakpoint, and swaps to a dark-mode variant via prefers-color-scheme. Builds on tutorials 06, 07 & 08.
  4. Format Comparison — Side-by-side quality and file-size comparison of JPEG, WebP, and AVIF at multiple compression settings so you can see the trade-offs first-hand. Builds on tutorials 04 & 05.