How to Optimize Your WordPress Website Images

Published by Sam Wilson on

Knowing how to optimize your WordPress website images can go a long way to improving the overall speed and performance of your website.

Indeed, for every image file that is on your site, a visitor’s web browser needs to send what’s known as a HTTP Request to your web hosting server, asking it to load up those files so that the browser can render them.

The more requests a server receives, the bigger the files it has to deliver, the slower your website takes to load in that browser. As you’ll likely know yourself from your own web-browsing experience, nobody likes to wait more than a few seconds for a site to load, and in most cases will simply leave if that site takes too long.

As a WordPress website owner, it goes without saying that the last thing you want is for visitors to leave your site. Naturally then, your first thought might be to reduce the number of HTTP requests to as few as possible. If that’s the case, you might be interested in taking a look at our in-depth tutorial – How to Reduce HTTP Requests to Your WordPress Website.

That said, there is more you can do to increase the loading speed of your website, and today we’re going to look at just one of them; optimizing your images by reducing the file size, thereby making each image quicker to load.

Ready? Let’s Get Started.

Step 1: Download the ShortPixel Image Optimizer WordPress Plugin

Nice and simple to start with, either search for the ShortPixel Image Optimizer from the plug-in directory on your WordPress platform, or head straight to the relevant page at https://wordpress.org/plugins/shortpixel-image-optimiser and download it to your hard drive.

If you’ve opted for the former, you’ll be automatically able to upload it from within WordPress, and skip ahead to Step 4. If, like us, you’re downloading and installing manually, let’s continue to Step 2.

Step 2: Install the Plugin

With the file downloaded, head to your Plugins page, which you’ll find located towards the bottom of the dark-grey, left-hand menu on your WordPress Dashboard. Your plugin page should look something like ours in the image above.

First up, hit the ‘Add New’ button in the top-left of your screen. This will bring up a new screen which looks like the one below and which features some of the most popular, commonly installed plugins. For now, we want to click the ‘Upload Plugin’ button highlighted in the following image.

Add a New Plugin to WordPress

There isn’t much to do on the next page except scroll down to the ‘Choose File button’ and search your computer hard drive for the zip file containing your plugin. It’s important to note here that you need to upload the full zip file, rather than extracting it and uploading the individual files.

If you’ve done things correctly, your screen will likely look something like this:

When you’ve got your file, hit Install and let WordPress take you to the next page.

Step 3: Activate the Plugin

Another nice and easy step. On the next page, you should see that WordPress has successfully installed the plugin, and now simply needs you to activate it. Again, if you’ve done everything right, your screen should look something like this:

The next thing you need to click is the ‘Activate Plugin’ link, which we’ve highlighted with a red circle in the above image. Click that, and you’ll be taken back to the main plugins page where we can start putting ShortPixel Image Optimizer to work on reducing your page load speeds.

Step 4: Grab Your API Key

In order to use ShortPixel, you’ll need to set up an API key on the plugin’s official website.

Get an API Key for ShortPixel

When you return to your Plugins page, you should see a notification like the one above. Click the link labelled ‘signup’ to be taken to the website.

If for some reason you don’t see this, you can head directly to the site at https://shortpixel.com/wp-apikey. Once there, you’ll see a screen which looks like the one below. All you need to do from here is enter your email address and hit the button labelled ‘Get API Key.’

ShortPixel – Enter your email addressWith that done, just go to your inbox, and look for the email from ShortPixel. This may take a minute or two to arrive, and it may well land in your spam or junk folder, so be sure to check there if you don’t see it.

Step 5: Install Your API Key

When the email arrives, it will look like the one below, with your actual API written in place of the white box in our illustration. Copy it, and then either go to your WordPress and click on the plugin’s settings page, then head back to WordPress.

Get Email

On your main Plugins page, scroll down until you find ShortPixel, then click the ‘Settings’ button. We’ve highlighted this in the image below.

Activate ShortPixelOn the next screen, you’ll be presented with a box where you can enter the API Key you copied from the email. Go ahead and enter that now, and then click Validate. We’ve found that this process normally takes a few seconds, but once it’s done, that’s all there is to it.

Validate API Key for ShortPixel

Step 6: Check Your ShortPixel Settings

The default settings for ShortPixel are shown in the image below. Many of you may well be happy with those settings exactly as they are. If that’s the case, scroll down, hit the ‘Save and go to Bulk Uploader’ button, then please wait a moment whilst we catch you up.

In our case, we’ve changed the compression type from lossy to lossless, simply because a lot of the images we’re using are highly detailed, and we don’t want to lose any of that detail when new images are optimised by the plugin.

ShortPixel – Edit Settings

Change yours to whatever works for you, and then hit the ‘Save and go to Bulk Upload button’ and let’s optimize some of those images we’ve already used.

Step 7: Optimise Your Images

On the next screen, the Bulk Upload page, you’ll again be asked to confirm the type of images you want to optimize, and given the opportunity to tweak a few settings.

We recommend leaving these just as they are, then hitting the ‘Start Optimizing’ button to begin the process.

Start Optimising

The process then begins, and may take anywhere from under a minute to several hours depending on both the number of images on your site and the original size of them.

If you don’t have much else going on in your life, you can always just sit there and watch the process tick by. A better option however, is to simply leave that browser tab open, and leave ShortPixel doing its thing in the background whilst you go on and take care of other things, like reading the rest of our tutorial on reducing HTTP requests for example.

Optimise Your Images

Whilst you’re doing that ShortPixel will continue to run in the background. When it’s done, all of your images will continue to deliver the same high quality without taking as long to load.

What’s more, any future images you upload will automatically go through the ShortPixel optimizer plugin before they’re ready to use, so you can guarantee that you’re working with full optimized images from here on in, and start looking forward to much faster page speeds.

How can we help you today?

Enjoyed this tutorial? Think we could do better? Is there something you’re having trouble with that you’d like our experts to help you out with by producing one of their popular step-by-step guides? Why not leave us a comment below? We take all your suggestions seriously as part of our efforts to make Top 10 Website Hosting the number one resource for webmasters.

Until next time, thanks for reading and happy optimizing.

Categories: Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *