How to use Cloudflare with ShortPixel Adaptive Images

Read this information first

If you have enabled WebP and/or AVIF in the plugin settings

and are using Cloudflare's free plan, there may be problems with serving the correct format for browsers. This is because your CDN must support the Vary header (which is not available in Cloudflare's free plan) and be configured to deliver the original format, the WebP version and/or the AVIF version from the same URL, depending on the browser's capabilities, so that it knows (and caches and delivers accordingly) that there are two different files to deliver for the same URL, depending on the Accept header sent by the browser.

To solve this problem, you have three options:

Either purchase a plan from Cloudflare and configure the Vary header appropriately,
or disable both formats, WebP and/or AVIF,
or simply use ShortPixel's default CDN, which is among the fastest in the market.

If you want to use Cloudflare as your CDN when using ShortPixel Adaptive Images, instead of ShortPixel's CDN, follow these steps:

Log in to your Cloudflare account.
Select your website and then the DNS section from the side menu.
Think of a name for the subdomain from which you want the images to be delivered. For example, if your domain is mywebsite.com, you could choose img .mywebsite.com.
Following the previous example, add a new CNAME record from img.mywebsite.com to no-cdn.shortpixel.ai :
Remember that img should be changed to something else if it's already used by another CNAME, like images .mywebsite.com or media .mywebsite.com

The small cloud must be orange in order for you to use the CDN features offered by Cloudflare.

Wait 5 minutes for Cloudflare to complete all the technical tasks in the background.
Take any image URL from your site, append it to https://img.mywebsite.com/spai/q_lossy+ret_wait/ and make sure that the new URL can be accessed. Example:
1. If your website is called mywebsite.com, your new CNAME on Cloudflare is img.mywebsite.com , and your sample image is https://www.mywebsite.com/wp-content/uploads/2022/04/image.jpg ,
2. try calling this URL: https://img.mywebsite.com/spai/q_lossy+ret_wait/https://mywebsite.com/wp-content/uploads/2022/04/image.jpg
3. Can you view it without errors? Continue with the next step.
  Go to Settings > ShortPixel AI > Behaviour and enter https://img.mywebsite.com/spai in the API URL field
4. Replace mywebsite.com with your actual domain name.
5. Replace the img part if your subdomain is different, like configured above.
Clear the CSS cache from the WordPress Toolbar (only relevant if you have enabled the "Replace in CSS files" option in ShortPixel AI's settings):
Clear your WordPress cache: How to clear WordPress cache