The most surprising thing about automatically serving modern image formats like WebP and AVIF is how little it actually costs, both in terms of infrastructure and complexity, and how much it can improve user experience.
Let’s see this in action. Imagine you have an image, my-awesome-photo.jpg, hosted on a CDN. When a user requests it, your CDN doesn’t just serve the .jpg. Instead, it checks the user’s browser. If the browser understands WebP, it dynamically converts my-awesome-photo.jpg into my-awesome-photo.webp on the fly and serves that. The file size might be 50% smaller, and the user sees the image just as fast, if not faster. If the browser also supports AVIF, and AVIF offers even better compression, the CDN can convert it to my-awesome-photo.avif. If neither is supported, it falls back gracefully to my-awesome-photo.jpg.
This isn’t magic; it’s intelligent image optimization powered by your CDN. The core problem this solves is the "one size fits all" approach to image delivery. For years, we’ve uploaded JPEGs and PNGs and served them universally. This meant users on slow mobile networks or older devices were downloading unnecessarily large files. Modern formats like WebP and AVIF offer significantly better compression at comparable visual quality. WebP can reduce file sizes by 25-35% compared to JPEG, and AVIF can achieve even more, sometimes up to 50% smaller than WebP. The challenge has always been: how do you serve these new formats without breaking older browsers or managing multiple versions of every image?
CDNs like Cloudflare, Akamai, and Fastly, along with specialized image optimization services like Imgix and Cloudinary, handle this complexity. They integrate image transformation capabilities directly into their edge network. When you configure image optimization, you typically enable a setting that tells the CDN to automatically transform images to the most efficient format supported by the requesting user’s browser.
The internal mechanism is surprisingly straightforward. When a request comes in for an image, the CDN’s edge server inspects the Accept header sent by the user’s browser. This header tells the server which content types (like image formats) the browser can understand. For example, a modern Chrome browser might send an Accept header like:
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8
Notice image/avif and image/webp are listed. If the CDN sees these, and it has the original image source, it will attempt to serve the AVIF or WebP version. If the original is a JPEG, it will perform a real-time conversion using powerful image processing libraries (like libwebp or libavif) running on its servers. It then caches this converted image at the edge, so subsequent requests from browsers that support the same format hit the cache directly, making it incredibly fast.
The levers you control are usually quite simple:
- Enable Auto-Format Conversion: This is often a toggle switch in your CDN’s dashboard. For Cloudflare, it’s under "Speed" -> "Optimization" -> "Auto Minify" -> "Brotli" and then scrolling down to "Image Optimization" and enabling "WebP compatibility". For other CDNs, it’s a similar setting.
- Specify Quality: You can often set a default quality level for the converted images (e.g., 80% for WebP, 70% for AVIF). This balances file size reduction with visual fidelity.
- Cache Control: Ensure your CDN is configured to cache these dynamically generated image formats correctly. Most CDNs handle this automatically when image optimization is enabled.
- Original Image Source: The CDN needs access to the original, unoptimized image. This is typically stored in your origin server (e.g., an S3 bucket, your web server).
The actual configuration for Cloudflare looks like this within their UI: Navigate to Speed > Optimization. Scroll down to Image Optimization. Toggle WebP compatibility to On. If you want to add AVIF support, you’d find the AVIF compatibility toggle and set it to On. That’s it. The CDN handles the rest.
The real magic happens when you consider how the Accept header is used. It’s not just about what a browser can display, but also its preference. The q values (quality factor) in the Accept header indicate preference. A higher q value means higher preference. For example, image/avif;q=0.9 tells the server "I really prefer AVIF." The CDN’s logic will respect these preferences, serving AVIF if available and preferred, then WebP, then falling back to JPEG or PNG.
The one thing most people don’t realize is that the original image file doesn’t need to be changed in your storage. You upload my-photo.jpg once. The CDN handles all the transformations and serving of .webp or .avif versions dynamically at the edge, based on the incoming request. You don’t need to pre-generate or store multiple versions of your images for different formats. This dynamic conversion and caching at the edge means you get the benefits of modern formats without the operational overhead of managing them yourself.
The next hurdle you’ll encounter is optimizing for even more niche formats or implementing more granular control over image transformations, like resizing and cropping on the fly.