Read this information first #
If you have enabled WebP and/or AVIF in the plugin settings
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.
Therefore, you have three options:
- Either make sure your CDN supports the
Vary
header and is properly configured, - or disable both formats, WebP and/or AVIF,
- or simply use ShortPixel’s default CDN, which is among the fastest in the market.
If you want to use your own CDN when using ShortPixel Adaptive Images, instead of ShortPixel’s CDN, follow these steps:
- Think of a name for the subdomain from which you want the images to be delivered. For example, if your domain is example.com, you could choose
cdn
.example.com. - Edit your DNS records to add a CNAME from
cdn.example.com
tono-cdn.shortpixel.ai
. This step might be slightly different depending on what CDN you use.Remember that
example.com
should be changed to your actual domain, and thatcdn
should be changed to something else if it’s already used by another CNAME, likeimages
.example.com ormedia
.example.comPlease contact your CDN provider if you need assistance with this step.
- Make sure the new record (cdn.example.com) works as expected with an online tool like whatsmydns.net.
- Go to Settings > ShortPixel AI > Behaviour > API URL and enter the following URL:
https://cdn.example.com/spai
- Replace
example.com
with your actual domain name. - Replace the
cdn
part if your subdomain is different, like configured above. - 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 start withhttp
instead ofhttps
.
- Replace
Examples #
Here you will find instructions on how to do the previous steps for the most important CDN providers.
- How to use bunny.net with ShortPixel Adaptive Images
- How to use Cloudflare with ShortPixel Adaptive Images
- How to use StackPath with ShortPixel Adaptive Images
- How to use Amazon CloudFront with ShortPixel Adaptive Images
- How to use Fastly with ShortPixel Adaptive Images
- How to use KeyCDN with ShortPixel Adaptive Images