My site is rendering incorrectly on FireFox 64.0.2 on MacOS 10.14. Numerous images are showing up blank, and when inspecting these images in the Nework tab of FireFox’s developer tools, I can see these images are being served through Cloudflare and being converted from JPEG files to WebP.
FireFox 64 does not support WebP images. Cloudflare shouldn’t be serving this image format to those browsers.
The behavior is erratic. Not all images are being optimized to WebP. However, quite often it’s the logo banner on the site and it looks quite bad.
When I put Cloudflare into developer mode, the problems go away.
I’m on the Free plan, so Polish in the ‘Speed’ tab is obviously disabled and I wouldn’t expect Cloudflare to be doing ANYTHING to the images on the site.
A sample URL that’s behaving problematically for me would be…
From what I can tell it appears the example URL contains WebP images to begin with. It does not seem as if they were converted by Cloudflare. Could you point to a particular image?
The logo URL on those pages is referencing the PNG file in the local image directory, which doesn’t have that hashed up name. So something is generating both the WebP variant and updating it when the HTML is served.
Again, you are looking at the file system, to which I obviously dont have access. You need the check what the browser receives and there are plenty of WebP references.
Cloudflare does not rewrite image links, so if it does not come from the file system you must have somewhere else something that generates these WebP links. Only possible explanation related to Cloudflare could be a Cloudflare application. Do you have one of these configured/installed on your account?
All these URLs look as if they are generated dynamically. My guess would be something on your server converts these images on the fly, but not knowing your setup I cant say that for sure of course.
I am still pretty confident that it is not a Cloudflare issue, but you could try purging your Cloudflare cache anyhow
I do apparently have mod_pagespeed running on the site. Apparently when Cloudflare goes to pickup the data off the site, mod_pagespeed thinks it’s okay to serve it webp images, and then Cloudflare caches those and is serving them to users running browsers that dont t support webp, because, duh, that’s what the origin served up.
I disabled pagespeed on the server, restarted Apache, turned Cloudflare dev mode back off and cleared the cache, and viola, consistent images served in FireFox now.
I’ll go figure out how to configure pagespeed to not do the png/jpg to webp conversion.
Thanks for your help walking me through this, Sandro!
Based on your description it is likely there is a process on your server which is converting images to WebP on the fly when the image is requested by a browser which supports WebP. You should turn that process off as Cloudflare is caching the returned file and when a browser which doesn’t support WebP requests that file it is getting the version that was converted on the fly on your machine/ cached on Cloudflare.
Not sure how it all works exactly, but would be nice if somehow mod_pagespeed understood when Cloudflare did an origin pull that it shouldn’t serve stuff that isn’t broadly compatible, but I realize that’s on me for having it configured that way.
