The pipeline overview
A production image pipeline has five stages: upload, validate, transform, store, serve. Skip any stage and you ship sub-optimal images. Get all five right and your images are the fastest part of your page, not the slowest.
Stage 1: upload and validate
Accept uploads in any format (JPEG, PNG, WebP, HEIC, AVIF). Validate dimensions, file size and content type. Reject malformed files and oversized files at the upload boundary, not after they've been stored. Validation is the cheapest place to enforce quality — every later stage assumes valid input.
Stage 2: transform
Convert every uploaded image to AVIF and WebP at multiple sizes — 320w, 640w, 1024w, 1600w. Use a server-side library (sharp for Node, libvips for everything else) for quality and speed. Pre-generate all sizes at upload time so serve-time is just a CDN lookup, never a transformation.
Stage 3: store
Object storage is the right answer — S3, R2, GCS. Organise by hash, not by sequential ID, to avoid hotspotting. Store originals and transformations separately so you can re-transform if you change your format strategy without re-uploading the originals.
Stage 4: serve via CDN
Serve from a CDN with content negotiation. The CDN sees the Accept header and returns AVIF, WebP or JPEG based on browser support. Cache aggressively — images change rarely; the cache should live for months. Add an immutable cache header for filenames that include a content hash.
Stage 5: render in HTML
Use the picture element with multiple source tags for format selection, and srcset for size selection. Add explicit width and height to prevent CLS. Add loading=lazy for below-the-fold images. Add fetchpriority=high for the LCP image. The HTML is where the rubber meets the road — a perfect pipeline still loses if the HTML doesn't request the right variant.
Monitoring and quality control
Track average image weight per page, image format distribution and CDN cache hit rate. If your average weight creeps up, audit recent uploads for missed compression. If your AVIF distribution drops, audit your content negotiation logic. The pipeline is only as good as your monitoring.
Common pitfalls
Don't transform on every request — it's slow and expensive. Don't store only the largest size — serving a 1600w image to a 320px viewport wastes bandwidth. Don't skip AVIF because of the slight encode cost — the bandwidth savings are 28% on average, which dwarfs the encode time. Get the pipeline right once, then forget about it.