Feature Request - Cloudflare on Umbraco Cloud not supporting Vary by Accept headers

[lakesol]

Issue description

We have implemented automatic support for webp images based on the Accept header for an image.

So the code implementation will return the original file (png, jpg etc) when the client requests from the server with a "Accept" request header NOT containing "webp"

If a requests comes from a client with "webp" in the "Accept" request header the umbraco implementation converts the original image to webp format and returns that.

The issue then come is because Cloudflare caches media items. - Both png/jpg and webp

As we know the way Cloudflare works, when it gets a request for an image url, it looks for a cache hit within it own cache, if it finds a hit it returns the cached result from the edge. If a cache miss it request the file form the origin server, caches the response and forwards the response to the client.

But if Cloudflare ignores cache control headers, if the 1st person to request an image supports webp and then a 2nd person request the same image asset without support for webp, they will be returned the 1st cached webp response. This client would then have an issue as the file format would not be supported.

My research showed that Cloudflare supports the "Vary" response header which when "Accept" is set, Cloudflare will cache 2 versions of the file, 1 for webp support and 1 without webp support.

Our implementation sets the "Vary" response headers as you can see in the below screen shot

You will see in the screenshot that the Cloudflare cache status was a hit, but the "Accept" request did not include "webp", yet the cached response was the webp format

So it looks like Cloudflare is ignoring the "Vary" header and only caching 1 version of the media files.

My understanding from Umbraco Support is that as the Cloudflare implementation is custom with Umbraco, vary by accept is not enabled. They also asked me to raise this request here.

Can we have an option to enable Vary by Accept Header feature please?

Thanks
Ian

[sajumb]

Thanks for the feature request.
Sure, we can make that happen. We will consider the task and make an update within the next week or so. We will post an update in this thread when the change has been added to the production environment.

[lakesol]

Thanks for the update Soren

[sajumb]

Hi @lakesol
We have taken a closer look at this feature request. We have found that Cloudflare basically ignores the Vary header when caching is enabled (as you also seem to conclude in your thorough investigation), which makes it difficult for us to support the "Vary by accept" header for cached elements.

However, we can support the "Vary" header without the referenced files being cached. All files that do not have an associated "Vary" header will of course still be cached as before.

It will be a solution model that we can implement within a few days.

Will this solution work for you?

[lakesol]

I don't think this will be of any use in this use case. We could set cache control headers on the media content so its not cached by Cloudflare. However all this does in realty is push the load back on to the origin server, which Cloudflare is there to avoid in the 1st place.

Its odd that they are not supporting you in this as they have announced the feature (back in 2021).

https://blog.cloudflare.com/vary-for-images-serve-the-correct-images-to-the-correct-browsers/

So I think that you should not waste your time on this at this date.

I will look at alternative ways to render the media in modern file formats. Any suggestions?

[lakesol]

@sajumb Are you able to ping me an email, you can find my details in your partner DB?

Ian

[sajumb]

Hi Ian,
Sorry for my late reply.
I talked with one of our cloud developers regarding alternative ways of rendering the media in modern file formats. He suggested looking at the Picture HTML element where it is possible to add multiple sources with different type attributes also to add ?format=webp etc to the paths.

[jdpnielsen]

Since preloading of images based on Picture element type is not yet possible, movement on getting Vary by Accept supported would be great.