optimize images

How To Optimize Images To Speed Up Your Blog

In the last article I shared with you a few tricks to improve the speed of your website. Here I will show you how to optimize images to further speed up your blog. I’ll go over WP Smushit plugin and also suggest other ways and tools to optimize images effectively.

Images take a lot of “space” and may significantly increase the load time of your blog if they are not optimized properly. Images contain much more data than just the pixels we see on our screen. All this information, which the viewer does not care about only adds unnecessary size to the image. This leads to longer load time as the the image is downloaded. To optimize images simply means to remove all the unnecessary data stored within the image. When you optimize images you can speed up your blog up to 80%

To save many bytes or even kilobytes of data you images need to be properly formatted even before you perform a more advanced optimization of images.

Basic Image Optimization

The loading speed of images is usually the slowest components of any blog. There are several basic steps you could take to optimize images.

1. Use proper file formats

Your first step in image optimization should always be to use proper formatting. The right format for images is GIF, PNG and JPEG

  • GIF (Graphic Interchange Format) – only support a smaller number of colors (maximum of 256). This format is typically used for flat-color images, small images like logos, buttons or text images. It is also used in animated images
  • PNG (Portable Network Graphics) – this format should be used for simple images which require more than 256 colors
  • JPEG (Joint Photographic Expert Group) – typically used for photographs and high quality art work. JPEG images support millions of colors.

2. Adjust size of your images before uploading

Many people use the editor in WordPress to resize the images on their blog and most people think that this is sufficient way to reduce / optimize images.

Nothing could be further from the truth! Rather than to optimize images, this method “de-optimizes” the image and actually increases the load time of the image.

The reason why it takes longer to load a re-sized image after it has been uploaded is because the user’s browser first loads up the original image you uploaded and only then it will recognize that it has to reduce the image. The browser will adjust the size to the reduced size and then it has to reload it. You can clearly see how damaging this could be to the speed of a blog or a website.

I sometimes use Microsoft’s Paint program to optimize images. There are options there to crop the images to the right size. If you have Microsoft Office you should be able to manipulate your images with Microsoft Office Picture Manager as well.

Advanced Ways To Optimize Images

Your images should always be compressed before you upload them. I used and still sometimes use Microsoft Office Picture Manager to compress my images. Unfortunately, this program will often reduce the size of larger images. I find that quite unacceptable, especially when I am showing screenshots.

I have a special tool that I use all the time to create images, headers and so on. It is called XheaderPro. I initially purchased it to create headers, but now I use it to create all my images as well as to optimize images.

I add my images to XheaderPro and use the tool to save them in the least number of bytes, yet the size I want. I think this is my longest standing tool I have and I cannot imagine creating my blog’s images without it.

I am digressing but if you like to “fool” around with images I recommend that you look into purchasing Xheader Pro. It has served me all these years and it will serve you well as well. (you can get it here…). Combined with the free ClipMagic tool that makes backgrounds transparent and that I recently recommended to you, I create amazing images to be used throughout my blog and social sites.

Use Smushit On From Yahoo To Optimize Images

Unfortunately, even after all my careful image optimization, I found out that my images still could be better optimized. I turned to Smushit. This is a tool developed by the Yahoo Developer Network. From the horse’s mouth: uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files.

You can install the application on your browser if you want to and use it from your browser. Here is the link: Smushit

Or Use Free WP Smushit Plugin To Optimize Images

I find it easier to use the WP Smushit plugin instead of installing SmushIt it on my browser. This plugin automatically smushes/reduces your images when you upload them to your Media Library.

Initially I was quite concerned because I was trying to optimize my blog for speed and the last thing I wanted to do is to add another plugin to my website. But I’ve heard so much praise about this plugin that I though I’d give it a try. First thing I did after I uploaded the plugin was to check the speed of my site and I found this plugin did not affect the speed of my blog at all!

To add the plugin to your site just upload it directly from your plugin dashboard. Search for it under the name WP Once you upload it you it will show up in your Media Library Index, on the right hand side of your images.

Image 1. How To Optimize Images With WP plugin

Use Smushit to optimize images

As you can see the WP plugin compressed my images even further, despite my efforts to have the images at their minimum. When you initially upload the WP Smushit plugin none of your images will be reduced. Although the plugin smushes the images automatically when you upload an image, it is not going to do it retroactively. You will have to smush the images yourself.

It is very easy to do. On the right hand side of the image, instead of “Reduced by…” it will say “Not Processed” and it will ask if you want to smush the image. Just click on smush and it will do it for you.

The plugin also has an option to smush in bulk. This option is there to especially help someone who has many images already uploaded on their blog. Unfortunately, it is only in a beta stage and it does not always work. I had to reduce all my images one by one, but it was worth it. You can see the results on the final image of the post where I showed you how to improve the speed of your blog.

So now that you learned how to optimize images on your blog, there is nothing stopping you from taking these steps and significantly speed up your blog. Have fun smushing to your heart’s desire. I’d love to hear how this image optimization worked for you. Please let me know in the comments.


ipro ad


, , , , , , , ,

22 Responses to How To Optimize Images To Speed Up Your Blog

  1. Trevor McHaffie December 31, 2013 at 1:04 am #

    Hi Dita,

    Great post. I have been looking for something just like this. I was always to lazy to do this myself then upload the image.

    I have been looking for a plugin just like yhis but couldn’t find one.

    I tested it on 2 of my blogs and worked perfectly. Even the bulk processor.

    Thanks again for the great tip.

    • Dita Irvine January 8, 2014 at 2:42 pm #

      Hey Trevor,

      I am so glad it worked for you. I find the bulk processor works sometimes and other times it does not. I think the times when it does not work is when there is too much use of the software online. Now when I have to do it I try to work on it in less popular online times.
      Dita Irvine recently posted…How To Update Your WordPress Blog Theme Without Any HasslesMy Profile

  2. Shiv Saroya November 23, 2013 at 5:40 am #

    These are all brilliant tips and suggestions. However, I’d think that they can be applied just on smaller blogs and websites, because with bigger websites with many subpages and sections, the process of the ‘speeding up’ is much more complex.

  3. raul November 21, 2013 at 10:18 am #

    A very nice list. I would also suggest imgOptimize, which is a tool for optimizing all types of web images (png/gif/jpeg).

  4. Erwin November 12, 2013 at 9:28 am #

    I always use photoshop to edit my images. By using the option “save for web” then the image size can be reduced. The results is very different when compared with using the option “save as” or “save”.
    Erwin recently posted…Withings Home Blood Pressure MonitorMy Profile

  5. Widestate October 31, 2013 at 6:04 am #

    Very useful optimization tips. I have gone through some image optimization tutorials and they suggest for image compression an here also. I have little concern about the quality issue if we compress them instead of using the usual created and proper file format using image editor which I usually do.

  6. Raghav October 29, 2013 at 7:49 am #

    Thanks Dita for these amazing tips on how we can optimize our images for the best of load time…

    And sometimes I feel that i can really connect with your blog and really understand what you want to tell me..

    Again thanks for the share..!!
    Raghav recently posted…Does Duplicate Content Really gets you banned? Or is it just a mythMy Profile

  7. Sandy Halliday October 28, 2013 at 6:42 pm #

    Hi Dita,

    Blog loading time is very important and it’s interesting that you recommend the Smush It Plugin. I was going to install it myself as it had been mentioned by a blogger whom I follow but she recently said in a post that she uninstalled it because ” It didn’t work half of the time.”

    I guess you have not had that problem with it so now I’m inclined to give it try. After all it’s esy enough to uninstall if it doen’t work.

    Sandy Halliday recently posted…Healthy Halloween Treats That Won’t Ruin The DetoxMy Profile

    • Dita Irvine October 28, 2013 at 9:38 pm #

      Hi Sandy,

      Thus far I have not had any problem with it. Now, when you go into your media, you will find the option there to do bulk smushing. That did not work for me and I had to do them manually. You have the prompts to do so next to the list of images in your media library.

      The other thing that I found was that at seemingly “heavy” times, that is a lot of people might be using smushit plugin, I found that the smushit did not work. That is understandable because I imagine that the plugin actually “submits” to Yahoo Smushit site. So what I did I chose the “off hours” to do it. For me it meant late at night when less people are using the internet.

      Given that you live in the UK you will probably have an advantage over North America and if you do it first thing in the morning your time, you’ll beat the rush.

      Hope this helps.

  8. Mark Salmon October 24, 2013 at 11:39 am #

    Hi Dita,

    Nice post. I use Smush-it on some of my sites but I sometimes get lazy with image sizes and use the WordPress resizer – I didn’t realise the impact on page load speed until you mentioned it here – thank you! For an image heavy site, it would also be worth serving images from Amazon S3 I imagine but I haven’t tested how this would effect page load speed yet.

    • Dita Irvine October 25, 2013 at 11:37 am #

      Hi Mark,

      really nice to see you here. A lot of people make the same mistake. I like the smushit plugin because it does it automatically. I have not contemplated yet Amazon S3. I just don’t seem the time to start fooling around with that too.

      Hope you are doing well,

      Take care,

  9. Sarah October 24, 2013 at 6:00 am #

    Hi Dita

    Thanks for sharing these helpful tips about image optimization I will be sure to refer to them for placing images on my site in the future. I may also see if I can optimize the ones that are already there to increase the speed.

    I also really like the theme and layout of your site it looks great and is easy to navigate

    all the best

    Sarah recently posted…Real Life Law Of Attraction Success StoriesMy Profile

    • Dita Irvine October 25, 2013 at 11:40 am #

      Hi Sarah,

      Thanks for the compliments. You are so kind. If you instal the smushit plugin (which is free to download from your plugin dashboard, you can just go into your media and smush the ones you already uploaded.

  10. Michel Snook October 23, 2013 at 2:17 pm #

    Hello Dita,

    I enjoy reading your posts. This summer I was invited to be a beta tester for a plugin that crunched images similar to the plugin mentioned in this post. Unfortunately, I never got to test that plugin because of a family loss during that time, so I don’t know how well it worked.

    Also, I use YSlow (V2) to check the overall speed of my site, as well as others including your site. The last time I tested your site, it ranked a 68% which was slow. Since then I just tested it and it now ranks a 74% which is average, but an improvement since the last time. The biggest issue YSlow found was that your page has 27 external Javascript scripts, 10 external stylesheets, 10 external background images (try combining them with CSS sprites), and 54 static components that are not on CDN. All these things contribute to loading speed as well.

    Your suggestions for compacting images definitely does help and anything one can do to improve upon one’s site is worth looking into. Thank you for the share!
    Michel Snook recently posted…Making an Income Online – is Affiliate Marketing right for you?My Profile

    • Dita Irvine October 25, 2013 at 11:45 am #

      Hi Michel,

      I understand that my YSlow is not very good. You mentioned that

      he biggest issue YSlow found was that your page has 27 external Javascript scripts, 10 external stylesheets, 10 external background images (try combining them with CSS sprites), and 54 static components that are not on CDN. All these things contribute to loading speed as well.

      Well, I’ll be perfectly honest, I am not so technical that I could do this. Some of it is my theme related and my theme developers think it is not an issue (obviously is). I may have to look for a theme that is more efficient.

  11. Paul Henderson October 23, 2013 at 10:24 am #

    Hey Dita,

    you have a habit of producing the tips and stuff that I need – lol.

    I’m afraid I’ve been absent for quite some time as I’ve been working endlessly towards my upcoming EPE launch which is happening quite soon. So it’s all been a bit hectic and something had to go.

    But your title caught my eye here, as I do use a whole load of images on my posts usually – AND I resize them using the WP resizing function like you said NOT to do.

    Little wonder that some of my pages load quite slowly. So I’m gonna get this SmushIt plugin and see if it can do anything for me.

    But before I go to some trouble, would you, or anyone else reading, know if there’s a utility that can measure true page load times. The thing is, if you load a page the first time, it takes a certain time to load. But if you then optmize the page and then try to view it again, is the second view attempt a true record, or is the page already in your cache?

    As you can tell, I’m not that savvy – at least in this area – lol.

    But a really interesting post Dita, and one that I’d say we all should be reading and utilizing.

    All the best 🙂

    Paul Henderson recently posted…Water, Water Everywhere – Nor Any Drop to DrinkMy Profile

    • Dita Irvine November 6, 2013 at 10:53 am #

      Hey Paul,

      looks like I missed your comment! You are right, when the page is loaded the first time it takes longer even if it is optimized. Once it has been through your browser the cached version “kicks” in”. There are several places you can check the true speed, some of them I mentioned in the article.

      I’ve noticed you have been quiet for a while so I imagine you are developing something new behind the scenes.

      Best of luck on your project
      Dita Irvine recently posted…Your Blog Content Is Still The King: Hummingbird Makes It Even More SoMy Profile

  12. Jane October 21, 2013 at 12:48 pm #

    Thanks for the wonderful tips Dita! I use only two formats – PNG and JPG. I never use Gif. And yes, I admit that most people still think that re-sizing the image in the WP editor reduces the file size. It increases page load time.

    I use Smushit on my blog and I have seen great improvement in my loading time and disk space since then!
    Jane recently posted…Long Distance Relationship: 5 Tips To Make It Happy And HealthyMy Profile

    • Dita Irvine October 22, 2013 at 11:02 pm #

      Hi Jane,

      Thanks for the comment. I also feel very well about the smushit plugin. I really feel more comfortable.

      Take care

  13. Kulwant October 21, 2013 at 3:20 am #

    Very brilliant guide.

    I am using W3 total cache plugin on my blog and I upload all images on my blog after manually optimizing them.

    But I am still getting issue that few images are creating problems as I haven’t added their dimensions with them.

    I am checking via Google page speed insight.
    Kulwant recently posted…Long Tail Pro Giveaway: 3 Lucky Winners Will be AnnouncedMy Profile

    • Dita Irvine November 6, 2013 at 10:56 am #

      Hi Kulwant,

      the Smushit plugin should help you with your issue. It definitely helped me even though I was very careful to optimize my images. I am definitely leaving and recommending this plugin. Hope you can fix your issues
      Dita Irvine recently posted…An Excellent Source Of Ideas For Blog Content My Profile