• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
BlogAid Logo

BlogAid

Help for DIY Site Owners and Webmasters - WordPress, SEO, HTTPS, Security, and Performance

  • Home
  • Blog
    • Current Posts
    • Helpful Posts
  • Tips Tuesday
  • Site Services
    • Happy Clients
    • Setup, Backups, Fixes
    • Site Service Requests
    • Site Audits
      • What’s In the Audit
      • Audit Request Form
    • HTTPS Conversion
      • About the Service
      • HTTPS Request Form
  • Resources
    • Plugins
    • Helpful Posts
    • Site Resources
    • Start Here with BlogAid
  • Classes
    • Happy Clients
    • All Classes
    • DIY SEO Course
    • Webmaster Training
  • Videos
  • About
    • About MaAnna
    • Happy Clients
    • Privacy Policy and Terms of Use
  • Contact
    • General Contact
    • Site Service Requests

How to Test Image Optimization for Faster Page Load Speed

January 13, 2018 by MaAnna Stephenson

TwitterFacebookPinterestLinkedinRedditWhatsApp

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.

TwitterFacebookPinterestLinkedinRedditWhatsApp

Filed Under: Speed

About MaAnna Stephenson

MaAnna is a geek who can still speak in plain English. She helps DIY site owners plus webmasters and designers create sites that are secure, perform well, and get noticed by search engines and readers.

  • Facebook
  • Google+
  • LinkedIn
  • Pinterest
  • RSS
  • Twitter
  • YouTube

This book could save you hundreds of dollars and months of frustration. Get it free with your subscription to BlogAid News plus my blog posts.
Privacy Policy



Reader Interactions

Comments

  1. Olivier Rebiere says

    January 14, 2018 at 4:30 am

    And…. Another nugget from MaAnna !!!
    Yes, she is a recidivist LOL :-)
    Thank you again for these info :-)

    Amicalement,
    Olivier.

    • MaAnna Stephenson says

      January 14, 2018 at 9:40 am

      You’re welcome Olivier!

  2. Rick Rouse says

    January 14, 2018 at 7:42 am

    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

    • MaAnna Stephenson says

      January 14, 2018 at 9:43 am

      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.

      • Rick Rouse says

        January 14, 2018 at 12:20 pm

        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!

        • MaAnna Stephenson says

          January 14, 2018 at 1:48 pm

          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.

          • Rick Rouse says

            January 14, 2018 at 2:26 pm

            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?

          • MaAnna Stephenson says

            January 14, 2018 at 2:44 pm

            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.

  3. Marilyn Lesniak says

    January 14, 2018 at 11:52 am

    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!

    • MaAnna Stephenson says

      January 14, 2018 at 12:19 pm

      Didn’t even think about that Marilyn!!!

      Glad it’s going to make your life easier. :-)

  4. Tipper Pressley says

    January 16, 2018 at 10:24 am

    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.

    • MaAnna Stephenson says

      January 16, 2018 at 10:34 am

      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.

  5. Charlie Sasser says

    June 5, 2018 at 2:40 pm

    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?

    • Charlie Sasser says

      June 5, 2018 at 2:43 pm

      Sorry wrong post. whoops!

    • MaAnna Stephenson says

      June 5, 2018 at 2:58 pm

      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

Primary Sidebar

This book could save you hundreds of dollars and months of frustration. Get it free with your subscription to BlogAid News plus my blog posts.
Privacy Policy

Hi! I'm MaAnna, and a geek who can still speak in plain English. I help DIY site owners plus webmasters and designers create sites that are secure, perform well, and get noticed by search engines and readers. How May I Help You?

Let’s Connect

  • Facebook
  • Google+
  • LinkedIn
  • Pinterest
  • Twitter
  • YouTube

Looking for Something?

Search by Category

Footer

BlogAid News

This book could save you hundreds of dollars and months of frustration.

Get it free with your subscription to BlogAid News plus my blog posts. Privacy Policy

From the Blog

  • Free Social Share Button Plugins: The Best and Worst to Use
  • Scriptless Social Sharing Plugin: Best Settings for Speed and Looks
  • Tips Tuesday – Video is Huge, 2 Free Webinars, Social Share and Pinterest Case Study Update
  • Tips Tuesday – Sticky Bar Plugins, Gutenberg Phase 2, Safely Update Plugins
  • Tips Tuesday – Site Speed, Protect Images, Google and PDFs, WP 5.1 Security
  • Tips Tuesday – Site Security, MediaVine Research, Genesis 2.8, Gutenberg Phase 2
  • Collection #1 Data Breach and Your Site Security
  • Genesis 2.8 Promises a New Theme Experience

© 2019   Blog Aid · WordPress for Non-Geeks · All Rights Reserved

Disclosure: Some of the links on this website may be affiliate links. When you make a purchase from these links, I earn a small commission.
While commissions allow me to keep this site 100% free, I only endorse products I trust and use for myself and clients.