Responsive Image Delivery

Responsive image delivery ensures that every device receives an image optimized for its viewport width, pixel density, and network conditions. Serving a 1920px image to a 375px screen wastes bandwidth. Serving a 375px image to a 4K display looks terrible.

The delivery stack: srcset for resolution switching (same composition, different file sizes), picture with source for art direction (different compositions per breakpoint), loading="lazy" for below-fold images, fetchpriority="high" for above-fold hero images, width and height attributes for layout stability (preventing cumulative layout shift).

For our design system: every generated image produces 4 resolution variants (375w, 768w, 1280w, 1920w) plus 2x versions for high-DPI displays (750w, 1536w, 2560w, 3840w). That is 8 variants per image without art direction. With art direction at 3 breakpoints, each breakpoint has 8 resolution variants = 24 files per visual. The batch asset pipeline (GFX-301c) handles this volume — each generation request specifies the breakpoint variants and resolution ladder, and the pipeline produces all required files.

File formats: WebP as the primary format (30-50% smaller than JPEG at comparable quality), AVIF as the progressive enhancement (50-70% smaller than JPEG), JPEG as the fallback for legacy browsers. The picture element stacks formats with type attributes — browsers pick the best supported format automatically.