WebP Delivery with CDNs (Content Delivery Networks)

While any CDN will work with HTML-based WebP delivery methods, there are special considerations if you want to use server-based WebP rewriting with a CDN...

The Cloudfront CDN from Amazon (not to be confused with Cloudflare) can support server-based rewriting (unless it is used with S3, see next paragraph for that scenario). To enable Cloudfront to operate with any of the rewriting rules above, you need to make one small change in your Distribution settings. Under the Behavior tab, select the Behavior and click the Edit button. Choose Whitelist from Forward Headers, and then add the "Accept" header to the whitelist.

If you use Cloudfront with Amazon S3, it can get a bit more complicated (again), unless you use WP Offload Media. If you are using WP Offload Media, and have local copies of your images, you can simply enable JS WebP Rewriting, run a Bulk Optimize, and EWWW IO will auto-configure itself to work with your S3/Cloudfront URLs. If you use WP Offload Media, and do NOT have local copies of images on your web server, you need to enable the Force WebP option, run a Bulk Optimize, and then enable JS WebP Rewriting. Do it in that exact order to avoid broken images on your site.

If you use a different Cloudfront/S3 plugin or setup, you will need some more advanced magic via the WebP URLs and Force WebP settings.

In any case, the easiest method with Amazon S3 is to use Easy IO in front of your S3 bucket instead of Cloudfront, with no extra configuration.

StackPath & MaxCDN have an option within the zone/site settings to support WebP images as well. They don't create any .webp images, so you'll need to generate those on the origin/local server using the bulk optimizer, and then implement the .htaccess rules for Apache, or the above rules for Nginx.

BunnyCDN has an option within the Pull Zone Cache to Vary Cache based upon Browser WebP Support which allows you to use server-side rewrite rules in Apache/Litespeed & Nginx.

KeyCDN has a Cache Key WebP setting that works with the .htaccess rules for Apache, or the above rules for Nginx.

Cloudflare requires an HTML-based rewriting method or you can use their Polish feature, which is available on their paid plans.

Just like Cloudflare, the Cloudways CDN requires an HTML-based rewriting method.

If your CDN does not honor the Accept header, you should use one of our HTML-based rewriting options. The same applies if you have any sort of proxy/caching server that is in front of your actual web server.