Vary for images caching not working with JPEG-XL

Developers API
1

For Workers & Pages, what is the name of the domain?

What is the issue or error you’re encountering

Cf-cache-status is BYPASS when image/jxl response is provided, but once image/avif is provided it does not respond with image/jxl anymore on supported devices

What are the steps to reproduce the issue?

I have setup vary for images caching with the following configuration:

"https://api.cloudflare.com/client/v4/zones/<zone>/cache/variants" \
--header "X-Auth-Email: <email>" \
--header "X-Auth-Key: <key>" \
--header "Content-Type: application/json" \
--data '{"value":{"jpeg":["image/avif","image/jxl","image/webp","image/jpeg","image/png"],"jpg":["image/avif","image/jxl","image/webp","image/jpeg","image/png"],"avif":["image/avif","image/jxl","image/webp","image/jpeg","image/png"],"webp":["image/avif","image/jxl","image/webp","image/jpeg","image/png"],"png":["image/avif","image/jxl","image/webp","image/jpeg","image/png"]}}'

In the documentation I could find that JXL file extension unfortunately isn’t listed. However nothing about whether or not mime-type image/jxl is accepted yes or no.

Because of this when browsing the website using Safari you could initially get image/jxl images but once someone visits using for example Chrome the image/avif variant would be cached and the Safari user would no longer get the uncached image/jxl format.

2

Vary for Images is a bit of a pain in the a**.

The order of accepted mime types in the Accept header is treated as an order of preference by Vary for Images.

Accept header from iPhone:

Accept:image/webp,image/avif,image/jxl,image/heic,image/heic-sequence

This means

  • a) Cloudflare expects your origin to always respond with the mime type that’s first in the accept header, if you have a variants rule for it.
    In your case, the client accepts webp in first place, and you have a variants rule for webp, so Cloudflare will not cache any formats other than webp. That’s why you get a BYPASS when your origin responds with jxl.
  • b) (not sure on this one, writing from memory) as soon as an image is cached, the cached image will be used to respond to all requests that accept that type. That’s what Vary for Images is for, after all.

Tbh, i’d rather write a Snippet to parse the Accept header myself rather than use Vary for Images.

3

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.