Cache Everything and Webp in Safari

I encountered an issue with Cache Everything and Edge Cache TTL when using a WebP cache that occurs in Safari Browser.

Just want to alert others as the solution is very simple.

Safari does not currently support WebP images. There was expectation that Safari v. 14 would support WebP but this did not happen.

If you only check your Chrome Browser you may thing that eveything is fine.

But meanwhile, if you have WebP cache enabled and cached html, Safari Users may have pages that may fail to load images. With dynamic html this is not an issue, Safari will be served jpeg images. But with cached html Safari may be served with unsupported WebP files that do not display and can block rendering the page.

Disable WebP cache in your caching plugin and everything will be fine.

Check in GTmetrix that all images are served as jpeg once WebP cache is disabled.

It is not enough to just uncheck WebP in Polish in your Cloudflare settings.

Make sure to turn it off in your caching plugin as well and then reset the plugin cache.

Just by the way, there was no change to GTmetrix scores or speed.

Peter K.

  1. Safari 14 (at least in Big Sur) supports WebP.
  2. The Safari problem isn’t that it won’t load .webp (it won’t), but the common method for serving webp is to keep the .jpg/.png filename, but replace the file with a webp of the same extension, then change the filetype. Cloudflare will cache the .jpg regardless of the filetype, and that’s what messes up Safari.
  3. Because of this, the html isn’t really the issue, either. But, if your site changes the extensions in html and you Cache Everything (HTML) here, that will mess up Safari.
  4. Polish won’t convert to WebP and deliver to Safari because Safari won’t tell Cloudflare it Accepts WebP.

To sum up, don’t do WebP at the server unless it’s handled in HTML with .webp extensions and you haven’t mucked with Cache Everything here. And it’s always ok to use WebP in Polish.

3 Likes

Thank you for the in depth explanation of the exact problem with Safari and WebP.

Do you have another suggestion other than turn off WebP cache in WP Rocket?

Cache Everything is working correctly, as long as WebP cache is off in WP Rocket.

I understand the potential benefits of WebP compression, but I in my particular case I can live without it.

I size all my images to actual size I intend to use them in Photoshop, and then optimize in Imagify.

My jpeg files are typically around 50k each. I don’t think I was getting much benefit from WebP anyway.

Currently I have WebP images enabled in Imagify, WebP cache disabled in WP Rocket, and on in Polish.

Do you recommend any changes to these settings?

When I check in GTmetrix all images are delivered as jpeg.

Thanks,

Peter K.

This topic was automatically closed after 30 days. New replies are no longer allowed.