CloudFlare serving WebP to FireFox when Polish is off, images do not render

bug
#1

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…

https://www.dadsworksheets.com/worksheets/multiplication.html

…and typically the top logo banner will fail to render, as well as numerous images in the content down the page.

Any help or insight would be appreciated.

#2

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?

#3

The logo for example is a regular PNG and appears to be served as such

image

#4

This is what I’m seeing here…

28
Screenshot 2019-01-17 12.45.28.png861×682 92 KB

#5

As I mentioned, the behavior is somewhat erratic. Even on a single page load, some images will be served as WebP, some will serve as PNG or JPEG.

There are not WebP files on the origin server at all.

And again, when I flip CloudFlare into Developer Mode it all goes away.

:frowning:

#6

There are. The image you posted earlier for example is a WebP image. Check the page’s code, there are plenty of WebP references.

#7

Nope. On the origin server…

[email protected]:/var/www/html$ find . -name \*.jpg -type f | wc -l
40818
[email protected]:/var/www/html$ find . -name \*.png -type f | wc -l
3558
[email protected]:/var/www/html$ find . -name \*.webp -type f | wc -l
0
#8

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.

#9

Just because you dont have such files in the filesystem does not mean you dont have them linked ;).

I cant a comment on your filesystem and I didnt, I referred to your HTML code. Again, check that please.

#10

HTML file hot off the origin server…

09
Screenshot 2019-01-17 13.34.09.png944×368 38.1 KB

Seriously, there are no WebP files anywhere, not in the code, not on the file system.

#11

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?

#12

Here’s what I’m seeing coming in FireFox…

11
Screenshot 2019-01-17 13.37.11.png1038×377 76.4 KB

#13

Right. I get that. Totally.

But I’m trying to figure out why the WebP stuff is getting injected. That’s actually the problem.

It only happens when CloudFlare’s caching is on, which suggests to me it’s somehow related to CloudFlare serving the file.

I do not have any CloudFlare applications running.

#14

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 :man_shrugging:

Website visitors unable to see images in Safari
#15

ARRGHH.

Okay, I figured it out.

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!

#16

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.

#17

Ah yeah looks like you got it sorted… ignore me.

#18

Thanks casharff… Yes, seems good now.

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.

Either way updating this…

…to reflect that image optimization in mod_pagespeed has some compatibility problems with FireFox and Safari might be a good hint. :slight_smile:

closed #19

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