Serving WebP correctly

caching
wordpress

#1

Hi. I use EWWW Image optimiser on WordPress sites - and have recently set it up to convert images to WebP for additional compression.

The rewriting between Jpg and Webp is handled by the following addition to .htaccess

# BEGIN EWWWIO
<IfModule mod_rewrite.c>
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]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
# END EWWWIO

Unfortunately this results in the Safari and other browsers that don’t support WebP sometimes getting served webp images masquerading as jpg from Cloudflare’s cache.

There is an option to use an alternative rewriting method in the plugin, that relies on output buffering - but that’s currently not compatible with our theme.

Is there a way to get this working properly from Cloudflare’s side,

Thanks,

Ian.


#2

Why not just let CF handle the conversion? Why do you need a secondary service to handle this for you?

I haven’t had any issues with CF’s conversions to WebP and Safari.

Edit: I just realized that this requires the CloudFlare “Polish” feature which is available at the “pro” level. I apologize if this doesn’t help. :frowning: I will say however that this is an awesome addition that does help with bandwidth consumption.


#3

@ems as you say, it’s a ‘pro’ tier feature.

Also to me, it makes sense to optimise the image at source - reduces the hard disk usage on the source hosting and ensures any images that aren’t loaded via Cloudflare are still optimised.


#4

Are you sure this saves disk usage on the source hosting? Looking at the .htaccess rule it appears image is optimized when the browser makes a request. So the size of the image on disk at host isn’t changed. If it’s not doing that, is it storing 2 copies? That still wouldn’t save disk space.

Could it be solved at Cloudflare? You could bypass/disable Cloudflare’s cache. Any other way to solve it on our edge beyond have Cloudflare do the conversion WebP conversion as part of the Pro plan would likely require a Business or Enterprise plan.


#5

@cscharff yes it makes 2 copies, for cross browser support. I meant in general the optimisation saves on space - vs. not running it all.

Thanks, assume I could also just setup a page rule to not cache jpegs / pngs (which still isn’t ideal) - rather than disable caching as a whole.


#6

Yes I believe that should work.


#7

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