ShortPixel Image Optimizer can be used to deliver WebP and AVIF images even if a website uses Cloudflare. For this to work, you must have the “Using the <PICTURE> tag syntax” option enabled in Settings > ShortPixel > Advanced, as shown below:
Both sub-options can be used:
You can also use the second option ("Without altering the page code (via .htaccess)"), but in this case you need to consider the following:
- It does not work for websites with Cloudflare's free plan.
- If you have a paid plan from Cloudflare, you need to make sure it supports the
Varyheader and is properly configured to deliver WebP and/or AVIF from the same URL based on browser capabilities so that it knows (and caches and delivers accordingly) that there are 2 different files to deliver for the same URL depending on theAcceptheader sent by the browser. Here's how to do it.