WordPress Optimization 101 Optimize Images

Image optimization page speedImage optimization is again another very important part of optimizing your WordPress blog or site. Images add weight to the overall page load and so it is essential that we ensure the impact is minimal. This issue will cover all that you need to know about optimizing your images for maximum performance. To do this I will list a number of questions and answer them accordingly.

Is there really a difference between an optimized image and non optimized image?

Yes, there is a very noticeable difference in terms of  load times and initial load of a site that hasn’t optimized its images. There are a number of issues that occur as a result of non optimized images and they are as follows:

  • An image that isn’t scaled correctly forces the browser to re-size it within the HTML of the page, which WordPress generates for you and can be viewed by right clicking on your site and selecting view source. Each time the browser has to do this, it adds additional time to the overall loading of the page.

For example: If it takes 200ms to re-size an image uploaded at 200×150 but is displayed at 150×150, then 10 images will add 2 seconds to your load time.

  • An image that is simply too big in terms of bit size. There are several different formats that you can use for your images and selecting the right one can save you time and space. If you have an image at 150×150 there is no reason that image should be 1MB or even 100KB. Each KB of the image is added to the page size and the bigger the page size the longer it will take to load. As most WordPress sites are on shared hosting and some have disk-space/bandwidth limits, this is one area you can really go to town on and save resources.

Here is a list of formats typically used in WordPress and what they are used for.

.jpg – Used for images such as pictures like photographs.

.png – Used for graphical images such as banners, like the one used in a header or footer as well as logos.

.gif – Not used as much as it has largely been replaced by .png, similar uses to .png but not as good quality.

For more information read this post about different image formats.

How do we Know if we need to Optimize our Images?

You can you a simply online tool to determine what images are in need of a little work. GTmetrix is the perfect tool for this job.

Just simple add your domain in the box and click GO. A number of test will be performed and the result will be displayed rating your performance from 0 – 100%, A-E  for overall performance based on Yslow and Page Speed measurements.

The results then allow us to see clearly what work needs to be done. For this article we will be focusing on specify image dimensions and optimize images from page speed and Do not scale images in HTML for Yslow.

Note: Images from an external source such as facebook fan box cannot have the image dimensions added by yourself and so attempting to remedy these queries would be a waste of time.

How do we optimize the images highlighted by GTmetrix?

There are two ways that I optimize my images.

The first Method is to look at the optimize images section of GTmetrix and you will notice a link that says see optimized version. Select this and another window will open with that image.

Optimize Images wordpress

Simply right click on the image in the new window and save as.

Then log in to your file manager via FTP or by your control panel, such as Cpanel and locate the file path.

For images that you have uploaded they will usually be in wp-uploads and for theme related images in the themes image folder.

Once you have located the folder that the image is in, simply upload the new image and overwrite the old one. This saves time and space as it takes longer to upload all new images and change the paths.

Note: for .jpg images, most of the time GTmetrix displays a .jpeg image when you select and download the optimized version. To overcome that, upload the image as normal and edit the name, changing .jpeg to .jpg in file manager.

Second Method

Upload an optimized image from the start.

To do this you will need some software to help you resize and optimize the image.

The best and most simplest software I have found is Shrink O’Matic and it’s completely free.

This software is a simple drag and drop program, you set the settings depending on size and format, drag the image from your folder to the washing machine and out comes an image optimized and resized in a flash.

Click on the image to view a full screen image.

Notice the .jpg option has a slider, this is for quality of the image. I would reccomend using 85-90%, any lower and the image will be too blury and at a 100% it will be a little too big.

Once you have run your image through this tool just upload it in the same was as we did above using either FTP or file manager.

What about Dimensions?

The last thing that we need to check is that our dimensions are declared. As HTML is a markup language we need to tell it where the image is and what size so when the page renders it does not have to wait for the image dimensions to be figured out. I can demonstrate the difference between a page that loads with dimensions and one that doesn’t using a simple comparisson below.

Why we add image dimensionsLooking at the Image above, we can see two sites. Site A and Site B. Site A has its dimensions declared in the HTML so our browsers knows exactly how big it will be and where it will be.

Site B however, the poor browser knows there is an image there, but it doesn’t know how big it is and so a conversation between the browser and html takes place.

Browser to HTML: Hmm, there is an image here, but I don’t know how big it is. I think I better ask, Hey HTML how big is this image.

HTML: I dont know let me ask the image.

HTML to Image: How big are you?

Image: I’m 150 x 105px

HTML: OK I will let the browser know.

HTML to Browser: It’s 150 x 150px

Browser: Ok, thank you, ahh damn, how big is this other image?

And the cycle continues….

How do we know if the dimensions are added?

Word-press in most cases adds it for you, but you can double check by switching from Visual to HTML in your WordPress editor.

You should see something like this:

<img title=”Shrink O’Matic” src=”https://diywpblog.com/wp-content/uploads/2012/06/Shrink-OMatic.jpg” alt=”Shrink O’Matic” width=”600″ height=”308” />

At the end of the image, just ensure after the quotation mark there are dimensions.

You can also use online tools like GTmetrix to check that all images have dimensions.

Conclusion

Image optimization can shred 100s of KB of your page size as well as precious seconds to the loading time. So ensuring that this area of optimization is done correctly is one of the most beneficial.

I have seen sites with images the weigh in at over 1mb but there only 150 x 150, the site had 26 images that were like this so I will let you do the maths on how long that took to load, if it loaded at all. The default timeout to your database is 60 seconds. I also felt sorry for his servers CPU.

Facebook fan box doesn’t add image dimensions even though all the images are 50 x 50, it would certainly speed up load times if they added that and maybe they will one day.

So now I leave it to you to fine tune your images.

Feel free to leave a comment and don’t forget to sign up to receive all the latest posts.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

19 comments… add one
  • Ivin Aug 28, 2012, 2:35 pm

    Great tips here. are we talking about SEO or just loadability. If it’s SEO there’s an ALT tag that needs to be added. Getting SEOPressor, it would be taken care of completely.

    Also, coding sometimes makes my head hurt, so I would search for an appropriate plugin to do all of that for me.

    • Horne3754sg Aug 28, 2012, 2:41 pm

      I totally agree, but for this example its optimization in terms of speed and loadability. I will howerever change it to add the alt tag, no harm in throwing in a bit of SEO at the same time. Thanks.

  • Dawson Nov 6, 2012, 3:04 pm

    Very clearly explained. You got good patience and knowledge on how things work. Its time to optimize images on my blog. Thank you.

  • Darcy Nov 21, 2012, 6:38 am

    It seems that there IS a giant difference between optimized images and those which aren’t. I didn’t have an intimate knowledge though of just how much that difference is. I’ve heard that loading speed of a site weighs heavily on how the search engines rank your pages so I’ll be sure to go around and tweak my blog pages and hopefully my rankings will reap the benefits!

    • Matthew Horne Nov 21, 2012, 3:20 pm

      Images are one of the biggest issues with slow websites, each image adds weight to the site, so if you have the wrong size images, or an image that is bigger than it could be in terms of bit size, then your just making the page size larger and thus it takes longer to load. Not specifying the dimensions increases the talking time if you will, to the server to figure out how big the image should be.

  • ubaid Apr 24, 2013, 7:24 pm

    Really good tips for optimization. Because I’m trying not to use any plugin for this.

  • Jan May 13, 2013, 12:11 pm

    How would one go about getting wordpress to specify image dimensions if it isn’t already? I see a number of images on my website which are not being served correctly and I can’t figure out how to change them.

    • Matthew Horne May 13, 2013, 1:09 pm

      You would have to modify your theme files.

      The first thing to do would be to specify what dimensions the images should be, example, a featured image may be 200 x 120

      So we go to functions.php and add the following:

      if ( function_exists( ‘add_image_size’ ) ) {
      add_image_size( ‘featured-image’, 200, 120, true );
      }

      what we are saying here, is that images under the name featured-image will be 200 x 120, the boolean value of true tells wordpress to hardcrop the image at that dimension.

      Then we got to our template file, example blog.php or whatever the template name is for your blog and add the following to where the image renders.

      Note – it may already contain something that adds the image already.

      Perhaps something like this.

      < ?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'featured-thumb' ); } ?>

      If so, then you change ( ‘featured-thumb’ ) to reflect the name of the image you specified above, in this example.

      < ?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'featured-image' ); } ?>

      What this is saying is, if there is a featured image set, use it, if not, don’t show anything.

  • Anita Jun 28, 2013, 3:24 am

    My site suffers from serious problem in term of speed.
    I found this article really useful.
    Thanks for such great explanation

  • Krish Aug 18, 2013, 8:55 pm

    Wow, optimized my newly built site with your tips. So far so good 🙂

    Now I can See My Website
    Page Speed Grade:
    94%)
    79%
    BYSlow Grade:
    82%)
    78%

    Page load time: 4.13s
    Total page size: 1.02MB
    Total number of requests: 66

    Thanks

  • raul Nov 21, 2013, 3:20 pm

    I’d like to also suggest to your list imgOptimize, which is a tool designed for webmasters. You just drag your local version of the website into the app, and it will optimize all your images (you can choose to overwrite or not).

    • Matthew Horne Nov 22, 2013, 2:24 am

      I will check that out – however people may not be keen to do that.

  • alice Aug 22, 2014, 7:20 am

    i prefer to use plugin, but none of them work like smush.it, and unfortunately, I could not optmize using smush.it plugin again, my website goes error when try to optimize although a single image

  • Raj Sep 22, 2014, 12:31 am

    Matthew, I got gtmaterix error for facebook likebox thumbnail images. How to resolve this? Thanks

    • Matthew Horne Nov 16, 2014, 3:48 am

      I would remove the thumbnails, there just excessive waste and not needed.

Leave a Comment