Summary: Here's how to optimize images for web, with quick and easy-to-use, free tools. Hint: Optimizing images for your blog is very simple, it can even be automatic.
Optimizing images for fast loading is one of the image optimization tips every blogger should put into action. When you know this stuff, and make it a part of your image uploading process, it doesn't take any extra time on your part, but it'll improve your blog in more ways than one.
Intro
This post is a part of my WordPress Speed -series, helping to make blogs load faster. However, these image optimization tools can and should be used for any blog and any image you upload to the web.
If you have tested how fast your blog is, you might have noticed that the images on your blog take a decent chunk from the loading time. Luckily, making images load faster is one of the easiest thing you can do to increase your page loading speed.
Image optimization for web
Image optimization was very important on the early days of the WWW, when people didn't have broadband connections. BUT unlike many think, it is EQUALLY important today. Why waste resources and time, when you can make the images load faster by making the images smaller, without losing the quality?
Optimizing images for web means making the images smaller (in size, not necessarily quality) so they load faster. This can be done losslessly (without losing the quality), by:
- stripping meta data from JPEGs
- optimizing JPEG compression
- converting certain GIFs to indexed PNGs
- stripping the un-used colours from indexed images
(Source: optimizing images at Yahoo's Exceptional Performance series).
Why image optimization is important?
1. Slower means less traffic and sales:
- 500 ms slower = 20% drop in traffic (Google)
- 400 ms slower = 5-9% in full-page traffic (Yahoo)
- 100 ms slower = 1% in sales (Amazon)
2. Web has a lot of images:
- On average, 45,6% of page weight is images
(Based on the top 10 websites, e.g. Google, Yahoo, YouTube, etc.).
Source, references and further reading:
- After YSlow "A" (Slides by Nicole Sullivan, Yahoo! Exceptional Performance Team)
- Slow website cost you money (another post by me)
How to optimize images for your blog
Optimizing the images you upload to your blog means two things
- Resizing the image to the size you're gonna display it
- Optimizing the size of the image without losing the image quality
In more detail, this means using PNG and JPG instead of GIF, and crushing and compressing the PNG- and JPEG- files. With optimizing, the average lossless savings are:
- Gif-to-PNG: 20.42%
- Crush PNG: 16.05%
- Stripping JPEG metadata: 11.85%
For the optimization (convertion, crushing and compressing), you need tools...
Image optimization tools
Image optimizing for web needs to be fast and as easy as possible, because no-one of us wants to sit on a computer, clicking away to just shrink images to be uploaded into the web. I think an image optimization tool must be...
- quick and easy to use
- free
- fast
- as automatic as possible
...while not losing image quality in the process. And here are such tools for you I'm using myself:
Shrink O'Matic: Image resize tool
It doesn't get much easier than this. Shrink O'Matic is an Adobe AIR program (like TweetDeck for example), where you can drag and drop images for resizing (you can browse and select them too), and it resizes them all to the size you want automatically. The tool optimizes the images while resizing and renames the files when it exports them into a directory of your choosing. Plus it looks cool :)
For resizing, it doesn't get easier and more simpler than that. But for optimization, here's one that is even better. Especially for WordPress bloggers...
Smush.it: Integrated image optimization tool
Smush.it optimizes the images without changing their look or visual quality. Optimized images load faster and make your blog faster. Smush.It has been included in Yahoo's YSlow-plugin, but for WordPress bloggers, it gets even better.
Smush.it gives you automatic image compression for WordPress.
There's a reason this plugin is part of my carefully chosen list of recommended WP plugins. If you're a WordPress blogger, you MUST install the WP Smush.it -plugin.
When you do, and use the WordPress media upload to add images to your blog, you don't have to manually optimize the images AT ALL (apart from resizing beforehand, so you don't have to scale the images via height and width on the HTML img-tag). WP Smush.it does all the optimization behind the scenes (and you only have to manually click through the images already uploaded to your blog).
To see what Smush.it does (in real time), you can try Smush.it out via the webpage, giving it a couple of URLs to images on your blog.
Smush.it algorithms (aka under-the-hood details for tech-geeks who want more than just the optimization results)
In case you are interested in details on what Smush.it does, Smush.it FAQ has the details. In short Smush.it automatically crushes (optimizes) images using the best open source algorithms available. Currently these are the algorithms in use:
- ImageMagick: to identify the image type and to convert GIF files to PNG files.
- pngcrush: to strip unneeded chunks from PNGs. We are also experimenting with other PNG reduction tools such as pngout, optipng, pngrewrite. Hopefully these tools will provide improved optimization of PNG files.
- jpegtran: to strip all metadata from JPEGs (currently disabled) and try progressive JPEGs.
- gifsicle: to optimize GIF animations by stripping repeating pixels in different frames.
Source: Smush.it FAQ: Tools Smush.it uses to smush images
Other image optimization and editing tools
I suggest that you use Smush.It and Shrink O'Matic, but if you're looking for full control of the process and more advanced image manipulation, get GIMP for free image editing program (which kicks PhotoShop's ass any day) and get RIOT for awesome side-by-side image optimization.
Add IfranView into the mix for ultimate image viewing tool (and also simple editing and manipulation) and you're set. To make things smooth, RIOT plugs-in into both the GIMP and IfranView (adding automatic "Save for Web" to the tool).
GIMP does not fall into the "easy to use" category until you get used to it, but otherwise, it's awesome, free and open source. RIOT offers full control to the image optimization process, letting you compare the original and optimized image side-by-side, which is important if the quality of the image matters, e.g. you're a photographer or otherwise need to show quality images. With RIOT you can also over-compress the image, if losing quality is OK, to make the images as small as possible (since normal optimization means maintaining the quality).
For the advanced users looking for automated scripting, more manual control, integration into all imaginable programming and scripting languages, and other sweet possibilities, get ImageMagick and other individual open-source tools like pngcrush or jpegtran. Via command line interface of these tools, scripting possibilities are endless, it's totally free, source code and all.
Test how much optimized images speed up your site
- Take a post in your blog with multiple images, or at least one
- Test how fast that page loads, e.g. with Pingdom Tools
- For in-depth speed testing, check the tools for testing site speed.
- Take the images in that post, run them through Smush.it (see below for instructions)
- Re-test your page speed now with the optimized images
See the difference?
How to optimize images with Smush.it on WordPress
You only have to do this ONCE (for existing images):
- Install the WP Smush.it plugin.
- Go to (Dashboard >>) Media.
- Click re-smush for all the images in your posts.
- DONE. (for new images you upload, they are smushed automatically)
How to optimize images for web manually
For non-WordPress users, optimizing the existing images in your blog takes a bit more work, but it is still worth it. And in the future, optimize before you upload and you don't have to through this:
- (If optimizing existing images in your blog, download the images to your local drive for processing)
- Install Shrink O'Matic or use the Smush.it integrated in the Yahoo's YSlow
- (Resize if needed and) Optimize the images using the tools
- Upload the optimized images to your website
- (if you renamed the images in the manual process, update the image URLs to the post)
Summary
Optimize all the images you upload to your blog, or elsewhere in the web.
- Resize to proper size
- Optimize using the free tools, like Smush.it
- Enjoy faster loading images, which still look the same
- Enjoy faster loading blog or website
Your images will load faster and still look great. Remember to use good filenames, always add an Alt-text and, if it's not done automatically for you, always define the height and width to the image HTML-code (it affects the speed too!).
p.s. Read my image optimization tips -article for the full list of best practices for using images on your blog. Taking those tips to heart will help you with both site speed and search engine optimization.
Version info:
- 12th of May 2010: Post published
- 18th of May 2010: Added links to individual tools used by Smush.it, e.g. pngcrush and jpegtran. Added information and references on why image optimization is important.
