WebP URLs and Force WebP

If you have enabled Ludicrous Mode, you'll find a couple extra WebP options for advanced use cases. So, what are these options for? Let's address WebP URLs first, and then come back around to Force WebP, which is our last resort. Again, these options are only available in Ludicrous Mode, though they will be auto-configured if you use WP Offload Media.

WebP URLs

The WebP URLs setting is needed by JS WebP & <picture> WebP Rewriting if your image URLs (addresses) are rewritten to point at your CDN before WebP rewriting happens. The WebP parser needs to reverse engineer your URLs back to file-system paths, so that it can check if a .webp image exists. For example, it would try to convert https://example.com/wp-content/uploads/2024/10/image.jpg to something like /var/www/wp-content/uploads/2024/10/image.jpg so that it can check to see if /var/www/wp-content/uploads/2024/10/image.jpg.webp exists. It does so by replacing your normal site URL (https://example.com) with the location of your website on your server (/var/www/ in the example). BUT, if your images are on a CDN like cdn.example.com, then the plugin needs to know that it should look for cdn.example.com instead of just example.com.

*Note that WebP URLs will not be visible unless you've selected JS WebP or <picture> WebP.

So, let's say your CDN domain is cdn.example.com, then you would simply enter https://cdn.example.com/ in the WebP URLs setting.

However, if you use a different folder on your CDN than you do on your server, then you need to include the folder too. If your CDN image URLs look like https://cdn.example.com/files/2024/10/image.jpg compared to https://example.com/wp-content/uploads/2024/10/image.jpg, then you want to add https://cdn.example.com/files/ in the WebP URLs.

What was that about Force WebP?

As mentioned, none of this will work if you do not have local copies of your images. To get around that requirement, you first need to use the Force WebP option to make EWWW IO create WebP versions of every image on your site. Do NOT use Force WebP for any other purpose! If EWWW IO didn't save a WebP version of an image, it's because the WebP version was larger than the original. Larger images will slow down your site, and that's not what anyone wants. Okay, end rant...

Order, Order...

First, you need to add your CDN URL in the WebP URLs box. Do not enable JS or <picture> WebP until after you have used the bulk optimizer to create copies of all your images in the WebP format, or you'll have broken images on your site.

Once you have WebP copies of all your images, enable JS WebP (or <picture> WebP), so that the plugin will rewrite any images that match the URL patterns you’ve listed. Both options will provide a fall-back for older browsers, so you can go do cartwheels (or whatever you enjoy)!