How to use Cloudflare with ShortPixel Adaptive Images

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

1. Log in to your Cloudflare account.
2. Select your website and then the DNS section from the side menu.
   
3. 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.
4. Following the previous example, add a new CNAME record from img.mywebsite.com to no-cdn.shortpixel.ai: 
   

   

   Remember that mywebsite.com should be changed to your actual domain, and that img should be changed to something else if it's already used by another CNAME, like images.mywebsite.com or media.mywebsite.com
   

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

5. Wait 5 minutes for Cloudflare to complete all the technical tasks in the background.

6. 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.

7. Go to Settings > ShortPixel AI > Behaviour and enter https://img.mywebsite.com/spai in the API URL field

   1. Replace mywebsite.com with your actual domain name.
   2. Replace the img part if your subdomain is different, like configured above.
      
8. Clear the CSS cache from ShortPixel AI's settings:
   

   

9. Clear your WordPress cache: How to clear WordPress cache