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
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.
And…. Another nugget from MaAnna !!!
Yes, she is a recidivist LOL :-)
Thank you again for these info :-)
Amicalement,
Olivier.
You’re welcome Olivier!
Awesome post as usual, MaAnna!
My blogs typically only have one image per post, but those images were pretty hefty in terms of file size and they were really slowing down my page load times.
About a year ago I installed a plugin (can’t remember which one) that compressed all the images that were already on my blog. I then removed the plugin and started compressing each image with Compressor.io before I upload them.
I love Compressor.io because I can just Ctrl-click a bookmark to open the page in my browser, drag the image onto it and then drag the compressed image back to my desktop from the downloads folder. Really fast and it allows me to avoid using an extra plugin.
In my opinion this is one of your best tips ever.
Thanks!
Rick
Thanks Rick! You have to be super duper careful with those optimization plugins. I’ve heard some horror stories from clients that make a living from their images and them being all messed up. And it’s a one way trip!! Can’t easily undo the damage. That’s why I strongly advise getting manual bulk optimization. You can run a test first and determine the quality setting and check it before doing them all.
That’s great advice, MaAnna. The images on this blog were small (all 300 pixels wide) and the compressed images turned out just fine from a visual standpoint. I had backed up the database ahead of time just in case something went wrong. Luckily, it didn’t.
Which brings up another point. I believe it’s a good practice to back up the database before making any blog-wide changes like this. It’s pretty tough to “roll back” a change when there’s nothing to roll back to.
I can certainly understand the caution about compressing large, hi-res images though, especially if the images themselves are the main focus of the blog.
Sounds like your team’s image optimization service would be the best way to go for those types of blogs (and for anyone else who doesn’t want to back up their blog ahead of time).
Keep up the great work!
All good points, Rick, except for one thing.
Your images are not held in the database!!!!!!!!!!!!!!!!
You really need to invest in a whole site backup solution, and with something that not only gets everything, but also gets specific items, which will make it super easy for you to restore just that.
I’m really liking UpdraftPlus for the way it segments all of the different elements on your site. And it’s super easy to restore those elements.
See my series of posts on UpdraftPlus, starting with this one that tells about the different versions and what they include.
Thanks for that clarification, MaAnna. I use the free version of UpdraftPlus to download local backups to an external hard drive on my PC and VaultPress for cloud backups. Do you think that’s a good backup strategy or would you recommend something else?
With both you are missing some files that are outside WP, like .htaccess, which may have critical directives such as redirects and HTTPS stuff. So, be sure that you manually download that. I also recommend getting your robots.txt too. And I usually get the wp-config.php file, just ‘coz.
Unless you have a really big site, you can do all you need, including the files above, with the premium version of UDP. Amazon S3 is a super duper place to send the files. See my tutorial on setting up and AS3 account and bucket.
I used to have VP, but dropped it in favor of UDP premium, as it does it all for me.
Woo hoo!!! This has been a thorn for me from iPad and no flash player. I am now able to resize, compress, and rename my images without a plugin! Bye bye two more plugins. Thx MaAnna!
Didn’t even think about that Marilyn!!!
Glad it’s going to make your life easier. :-)
Now I want to go look at all my photos and make sure they’re compressed enough : ) Thank you for a great post-and for mentioning the possibility of hiring someone to optimize the old ones.
Display size is not the same thing as file size. You won’t be able to tell if the file size is compressed enough by looking on your phone.
All you’ll be able to check is the display size on your responsive theme.
Thanks for the heads up on NamCheap for free privacy listing. I wonder if this is a direct result of GDPR and GoDaddy will follow suit?
Sorry wrong post. whoops!
That’s a good question, Charlie!! NameCheap is a serious competitor of GoDaddy for domains.
If enough folks leave over this, they may get the message.
And yes, think GDPR inspired this move by NC, but it has nothing to do with actual compliance.
And the post you were thinking about where this was reported was this week’s Tips Tuesday