{"id":701,"date":"2024-05-07T11:41:48","date_gmt":"2024-05-07T11:41:48","guid":{"rendered":"https:\/\/kb.shortpixel.com\/docs\/can-i-use-a-different-cdn-with-shortpixel-adaptive-images\/"},"modified":"2025-08-27T08:46:43","modified_gmt":"2025-08-27T08:46:43","password":"","slug":"can-i-use-a-different-cdn-with-shortpixel-adaptive-images","status":"publish","type":"docs","link":"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/can-i-use-a-different-cdn-with-shortpixel-adaptive-images\/","title":{"rendered":"Can I use a different CDN with ShortPixel?"},"content":{"rendered":"\n<div class=\"callout-blue\">\nIf all you want to do is <strong>a custom subdomain<\/strong> to deliver the images, and you don&#8217;t care about what CDN is used, we recommend you using the default ShortPixel&#8217;s CDN and follow <a href=\"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/how-to-serve-the-images-from-a-custom-domain\/\">this tutorial<\/a> instead.\n<\/div>\n\n\n\n<div class=\"callout-blue\">\nFor increased security, if you want to specify which domains can serve images from your CDN, you should follow <a href=\"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/how-to-serve-the-images-from-a-custom-domain\/\">this tutorial<\/a> instead.\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Requirements<\/h2>\n\n\n\n<div class=\"callout-yellow\">\n<h3>&#8216;Vary&#8217; header<\/h3>\n<p>If you have enabled WebP and\/or AVIF in the plugin settings, there may be issues serving the correct format for browsers. This is because your CDN must support the <code>Vary<\/code> header (which, for example, is not available on Cloudflare&#8217;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&#8217;s capabilities. This ensures the CDN knows (and caches and delivers accordingly) that there are two or three different files for the same URL, based on the <code>Accept<\/code> header sent by the browser.<\/p>\n<p>Therefore, if you are not able to set up the <code>Vary<\/code> header, you have two options:<\/p>\n<ol>\n<li>Either disable <b>both<\/b> formats, WebP and\/or AVIF,<\/li>\n<li>or simply use ShortPixel&#8217;s default CDN, which is among <a href=\"https:\/\/www.cdnperf.com\/\" target=\"_blank\" rel=\"noopener\">the fastest in the market<\/a>.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"callout-red\"><h3>SSL certificate<\/h3>Please note that if you&#8217;re <strong>not<\/strong> using Cloudflare as CDN, then you must make sure that your CDN is able to handle the SSL certificate for the custom subdomain you&#8217;ll use, so you can have the API URL with <code class=\"inline-code\">https<\/code>. If they cannot handle this, a certificate error will occur. <strong>Please contact your CDN provider if you need help with this<\/strong>.<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Steps<\/h2>\n\n\n\n<p>If you want to use your own CDN when&nbsp;using <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" rel=\"noopener\">ShortPixel Adaptive Images<\/a> (SPAI) or <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noreferrer noopener\">ShortPixel Image Optimizer<\/a> (SPIO), instead of ShortPixel&#8217;s CDN, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Think of a suitable subdomain name for the delivery of your images, such as <code class=\"inline-code\">cdn<\/code>, <code class=\"inline-code\">img<\/code>, <code class=\"inline-code\">images<\/code>, <code class=\"inline-code\">media<\/code>, and so on. For example, if your website is <code class=\"inline-code\">example.com<\/code> and you choose <code class=\"inline-code\">img<\/code> subdomain, your images will be served from <code class=\"inline-code\">img.example.com<\/code>.<\/li>\n\n\n\n<li><strong>Edit your <\/strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Domain_Name_System\" rel=\"noopener\"><strong>DNS records<\/strong><\/a> to&nbsp;add a <a href=\"https:\/\/en.wikipedia.org\/wiki\/CNAME_record\" rel=\"noopener\">CNAME<\/a> from <code class=\"inline-code\">cdn.example.com<\/code> to <code class=\"inline-code\">no-cdn.shortpixel.ai<\/code>. This step might be slightly different depending on what CDN you use. <span style=\"font-size: revert; background-color: transparent; color: var(--theme-text-color); font-family: var(--theme-font-family); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">Remember that&nbsp;<\/span><code class=\"inline-code\" style=\"font-size: revert; color: var(--theme-text-color); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">example.com<\/code><span style=\"font-size: revert; background-color: transparent; color: var(--theme-text-color); font-family: var(--theme-font-family); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\"> &nbsp;should be changed to your actual domain, and that&nbsp;<\/span><code class=\"inline-code\" style=\"font-size: revert; color: var(--theme-text-color); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">cdn<\/code><span style=\"font-size: revert; background-color: transparent; color: var(--theme-text-color); font-family: var(--theme-font-family); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">&nbsp;should be changed to something else if it&#8217;s already used by another CNAME, like&nbsp;<\/span><code class=\"inline-code\" style=\"font-size: revert; color: var(--theme-text-color); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">images<\/code><span style=\"font-size: revert; background-color: transparent; color: var(--theme-text-color); font-family: var(--theme-font-family); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">.example.com or&nbsp;<\/span><code class=\"inline-code\" style=\"font-size: revert; color: var(--theme-text-color); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">media<\/code><span style=\"font-size: revert; background-color: transparent; color: var(--theme-text-color); font-family: var(--theme-font-family); font-style: var(--theme-font-style, inherit); font-weight: var(--theme-font-weight); letter-spacing: var(--theme-letter-spacing); text-transform: var(--theme-text-transform);\">.example.com<\/span><\/li>\n\n\n\n<li><strong>Enable the CDN for your subdomain.<\/strong> After adding the CNAME record, you need to activate the CDN service for your custom subdomain. Many CDN providers require this step to properly handle requests and issue SSL certificates.\n<ul class=\"wp-block-list\">\n<li>If you&#8217;re using <strong>Cloudflare<\/strong>, make sure that the <strong>orange cloud<\/strong> is enabled for the CNAME record in your DNS settings.<\/li>\n\n\n\n<li>If your CDN provider allows setting an <strong>origin<\/strong>, use <code>no-cdn.shortpixel.ai<\/code> as the origin for the custom subdomain (e.g., <code>cdn.example.com<\/code>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Make sure<\/strong> the new record (<code>cdn.example.com<\/code>) works as expected with an online tool like <a href=\"https:\/\/www.whatsmydns.net\/\" rel=\"noopener\">whatsmydns.net<\/a>.<\/li>\n\n\n\n<li>Change the CDN domain \/ API URL on the WordPress settings.\n<ul class=\"wp-block-list\">\n<li><strong>If you are using SPAI<\/strong>, navigate to your WordPress dashboard and go to <strong>Settings &gt; ShortPixel AI &gt; Behavior &gt; API URL<\/strong>. There, change the default URL to <code>https:\/\/img.example.com\/spai<\/code> where <code>img.example.com<\/code> is the subdomain that you&#8217;ve set up above.<br><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250206_103803.jpg\" alt=\"\"><\/li>\n\n\n\n<li><strong>If you are using SPIO<\/strong>, navigate to your WordPress dashboard and go to <strong>Settings &gt; ShortPixel &gt; WebP\/AVIF &amp; CDN<\/strong> and enable the &#8220;Deliver the next generation images using the ShortPixel CDN&#8221; option. There, change the default URL to <code>https:\/\/img.example.com\/spio<\/code> where <code>img.example.com<\/code> is the subdomain that you&#8217;ve set up above.<br><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250206_104010.jpg\" alt=\"\"><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div class=\"callout-yellow\">Please make sure you <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-to-clear-wordpress-cache\/\" rel=\"noopener\">flush your website&#8217;s cache<\/a> (whichever is applicable &#8211; caching plugin, server cache, CDN cache, and browser cache).\r\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cloudflare\">Examples<\/h2>\n\n\n\n<p>Here you will find instructions on how to do the previous steps for the most important CDN providers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/463-how-to-use-bunny-net-with-shortpixel-adaptive-images\" rel=\"noopener\">How to use bunny.net with ShortPixel Adaptive Images<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/221-can-i-use-shortpixel-adaptive-images-with-cloudflare\" rel=\"noopener\">How to use Cloudflare with ShortPixel Adaptive Images<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/200-setup-your-stackpath-account-so-that-it-can-work-with-shortpixel-adaptive-images-api\" rel=\"noopener\">How to use StackPath with ShortPixel Adaptive Images<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/464-how-to-use-amazon-cloudfront-with-shortpixel-adaptive-images\" rel=\"noopener\">How to use Amazon CloudFront with ShortPixel Adaptive Images<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/575-how-to-use-fastly-with-shortpixel-adaptive-images\" rel=\"noopener\">How to use Fastly with ShortPixel Adaptive Images<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/576-how-to-use-keycdn-with-shortpixel-adaptive-images\" target=\"_blank\" rel=\"noopener\">How to use KeyCDN with ShortPixel Adaptive Images<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>If all you want to do is a custom subdomain to deliver the images, and you don&#8217;t care about what CDN is used, we recommend you using the default ShortPixel&#8217;s CDN and follow this tutorial instead. For increased security, if you want to specify which domains can serve images from your CDN, you should follow [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[35,37],"glossaries":[],"doc_tag":[],"class_list":["post-701","docs","type-docs","status-publish","hentry","doc_category-shortpixel-adaptive-images","doc_category-shortpixel-image-optimizer"],"blocksy_meta":[],"year_month":"2026-04","word_count":700,"total_views":"1695","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\/"},{"term_name":"ShortPixel Image Optimizer","term_url":"https:\/\/kb.shortpixel.com\/knowledge-base\/category\/shortpixel-image-optimizer\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/701","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=701"}],"version-history":[{"count":8,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/701\/revisions"}],"predecessor-version":[{"id":1862,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/701\/revisions\/1862"}],"wp:attachment":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/media?parent=701"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_category?post=701"},{"taxonomy":"glossaries","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/glossaries?post=701"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_tag?post=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}