Using Cloudflare = can’t have webp background images in CSS?

Hi @objektivdigital,

Also, are you directing image traffic through your .htaccess/nginx.conf, or are you using different settings?

No, I am not using Apache or nginx rules to server WebP because Cloudflare only supports varied response in the business plan (as far as I remember but could be wrong.)

WebP Express:
Operation Mode: CDN Friendly
Destination folder: Mingled (required to use Cache Enabler)
File ext: Append

Cache Enabler:
Under Cache Behavior > Variants > [Enable] Create an additional cached version for WebP image support

And in case I need support for external CSS files I install Fast Velocity Minify to inline the CSS so that Cache Enabler can update URLs. I understand that is not always possible specially if you have a lot of CSS on a large website, so that leaves us with 2 options:

1. Either we use FVM filter to update URLs in CSS – but then we will have to create 2 files for WebP supported and non-supported browsers.
2. Use service worker to return WebP whenever JPG/PNG is requested – service workers do not work in Firefox Private window.

If you are looking for the quickest method and you can not use inline CSS option:
1. Uninstall FVM (you don’t need it) – you can still keep Cache Enabler to replace some URLs in cached file or not.
2. Create a service worker in the WP root/installation directory – here is an example
3. Add following to your functions.php:

add_action('wp_head', function() {
	?>
<script>
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    	console.log('ServiceWorker registration successful with scope: ', registration.scope);
	}).catch(function(err) {
    	console.log('ServiceWorker registration failed: ', err);
	});
}
</script>
<?php
});

Where /service-worker.js is the file that you created in step 2 in the WP root directory.

Note: You can use the exact service worker from the example but you need to replace line 20 with this: let url = new URL(request.url + '.webp')

That’s because we need to append .webp to the original file name instead of replacing .jpg or .png.

If you are just curious or want to use a non-JS based solution:

– You can use FVM to create different files for webp and non-webp browsers
– Take a look at fast-velocity-minify/fvm.php and fast-velocity-minify/functions.php
– Filter to modify code: fvm_after_download_and_minify_code

You will have to modify stylesheet handlers in order to generate separate cache files. So, it is possible to use Cache Enabler + FVM + external CSS setup as well but that is a bit complex and takes more time.

I hope this is helpful.

@objektivdigital – just wondering, did it work for you?

@objektivdigital – you can create a custom plugin which copies the service worker JS file to WP root and inserts the inline-JS required using wp_head hook. You wouldn’t have to worry about anything, just ask your employees to install that plugin and activate it. Personally I don’t think there are many options for you other than that. You would still have to support old browser versions even if browsers (Safari) adds WebP support in their latest versions.

@objektivdigital happy to help! 🙂