{"id":732,"date":"2024-05-07T11:42:21","date_gmt":"2024-05-07T11:42:21","guid":{"rendered":"https:\/\/kb.shortpixel.com\/docs\/can-i-use-shortpixel-adaptive-images-with-cloudflare\/"},"modified":"2025-08-27T08:44:46","modified_gmt":"2025-08-27T08:44:46","password":"","slug":"can-i-use-shortpixel-adaptive-images-with-cloudflare","status":"publish","type":"docs","link":"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/can-i-use-shortpixel-adaptive-images-with-cloudflare\/","title":{"rendered":"How to use Cloudflare with ShortPixel Adaptive Images"},"content":{"rendered":"
\n

Read this information first<\/h2>\n

If you have enabled WebP and\/or AVIF in the plugin settings<\/p>\n

<\/p>\n

and <\/b>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<\/code> 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<\/code> header sent by the browser.<\/p>\n

To solve this problem, you have three options:<\/p>\n

    \n
  1. Either purchase a plan from Cloudflare and configure the Vary header appropriately<\/a>,<\/li>\n
  2. or disable both<\/b> formats, WebP and\/or AVIF,<\/li>\n
  3. or simply use ShortPixel's default CDN, which is among the fastest in the market<\/a>.<\/li>\n<\/ol>\n<\/div>\n

    \n\t<\/a><\/em>If you want to use Cloudflare as your CDN when using ShortPixel Adaptive Images<\/a>, instead of ShortPixel’s CDN, follow these steps:<\/p>\n

      \n
    1. \n

      Log in to your Cloudflare account.<\/p>\n

      Select your website and then the\u00a0DNS<\/strong>\u00a0section from the side menu.<\/p>\n

      <\/p>\n

      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<\/code> .mywebsite.com.<\/p>\n

      Following the previous example, add a new CNAME<\/strong> record\u00a0from img.mywebsite.com<\/code> to no-cdn.shortpixel.ai<\/code> :<\/p>\n

      <\/p>\n

      Remember that img<\/code> \u00a0should be changed to something else if it's already used by another CNAME, like images<\/code> .mywebsite.com or media<\/code> .mywebsite.com<\/p>\n

      \n

      The small cloud must be orange<\/strong>\u00a0in order for you to use the CDN features offered by Cloudflare.<\/p>\n<\/div>\n

      Wait 5 minutes<\/strong> for Cloudflare to complete all the technical tasks in the background.<\/p>\n

      Take any image URL from your site, append it to https:\/\/img.mywebsite.com\/spai\/q_lossy+ret_wait\/<\/code> \u00a0and make sure that the new URL can be accessed. Example:<\/p>\n

        \n
      1. If your website is called mywebsite.com, your new CNAME on Cloudflare is img.mywebsite.com<\/code> , and your sample image is https:\/\/www.mywebsite.com\/wp-content\/uploads\/2022\/04\/image.jpg<\/code> ,<\/li>\n
      2. try calling this URL: https:\/\/img.mywebsite.com\/spai\/q_lossy+ret_wait\/https:\/\/mywebsite.com\/wp-content\/uploads\/2022\/04\/image.jpg<\/code> <\/li>\n
      3. \n

        Can you view it without errors? Continue with the next step.<\/p>\n

        Go to\u00a0Settings > ShortPixel AI > Behaviour and enter https:\/\/img.mywebsite.com\/spai<\/code> in the API URL<\/strong>\u00a0field<\/p>\n<\/li>\n

      4. Replace mywebsite.com<\/code> \u00a0with your actual domain<\/strong> name.<\/li>\n
      5. \n

        Replace the img<\/code> \u00a0part if your subdomain is different, like configured above.<\/p>\n

        <\/p>\n<\/li>\n<\/ol>\n<\/li>\n

      6. \n

        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):<\/p>\n

        <\/p>\n

        <\/li>\n

      7. Clear your WordPress cache: How to clear WordPress cache<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

        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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[35],"glossaries":[],"doc_tag":[],"class_list":["post-732","docs","type-docs","status-publish","hentry","doc_category-shortpixel-adaptive-images"],"blocksy_meta":[],"year_month":"2026-04","word_count":457,"total_views":"1988","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin","author_nicename":"admin_mdli53m5","author_url":"https:\/\/kb.shortpixel.com\/author\/admin_mdli53m5\/"},"doc_category_info":[{"term_name":"ShortPixel Adaptive Images","term_url":"https:\/\/kb.shortpixel.com\/knowledge-base\/category\/shortpixel-adaptive-images\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/comments?post=732"}],"version-history":[{"count":1,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/732\/revisions"}],"predecessor-version":[{"id":2562,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/732\/revisions\/2562"}],"wp:attachment":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/media?parent=732"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_category?post=732"},{"taxonomy":"glossaries","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/glossaries?post=732"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_tag?post=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}