ShortPixel Adaptive Images: StackPath CDN Setup Guide

ShortPixel Adaptive Images is a free, easy to use WordPress image optimization plugin that specializes in compression and provides the ability to resize, re-scale, and serve images in their original file format or in the next-gen WebP format.

There are two integration options when integrating ShortPixel AI with StackPath:

Full Site Integration

This is the recommended method and caches all site files on the StackPath CDN. A plugin is used to deliver images using ShortPixel.

Static Assets Integration

This integration method involves using a plugin to rewrite static asset URLs with the StackPath Edge Address. The ShortPixel CDN is used to serve a limited number of free images per month.

This tutorial assumes that the steps have been followed to create an initial StackPath Site.
The differences between site integration options are discussed in this article.

Preparation

The steps in preparing for the use of ShortPixel are the same regardless of which integration option is chosen.

To use ShortPixel AI to optimize and serve images, follow the steps below:

1. Log into your WordPress admin panel.
   
2. Select Plugins from the left menu and click Add New.
3. In the Search box, type "ShortPixel Adaptive Images" and click Search Plugins.
4. Click Install Now, and then activate the plugin after the installation completes.
   
5. Create an account with Shortpixel
6. Connect your domain with your Shortpixel account.
7. Upload your images to your Shortpixel account.

Using ShortPixel AI In A Full Site Integration

Full site integrations provide a method of using StackPath’s CDN to optimize and serve a website’s images, or assets only integration, which requires that ShortPixel AI’s CDN is used to do so. Performing a full site integration is recommended for SEO, security, while also taking the load off your server, and reduces DNS lookups.

In order to use the plugin with a full site integration, a second StackPath CDN Site will be created to optimize and serve the images. This is an ideal scenario for those who want to take advantage of automatic image resizing, serving images in the next-gen WebP format and automatic compression of served images without having to do the manual work typically involved in doing so.

Note: This section assumes that a full site integration is already in place for the root domain.

If the website is full site integrated, then we can utilize a subdomain to serve the ShortPixel-optimized images from via the StackPath CDN. To do so, follow the steps below.

1. Log into your StackPath Control Portal.
   
2. Click the Create Site button.
   
3. Create a Domain Name for the subdomain from which the ShortPixel AI images will be served. In this example, we are using shortpixel.stackpath.com. Tick the CDN box under available services.
   
4. Set the Hostname/IP Address to 176.9.21.54. This is ShortPixel's IP, this is where your shortpixel images will be hosted
   
5. After successfully creating the CDN site for the subdomain, navigate to the Settings tab on the top menu bar. Change the host header to the actual website's URL (if the root domain serving your website is https://example.com, change the host header to example.com).
   
6. Click the EdgeSSL tab located on the left, you will need to upload your own SSL certificates that covers this domain, or generate a free SSL certificate.
7. Copy the EdgeAddress that was generated for this site located in the top right of the portal.
   
8. Navigate to the website's managed DNS page (if using StackPath's, this will be done by clicking the DNS tab on the left menu bar). Create a CNAME record for the subdomain created to serve the images, and point this to the EdgeAddress you just copied.
   
9. Log in to the WordPress admin panel for the website.
10. Navigate to the ShortPixel AI settings by hovering over the Settings tab on the left menu bar and selecting ShortPixel AI.
11. Click on the Advanced tab at the top. In the API URL text box, enter the URL for the subdomain you created to be used to serve the ShortPixel images, and append /spai to the end of it, then click Save Changes.
    
    

Now ShortPixel will scan the website for all images, optimize them to the selected settings, and serve them over the created subdomain.

Using ShortPixel AI In A Static Assets Integration

Note: this section assumes that there is a static assets integration already in place for the root domain serving the other non-image static content that is going to be served by the short pixel plugin.

1. Log into your StackPath account.
   
2. Select the CDN Site that ShortPixel will be serving images for.
3. Select the Settings tab on the top menu bar, and under the Origin menu, click Edit next to the Address text field that shows the origin server's IP address. Change this field to 176.9.21.54. This is ShortPixel's IP, this is where your shortpixel images will be hosted.
   
4. Confirm that the Host Header field is filled with the website's URL.
5. Click the CDN tab on the top menu bar. Under Cache Handling, change the settings to reflect the following image:
   
6. Click the EdgeSSL tab located on the left, you will need to upload your own SSL certificates that covers this domain, or generate a free SSL certificate.

Images on the website will now be optimized and served via ShortPixel AI's image CDN. Take note that with this setup, 100 images per month can be served via the ShortPixel AI CDN before you must purchase a plan to continue serving images over their image CDN.

If any assistance or clarity can be provided during the setup to connect your StachPath account with  ShortPixel AI, please reach out via hi@stackpath.com.