Optimize Images for WordPress: How to Use Shortpixel to Speed Up Your Website
Learning how to optimize images for WordPress is a necessary step in the overall strategy of optimizing a website for speed, ensuring fast page load times for your visitors.
Website optimization involves several subjects and is critical to building a successful website. The faster your content loads, the better user engagement you will create.
That’s why I use Kinsta hosting and documented my entire onboarding experience. However, using a fast host and with a CDN are only two pieces of the optimization puzzle.
This is a post about optimizing images for WordPress and how I used Shortpixel to do it, and these are the results.
PageSpeed Score
Before: Grade B (89%)
After: Grade A (92%)
Fully Loaded Time
Before: 2.2 seconds
After: 1.5 seconds
Total Page Size
Before: 1.70MB
After: 904KB
Why Optimize Images for WordPress?
First, it’s important to talk about what optimizing images actually means. Most bloggers are getting their images from one of three places:
- A free stock image service
- From their iPhone or Android devices
- A graphics creation program or service like Canva
The problem with images is that the file size is almost always very large. When an image with a large file size is included in a blog post (most of the time multiple images), your visitors’ web browser must load that image from your hosting server.
The larger the file size of that image file, the longer it can take to load on a webpage. The end result is that your visitor has to wait longer for your awesome content to load and be read.
You want to make your image file sizes smaller so they load faster on your pages, without degrading the quality of the image. You might also like to read this case study showing the increase in page load time after optimizing images.
What Does Optimizing Images Actually Do?
A description from the imagekit.io website:
The process of optimizing images can involve changing an image to the right format, the image dimensions, and resolution while keeping the smallest possible file size. Image optimization can be done in different ways be it by resizing the images, caching or by compressing the size.
Put simply, optimizing your images will make their file sizes smaller and load faster on your website.
How to Optimize Images for WordPress with Shortpixel
There are several great image optimization services and plugins for WordPress, but today we’ll focus on Shortpixel. It’s a service I use myself and I’ve met a few people from their team.
I trust them and want to support what they’re doing. Something important to note when doing business on the internet. But I digress…
Step One: Determine How Images are Affecting Your Website Speed
The first step in the image optimization process is to know how images are affecting your website’s page load time. It’s very easy to do with performance testing tools like GTmetrix or Pingdom.
For this tutorial, I’m focusing on the main page of this site. This page contains two large images as row backgrounds and as you’ll see, the list of recent blog posts and their featured images also come into play.
I already knew these images are larger than they need to be, but this is confirmed by the GTmetrix grade of D on the optimize images line item.
If we expand those results, we’ll get details on what images are affecting the speed and also some other information worth noting.
- A potential percentage of file size savings.
- A link to see an example of an already optimized version.
The goal is to increase my image optimization Grade to C, B, or ideally A. So let’s get to it and see what happens!
Step Two: Install and Activate the Shortpixel Plugin
If you’re not sure how to search for, install and active plugin in your WordPress site, please see my tutorial (with screenshots and video).
Step Three: Get a Shortpixel API Key or Enter an Existing One
Step Three:
After activating the plugin, you’ll see the Shortpixel Plugin Settings page. This page includes a few tabs…
- General
- Advanced
- Cloudflare API
- Statistics
- WP Resources
The General Tab
Enter your API key in the API Key section. Shortpixels’ recommended settings are checked by default.
Feel free to browse through the rest of the tabs and explore other settings. I’m going to be using the default settings as a logical place to start.
Step Four:
Click the Save and Go to Bulk Process button.
Step Five:
Shortpixel will scan all of your images and let you know how many can be optimized. Click Start Optimizing.
Step Six:
Now sit back and wait while Shortpixel runs the image optimization process.
Step Seven:
Shortpixel let me know there were some images with errors and that a few thumbnails weren’t able to be optimized.
Relevant details were displayed and I was able to Restart Optimizing easily.
Step Eight:
Run GTmetrix again and view the results. In a word: AWESOME.
WordPress Image Optimization Speed Test Results
The numbers speak for themselves.
PageSpeed Score
Before: Grade B (89%)
After: Grade A (92%)
Fully Loaded Time
Before: 2.2 seconds
After: 1.5 seconds
Total Page Size
Before: 1.70MB
After: 904KB
This is proof positive that along with using a fast host and a CDN (Content Delivery Network), WordPress image optimization is an important piece of the of the overall website speed optimization process.
Can I Ask a Favor?
If you’ve enjoyed this post and found value in me sharing my experience, I’d love if you’d consider letting me know.
Comments are open below. Or I can be found on Twitter @wpmodder
If you’d like to read more of my articles about WordPress, marketing, or running a website as a business, I welcome you to sign up via email below.
Don't get left behind. Join over 6,000 other WordPress-powered blog and business owners.
Receive actionable plugin and marketing tutorials for your WordPress-powered business. All quality. No bullshit.