Issue with serving WebP to unsupported browsers /Safari/

Performance
#1

Dear Forum,

I’ve read multiple articles here how to fix the issue with cached WebP being served on non-supported browsers such as Safari.

I’ve read ideas such as adding inline JS to the HTML and also having both .jpg and .webp on the server so the JS can request those for the user agent.

However all of our images are on a CDN, they by default serve images correctly for different browsers, however CloudFlare caches them and serves them non-supported browsers.

Our domain is www.minoar.com and images are located at www.images.minoar.com

I am not the most tech person so I guess it would be possible to set some rules or probably workers that can help in our case? We use APO and we are on the free plan.

I will appreciate any feedback and guidance how to sort this out as I’ve read all articles and I still don’t get how to avoid such issue.

Thank you in advance!

#2

I have not inspected your traffic, but the description indicates you need to create a Vary for Images rule.

https://developers.cloudflare.com/cache/how-to/enable-vary-for-images

#3

There is a lot of options you can go with

  1. In pro plan you get support for vary now you can even cache webp from cloudflare
  2. Use Custom CDN like cloudfront with vary for only images and then use imagify for converstion of webp and add rewrite rules to server
#4

Thank you all for the replies!

I will then consider including the vary with the pro plan. For the moment I just disabled webp.

Thank you again. I wish you all the best.

1 Like