Optimizing Images with Shortpixel AI

ShortPixel Adaptive Images (AI) uses a “new, improved, Adaptive Images replace engine that doesn’t need jQuery and it’s better optimized for new browsers,” but when I was building the Together We’re More site, I found that I actually needed to disable some of the plugin’s features on a per-picture basis. Here’s the why and how.

Why overriding ShortPixel AI’s engine was the right call

On the home page of the Together We’re More site, there are a number of images that have the same source but display at different sizes: the black “x” background, the light “weave” background, and the posts’ featured images.

Here’s a quick breakdown of image loads at the time of writing:

• Without ShortPixel, the home page loads 13 images at 7.8MB
• With ShortPixel (no config), the home page loads 36 images at 7.7MB
• With ShortPixel (properly configured), the home page loads 25 images at 1.9MB

So what’s going on?

One image, multiple times

ShortPixel AI does its best to deliver the perfectly sized image to each place on a page. However, this generates new URLs for every image—even if it’s the same image! This means that if a “featured image” gets used 3 times on a page but looks 3 different ways, ShortPixel will send that image 3 times! Thus, the network requests for the Together We’re More grew 276% Fortunately, because of the image compression, the total size of the network request actually shrunk a little, but still!

Configuring ShortPixel

On Shortpixel AI’s “Exclusions” tab (visible after enabling the “Advanced” toggle), there are a few places to handle how ShortPixel’s engine runs. The first three boxes are places you can add CSS selectors to handle what you want to handle.

Note: It would also be worth noting the special attributes to add to an image to avoid this tab entirely: “data-spai-eager, data-spai-noresize or data-spai-excluded, depending on which type of exclusion you need.”

I would argue it is smarter to add the data-attributes in the $args array of a WP image request, as then you are explicitly telling ShortPixel what to do, but because of the componentized nature of this site, there may be times when a section meant for the home page appears somewhere else, and then we would be bypassing ShortPixel unintentionally.

The benefit of using methods like get_featured_image and wp_get_attachment_image is that they give you two things for free:

1. Standardized WordPress image classes (for hooking into with the aforementioned “excluded selectors”
2. Auto-generated srcset and sizes (as of WordPress 6.7) based on the sizes you register

Next time you go to optimize a site’s images, examine what images are being called before blindly slapping on ShortPixel AI (like I tend to do!)