Our earlier image-delivery article made the commercial case; this is the engineering companion. A modern pipeline is a negotiation: the client declares capabilities, the edge selects or synthesizes the variant, and the origin holds one master. Every step has settings that move real bytes.
The format ladder in 2026
AVIF leads compression at photographic content, with encode costs that stopped mattering once transforms moved to cached edge operations. WebP is the universally-supported workhorse, meaningfully ahead of JPEG. JPEG remains the fallback floor, and PNG survives for the genuinely lossless cases (with lossless WebP eating into it). The pipeline rule: negotiate down the ladder per Accept header, never ship a format the client did not declare, and keep one high-quality master per asset as the transform source, derivatives are cache entries, not source files.
The negotiation plumbing
Accept-based selection at the edge requires the Vary discipline from earlier in this series: vary on a normalized capability class, not the raw header, or fragment your cache across Accept-string trivia. URL-based variants (explicit format parameters generated by your templating) sidestep Vary entirely at the cost of markup awareness. Both work; mixing them accidentally is how estates end up double-storing every derivative. Pick one negotiation style per asset domain and write it down.
One architectural choice deserves explicit treatment: transform-at-edge versus transform-at-build. Build-time generation gives deterministic outputs and zero runtime dependencies, and it explodes combinatorially as formats, widths and DPRs multiply, storage and build times grow with the matrix. Edge transformation inverts it: one master, derivatives created on first request and cached thereafter, the matrix priced per actual demand rather than per possibility. The crossover favors the edge as catalogs and variant counts grow, which is why the industry moved there; the residual case for build-time is small, stable asset sets and organizations that need byte-identical reproducibility. Choose consciously, document the choice, and stop running both, the double-pipeline estates pay twice and debug thrice.
Quality budgets and responsive sizing
Format is half the bytes; dimensions and quality are the rest. Responsive srcset with honest width descriptors lets browsers pull the right resolution; DPR capping (nobody needs 4x assets) trims the retina tax; and per-class quality settings, aggressive for decorative, conservative for product, encode the brand agreement our earlier article insisted on. Automate all three in the transform layer and audit with a byte budget per template, because image regressions arrive one CMS upload at a time.
In practice
The audit sequence: sample top templates, record delivered bytes per image versus the ladder-optimal figure, fix negotiation and sizing gaps, then wire the byte budget into CI against representative pages. Most estates find double-digit percentage total-page-weight reductions still on the table, years after everyone declared images solved, because entropy reintroduces waste continuously and only budgets push back continuously.
Image-pipeline audits here return the byte-budget table per template and the negotiation-gap list. Savings are quoted in your currency.