Performance
Image CDN
Image CDN is a host that crops, resizes, and compresses pictures on the way through, then caches the result at the edge. You store one original and request variants by URL.
How it is measured
Compare the delivered image's dimensions and bytes to the slot it fills. Check the response `Content-Type` to see whether AVIF or WebP was negotiated, and the cache status header to see whether the variant was served from cache.
The first request for a new variant is a miss and takes longer, since the service has to transform the original. Later requests are plain edge hits.
Worked example
A travel blog uploads 5,200 px camera originals at 4.1 MB. The theme requests `?w=800&format=auto`. Chrome receives an AVIF of 58 KB, Safari a WebP of 74 KB. The hero's first miss takes 640 ms, but later views take 45 ms, and LCP in the field falls from 3,700 ms to 2,300 ms.
A spike of newly generated widths from a misconfigured `srcset` causes a burst of 400 misses on one launch day.
How it differs
An image CDN transforms and delivers images. A responsive image is the markup that asks for the right width. AVIF is one of the formats the service can return. The CDN produces the variants, the HTML decides which ones to request.
Common errors
Requesting arbitrary widths and exploding the cache. Skipping width and height, causing layout shift. Leaving a public transform endpoint open to abuse. Using format auto but forgetting the Vary header. Serving the LCP image lazily despite the fast host.
In practice
Pick a fixed set of widths and set sizes in your markup to match. Use automatic format negotiation, keep the originals, and check LCP and bytes after switching.