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.
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:
- Log into your WordPress admin panel.
- Select Plugins from the left menu and click Add New.
- In the Search box, type "ShortPixel Adaptive Images" and click Search Plugins.
- Click Install Now, and then activate the plugin after the installation completes.
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, and allows the capability to use an unlimited number of images with Shortpixel AI for free. 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.
- Log into your StackPath Control Portal.
- Click the Create Site button.
- Create a Domain Name for the subdomain from which the ShortPixel AI images will be served from. Tick the CDN box under available services.
- Select Webserver as your source, and set the Hostname/IP Address to 220.127.116.11.
- 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).
- 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 root domain of the actual website.
- Log in to the WordPress admin panel for the website.
- Navigate to the ShortPixel AI settings by hovering over the Settings tab on the left menu bar and selecting ShortPixel AI.
- Click on the Advanced tab at the top. In the API URL text box, enter the URL for the subdomain 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 already assumes that there is a static assets integration already in place for the root domain
- Log into your StackPath account.
- Select the CDN Site that ShortPixel will be serving images for.
- 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 18.104.22.168.
- Confirm that the Host Header field is filled with the website's URL.
- Click the CDN tab on the top menu bar. Under Cache Handling, change the settings to reflect the following image:
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 of ShortPixel AI, please do not hesitate to ask in support chat, available 24/7 or through firstname.lastname@example.org.