Hello, I’m running into the same issue as
https://community.cloudflare.com/t/how-to-cache-optimized-images-from-nextjs/407772: I’m using Next.js’ own image optimization, which in summary works by exposing assets on URLs such as
/_next/image/*.PNG but then responding with WEBP or AVIF images based on the request’s
Accept header value.
The issue is that Cloudflare only caches the first response, with whatever format it happened to contain, it doesn’t care about the
Accept header of following requests. This results in AVIF images being served to Edge or Safari, which don’t support AVIF, or unoptimized images being served to Firefox or Chrome, which do support the “latest and greatest” AVIF format.
When the server responds with webp or avif rather than the requested images’ initial format, it appends the
accept value to the
Vary response header. This led me to believe that Vary for images (
https://developers.cloudflare.com/cache/about/vary-for-images/) could be the solution to this issue. However, it didn’t work, and it seems that it’s not really for “images”, rather it’s only compatible with Cloudflare’s own “Images™” image optimization service. I hope my understanding is wrong but if it is correct then I must say that I find Cloudflare’s documentation to be a bit misleading.
Either way, I’m at the end of my wits. Does anybody know how to make Cloudflare play nice with Next’s built-in image optimization? Or am I forced to use Cloudflare’s own image optimization?