Webp image issue in Firefox and safari due to caching

pagerules
caching
wordpress

#1

Hi,
I want to server webp images to supported browsers, here is rule for that,
i have checked it not work with caching so i have already added rule to by pass caching for image,


its working fine serve webp images chrome and normal image in Firefox, but after some days, it also also starts serving to Firefox and safari, and it creates issue, so i have to login in cloudflare and purge then account cache and then it loads ok, is there any solution for this issue ?

Htaccess rule for webp images,

BEGIN EWWWIO

RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$ RewriteCond %{REQUEST_FILENAME}.webp -f RewriteCond %{QUERY_STRING} !type=original RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_URI}.webp [T=image/webp,E=accept:1,L] Header append Vary Accept env=REDIRECT_accept AddType image/webp .webp # END EWWWIO

#2

I don’t think that’s a valid matching pattern. I wish it were. That would sure save on Page Rules. The Match has to be a single test.

If you’re on the Pro plan (or above), are you using Polish to deliver WebP? I’m pretty sure it doesn’t change the file extension. It just delivers the WebP with the .jpg or .png extension, but tells the browser it’s actually TYPE WebP.

That Rewrite you’ve attached might be the problem, as it’s changing the Type on your server. If the first cache test is from Chrome, your server is going to tell Cloudflare to pull the WebP version, then that get cached in place of the JPG. The next visitor who hits that same cache is going to get that WebP version from Cloudflare’s cache.


#3

Hi sdayman,

I don’t think that’s a valid matching pattern.

please tell me right matching pattern.

Those rules are added by this plugin an working properly,

Also i have added rule to bypass Cloudflare’s cache for image,so it should not cache images.

If you are right about 2nd visit it servers webp then, it should show webp for Firefox and safari, but its working fine currently, the problem starts after some days as i mentioned.


#4

You would need three separate rules, one for each match:
Match example.com/.jpg (Bypass cache)
Match example.com/.png (Bypass cache)
Match example.com/.jpeg (Bypass cache)


#5

Hi sydayman,
I have updated rules

Now this image loads as webp
https://www.5starpresent.com/wp-content/uploads/2018/05/Smart-Watch-510x510.jpg

This image loads as jpg
www.5starpresent.com/wp-content/uploads/2017/11/13696-9586b0d68473fbfc1dbe8beb8d94af90-247x247.jpg

www.5starpresent.com/wp-content/uploads/2017/11/14511-59004c53471e9ba8aaaaf33005eddc38-247x247.jpg

and many other images still loads as jpg, can you let me know why it happens ?


#6

Smart-Watch loads as type jpeg for me. I bet a lot of your stuff is still in the cache. Go to the Cloudflare Cache page and Purge Everything.


#7

I again Purge Everything


#8

Ok…when I load Smart Watch in Firefox, it’s Type jpeg. When I load it in Chrome, it’s Type webp

For those 247x247 images, they’re pretty small in JPG form and WebP might not be an improvement so they’re left alone. This is how Cloudflare’s Polish feature works.


#9

Hi sdayman,
I have cloudflare free account from siteground so Polish feature is not active, that why i have disabled caching and serves webp image from my server,
but it not loads for some image may be due to page rules ?


#10

I was trying to suggest that EWWW might not convert some images to WebP if there’s no savings.

When I visit in Firefox, they’re all type JPEG. In Chrome, I’m seeing WebP and JPEG. I’m not sure if Lazyloading might be interfering, but for now, it looks like your Page Rules are working.


#11

waiting for some day to check if problem occurs again or not.


#12

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