Can I use a different CDN with ShortPixel Adaptive Images?

Important note: ShortPixel Adaptive Images works correctly out-of-the-box, so configuring it to work with your own CDN should only be done if you have good technical knowledge.

If you want to use a different CDN than the default cdn.shortpixel.ai when using ShortPixel Adaptive Images, then please:

  1. Edit your DNS records to add a CNAME from "cdn.example.com" to "no-cdn.shortpixel.ai". This step might be slightly different depending on what CDN you use. Below you can see some examples, but we recommend you to contact your CDN provider so they can help you set this up.
    1. On the previous URL, replace "example.com" with your actual domain name.
    2. If "cdn.example.com" is already being used on your DNS records, you can change it to whatever you want, like "images.example.com" or "img.example.com".
  2. Make sure the new record (cdn.example.com) works as expected with an online tool like this one: https://www.whatsmydns.net/
  3. Go to Settings > ShortPixel AI > Behaviour > API URL and enter the following URL: https://cdn.example.com/spai
    1. Replace "example.com" with your actual domain name.
    2. Replace the "cdn" part if your subdomain is different, like configured above.
    3. Please note that if you're not using Cloudflare as CDN, then your CDN should be able to handle the SSL certificate so you can have the API URL with "https". If they cannot handle this, a certificate error will occur and your API URL should be "http" instead of "https".

Example - Cloudflare

Here is a step-by-step example on how to set up the CNAME (previous step 1) on Cloudflare. Please notice that we are not responsible for any changes made by Cloudflare that would invalidate the following steps. Therefore, if you encounter any issues while creating your new CNAME in your DNS records, please contact your CDN or hosting provider.

  1. Enter your Cloudflare account
  2. Select the DNS tag from the top menu.

  3. Add a new record following this example. 

    Remember that "your-domain.com" should be changed to your actual domain and that "cdn" should be changed to something else if it's already being used. Make sure the cloud is orange so you can use the CDN features offered by Cloudflare.

Example - BunnyCDN

WP Speed Matters created a very useful and short guide to help you set up BunnyCDN so it is used instead of our CDN to deliver your images: How to use BunnyCDN for ShortPixel Adaptive Images

Example - StackPath

Please follow this article to know how to configure SPAI to work with your CDN in StackPath: ShortPixel Adaptive Images: StackPath CDN Setup Guide

Example - Amazon CloudFront

First, you need to follow step #1 in the previous instructions. In CloudFront's case, this means going through the creation of a distribution: Working with distributions

While doing it, you should know that CloudFront, by default, does not send your CNAME as "Host" header, it sends "no-cdn.shortpixel.ai". In other words, you will see your images delivered from "no-cdn.shortpixel.ai" instead of your chosen CNAME (like "images.example.com"). To correct this, please follow these steps:

  1. Choose your distribution
  2. Choose the Behaviors tab
  3. Select the path you are using and then click on Edit
  4. Look for the option "Cache Based on Selected Request Headers" and select "Whitelist".
  5. Under "Whitelist Headers", add the header "Host" to the right column

  6. Click on "Yes, Edit" to save the changes.

Still need help? Contact Us Contact Us