How to Test Image Optimization for Faster Page Load Speed

Proper image optimization is the biggest bang for the buck you can get for faster page load time.

And there is no plugin that can hold a candle to you fully optimizing an image prior to upload. In fact, most of those plugins don’t even work.

In this video I’ll show you where to get a super tutorial for better image optimization and how to test that your process is working well.

Links Mentioned

• BlogAid Resources
• Webpage Test
• Compressior.io
• Hypothyroid Mom post

Pinterest Widget

Are you using a Pinterest or Facebook widget in your sidebar?

See how they are killing your page load speed and great alternatives to use.

Subscribe to the BlogAid YouTube Channel for more helpful tips.

Transcript

A link to the best image optimization tutorial I’ve ever seen can be found on the BlogAid Resources page.

Click on the Top Posts link.

Then click on the Image Optimization post link.

That will take you to The Digital Marketing Deva and a super image optimization post by Mary Iannotti.

Be sure to read through the whole post about:

• sizing images correctly
• choosing the right file type
• links to multiple stage compression tools

You’ll also see a Photoshop tutorial that walks you through the optimization steps.

And then at the bottom is a bonus optin with even more tutorials on lots of different free apps like:

• GIMP
• PicMonkey
• FileOptimizer
• Compressor.io
• And more

Okay, let’s run a test on one of your current images.

We want to get a baseline for our tests, so we are going to create a new, blank page on our site.

Go to new page.

Give it a title.

And publish it.

Get the URL of the page.

Now let’s jump over to my favorite online performance tester, WebPage Test.

Input the URL.

Set the Test Location to somewhere in the middle of the country, like Lincoln Nebraska.

I tend to get to the front of the testing queue from that location than on the coasts.

Select Chrome as the Browser because it is the pickiest of them all.

Then click the Advanced Settings drop down.

Normally I run at least 3 tests with repeat view to get accurate performance results.

But for this image test, we don’t need to do that, and we want the test to run faster.

So, set number of tests to 1 and then select First View Only.

Then uncheck the Capture Video box.

Then click the Start Test button.

It could take a minute or two to run, and will return a results page. We sped it up for this video.

Click the Details link.

This brings up the waterfall and you can see all of the items that are loading.

We want to scroll to a place below the waterfall and just above the Connection View.

Click the View all images link.

These are all of the images, in order, that are loading on your page.

As you can see, I have quite a few images in my sidebar.

This is super important to be aware of because most site owners only think about the content on the page or post, not all of the static content in the header, sidebars, and footers. All of those contribute to your page load time as well.

Okay, here’s what we’re after. The file size of our image.

That’s different from the display size.

We don’t care how big the image is, we care about the how big the file size is.

This first one is 4.5 KB, which is a rather small file.

And we don’t see any notifications that we could have done better with our optimization. We’ll see that in a moment.

Okay, so now we have our baseline and we’re familiar with the images that are loading.

Let’s jump back to our site.

Let’s embed an image on our test page.

My client Dana Trentini of Hypothyroid Mom was kind enough to let me borrow one of her original images prior to it being optimized.

Once that is uploaded, Update the page.

Now return to your tab with WebPage Test open.

Click the Summary tab

And then click the button to Re-run the test.

Click Details.

And then scroll below the waterfall to the View All Images link and click it.

It’s likely the embedded image won’t be the first one to load, so scroll down the list until you find it.

As you can see, this image’s file size is 111.2 KB, which is not too bad.

But here’s the clue that it could be better.

WebPage Test assumes that the optimization quality setting used on this image was 100%.

And it calculates that if that setting were dropped to 85%, you could squeeze another 40.5 KB out of this image and still have the same high quality look.

Now, that’s just a calculated guess on the tester’s part and has nothing to do with the real quality settings and such that you may have actually used.

The point is, the tester is detecting that the file size is not fully optimized.

At this point, you want to put that same image through the tutorials in Mary’s post to see how much smaller you can make the file size.

Once you think you’ve got it, then save it as a different file name and upload to your test page and run it through WebPage Test again.

I’m going to run this image through Compressor.io.

As you can see, it cut the file size in half.

As you move your mouse over it, you can see that the image quality on the split screen looks the same to me.

So, I’m going to download this file.

And then embed that in the page.

And then run the test again.

Here’s our new image at 57 KB file size.

And here’s the original at 111 KB.

Half the size, half the load time, and the quality is the same.

Now, when you multiple this speed by every image on your page, you can see how it will radically impact your page load time and make it way faster, just by optimizing your images.

Now, before you go bonkers with optimizing old images, be aware that each image has a link. When you upload an image, it is stored folders by year and month, and those become part of the link to the image.

So, to optimize old images without breaking links, you would need to download them from those folders, run them through the optimization process, and then save them as the exact same file name, and then reupload to the same folder.

That’s a LOT of manual labor.

I have folks on my team that do bulk image optimization for about $0.04/100 images. That’s super inexpensive and will save you a ton of time.

More importantly, it will make your whole site so much faster. And that’s going to make your site visitors super happy.

And, you’ll be able to get rid of one more plugin on your site now too, if you used one to smush your images.

Just start optimizing all new new images as you go from now on.

I hope you’ve enjoyed this tutorial on optimizing your images prior to upload for faster page load times.

Be sure to subscribe to the BlogAid YouTube Channel for more helpful tutorials just like this.

And be sure to visit BlogAid.net for even more site success tips.