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:
Smush.it 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 Smush.it 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 Smush.it. 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 Smush.it plugin
As you can see the WP Smush.it 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.