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:

  1. Either purchase a plan from Cloudflare and configure the Vary header appropriately,
  2. or disable both formats, WebP and/or AVIF,
  3. 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:

  1. 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, you could choose img

    Following the previous example, add a new CNAME record from to :

    Remember that img  should be changed to something else if it's already used by another CNAME, like images or media

    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  and make sure that the new URL can be accessed. Example:

    1. If your website is called, your new CNAME on Cloudflare is , and your sample image is ,
    2. try calling this URL:
    3. Can you view it without errors? Continue with the next step.

      Go to Settings > ShortPixel AI > Behaviour and enter in the API URL field

    4. Replace  with your actual domain name.
    5. Replace the img  part if your subdomain is different, like configured above.

  2. 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):

  3. Clear your WordPress cache: How to clear WordPress cache
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us