Pattern

Images and media

Only images that carry information, served small and sharp, with their size reserved so nothing moves.

Rules

What: Real screens, covers, diagrams. No stock photos, no decorative headers.
Format: <picture> with AVIF first and WebP as fallback, in two or three widths with srcset and sizes.
Size: width and height on every image, so the layout is reserved before it loads.
Loading: loading="lazy" below the first screen; fetchpriority="high" only on the page’s largest image (the book cover, the hero devices).
Dark mode: Photos dim to 88% (--photo).
Devices: Exports that carry their own frame (App page blocks); the watch uses .screen-watch.
Film: <video controls preload="none" playsinline> with a poster, its size, and aria-describedby pointing at a text description. Never autoplays.
Alt text: What the image shows, in a sentence; empty only for pure decoration.
Caching: Images are cached for 7 days: a replaced image gets a new file name.