Your Image CDN Picks the Format. Here's How to See What It Actually Sends
Here is one image URL from a real Shopify store, requested three times. Same URL, same second, three different files: https://jellinator.com/cdn/shop/files/ShotCups_100Pack.png?width=1200 Chrome (AVIF+WebP) image/webp 87 KB Vary: Accept WebP only image/webp 87 KB Vary: Accept Old browser image/png 1223 KB Vary: Accept The only thing that changed between the three requests is the Accept header. A…
Image CDN services are selecting the appropriate format for images. To determine what format is actually sent, one can observe the Accept header present in browser requests. For instance, a Chrome browser sends: Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8. An image CDN reads this list and provides the best format it can produce, adding Vary: Accept to the response.
If the Vary: Accept header is absent, the same file is delivered regardless of the header. To check a batch of images, a small script can be used that sends three HEAD requests for each URL and displays the format, size, and Vary header for each client. However, it's crucial to note that not all tools fetch images using a browser-like Accept header, resulting in the "old browser" version being retrieved instead.
This can lead to incorrect reports of issues that the visitor never experiences. Additionally, some servers may respond differently to HEAD requests compared to GET requests. When testing on multiple widths, the format can also change, which should be considered. It's essential to verify which Accept header the tool used when reading an image audit, as the numbers reported may not reflect what visitors actually see.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.