One best practice in modern website design is to ensure your site design adapts to the device and browser size the user is using. In the past this used to require a fair amount of custom engineering work, but these days most WordPress themes and many website builders include this functionality by default. So it’s easy to ensure that your site looks beautiful across devices, but often the performance cost of responsive design is not taken into account.
How WordPress Handles Images
On a typical WordPress site when you upload an image WordPress automatically creates a series of smaller thumbnails at different sizes. These differently sized images are intended to be used in different places, for example you might show a full size 1,200 pixel wide image as the featured image on a blog post, a smaller 480 pixel wide image on your blog listing page, and perhaps an even smaller 320 pixel wide image when viewing related posts below your blog post.
The use of thumbnails in this way is a great first step to improving image performance, it means you’re not downloading overly large images when the design will only ever show a smaller version. However this still leaves a lot of performance on the table.
Resize to ViewPort
A good responsive design will show the image sized to the pixel level for the site you’re viewing. If you’re on a desktop now, give it a try and resize your browser window smaller and larger, and notice how the featured image on this page scales smoothly up and down. Now imagine that multitude of possible device screen and browser window sizes that your users are using. In most cases, the large 1,200 pixel wide featured image is much larger than it needs to be.
That’s where resizing an image at site load to the user’s viewport size can reduce the size of the image even further and speed up your website load. So rather than downloading the full sized image, if the user’s browser is only 600 pixels wide they’ll get a smaller sized image at 600 pixels. Reducing the size of the image by 2-4x, or even more.
Shortpixel Adaptive Images
On WordPress the easiest and fastest way to accomplish this is with a plugin called ShortPixel Adaptive Images. When the user visits your site it will automatically detect the optimal size of the image to show, resize the image and send the smaller image to the user. The plugin will also cache the image on their content delivery network so if anyone requests the image at the same size in the future it can be delivered without any additional delay for their servers to resize the image.
It’s quite literally as easy as adding the ShortPixel Adaptive Images Plugin to your WordPress website, and then signing up for one of their modestly priced plans. Depending on your website traffic, for less than $10 you could speed up your website for months.
Settings Overview for ShortPixel Adaptive Images
If you’d like to further customize how ShortPixel works, there are a few useful options in settings. Most websites are fine with the defaults. If you’re running a photo website and want to ensure the photos are almost pixel perfect I’d recommend switching to the Glossy compression level, though I’ve seldom found the need to change it from the default Lossy setting.
I’d also recommend leaving the WebP support checked unless you’re experiencing issues. This will make use of the newer WebP format that some browsers like Chrome support to further optimize your images.
Cloudflare with Shortpixel
One of my favorite services is Cloudflare – the ins and outs of which are worth a longer series of articles just in itself. ShortPixel Adaptive Images is designed out the box to work great with Cloudflare. The benefit is that you’ll get to make use of Cloudflare’s extensive global content delivery network so the images loaded are delivered by a server even closer to the user.
Using Cloudflare is not required at all to get most of the performance benefits from using ShortPixel Adaptive Images.
There are two steps to setup Cloudflare to use ShortPixel Adaptive Images.
Create a DNS Entry in Cloudflare
Head over to your Cloudflare DNS page, and add a CNAME that points to no-cdn.shortpixel.ai
You can see in my example that I chose the creatively named cdn.technologypoet.com as my cname.
Update the API URL in ShortPixel Settings
Set the API URL to the cname you create and add /spai to the end. In my example this becomes https://cdn.technologypoet.com/spai
Click Save changes and you’re done
Now Cloudflare will serve images sized specifically to optimize the performance for the user who is viewing the image.
I also recommend turning Cloudflare Polish. If it’s on you’ll be compressing images twice which could reduce the quality further.
It’s also worth noting that Cloudflare has a similar feature to ShortPixel Adaptive Images called Image Resizing. You have access to this feature if you are on Cloudflare’s $200 a month business plan. Which at that price makes the modest cost of ShortPixel Adaptive Images even more attractive.
There you have it! Your site now loads faster, performs better in SEO because of the performance improvements and your users are happier.
Feel free to ask any questions you may have in the comments, I’m happy to help out.
