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.
11 links to this post.
25 comments.
You're on fire, Antti. I'm envious. All this promotion and sales and copywriting is tearing my heart out.
But it has to be done, and for now, I have to do it. Grrr…
Looking forward to what else you have up your sleeve.
Thanks Dave. A while back I got “slightly” obsessed with optimizing my sites for speed. And with me, slightly means putting all available time on just that until it's done, first looking into how it's done, then doing it, then noticing that it wasn't so simple, doing more research and trying again, until I can't think of anything else to do or try.
This time I remembered to take notes while deep in my craze, research and trying stuff out. I picked the ones that had the biggest impact for the least effort and I have this series of posts. I'm actually quite excited on getting them out finally :)
As for your promotion, sales and all that good stuff… it'll be worth it, I'm sure.
Annti, do you have any suggestions for photographers who post images on their blogs since this is their primary focus?
Patty, here are 3+ tips I would do as a photographer posting images to a blog (not that much different from anyone else, but I'd do stuff manually to verify quality, at least to see how the tools work):
1) Always add height and width to the image. 2). Don't scale via HTML, create different sizes of the images instead. 3) (not so much for speed, but for SEO) name the images properly (e.g. yellow-flower.png, instead of IMG004586.png) and always add an Alt-text.
For formats, I'd use .JPG for full-color images, and .PNG for the others. .PNG grows in size fast when you add colors. Use tool like RIOT to see what format both looks good, but is small in size as well.
I'd also have two versions for the web, the full image and a smaller, more optimized one. I would use the optimized one on normal blog pages. Thus, keeping the longer loading full image away from front page and any “landing page” for that matter.
The optimized image would still be big enough to “look good”, not any thumbnail stuff, but small in size for it to load fast. I'd still optimize the full image too, but keep an eye on the quality…
From the tools, I'd recommend testing Smush.it and RIOT out, taking a high resolution, large image, optimize it and compare the quality, see the results with your own eyes. Shrink O'matic could be used to create the smaller images from high-resolution images.
Timely tips as ever Antti. When I had to delete all my plugins and reinstall, smashit was one of the first that went back. I find the GIMP is too much for my simple neewds and rely heavily on Irfanview with the “publish for web” plugin. Installing SAhrink OMatic as I type….
Thank you Annti for this advice. I will have to start implement this next week.
All blog posts on image optimization seem to leave out tools like jpegoptim (http://www.kokkonen.net/tjko/projects.html) and pngcrush (http://pmt.sourceforge.net/pngcrush). However, I haven't heard of Smush.it, we seems to do the same thing, while being a lot more user-friendly. I'm curious to see how the compression ratios compare with these tools.
Anyway, thanks for the tips!
Michael, thanks for the comment and thanks for the tips/links on those image optimization tools. As you noticed, for this post, I wanted to emphasize on the easy-to-use, even automatic (like Smush.it is on WordPress), image optimization tools…
But for more scientific approach, compression ratios would definitely be a factor for selecting the best optimization tools. Speaking of which, my curiosity sparked as well, so do tell if you happen to know or do some comparisons between the different tools before I do :)
Great advice except I wonder whether stripping a relatively few characters of text meta data like an alt tag would really help load time. It certainly might have negative effects like loss of use by non-visual users and possible loss of SE capabilities.
Don't strip characters from Alt-tag, since that's so essential to accessibility and SEO. If you leave something out, then you might skip the title-attribute from images. But in the end, the amount of text and HTML code is not what slows down sites, so I wouldn't worry about it…
One might go for stripping characters where possible, like css-classes, but I think that's an overkill, as having clear, verbose meta data helps making changes when needed to. Especially, since HTML-, css- and js-minification, removing all comments and linebreaks makes loading time for those small anyway.
As an addition to optimizing images, using a CDN can help greatly with page load times. I've recently started using a CDN for my site and have noticed a big improvement in page load times. Everything from css, js and images are setup to come from the CDN … super fast.
Using a CDN to deliver static content is a great way to speed up a site, but it's even better if you deliver *optimized* static content :)
Thus, I see it as a step that comes after the site/blog is optimized from the inside: compression and cache in place, css- and js- files combined & minified and images optimized.
Totally … its definitely the next step after site optimizations. btw … Great articles, I like your series of optimization articles, good read!
Thanks Dimas, I'm glad you enjoyed'em
Michael, I never looked into details, but apparently Smush.it uses pngcrush you mentioned for the optimization. For JPG optimization, it uses JPEGtran. I updated the post with these “algorithm” details.
Cool, thanks for the update on that. Personally, I'll probably stick to running the tools manually on the command-line, but I'll keep Smush.it in mind.
Zemalf,
Thanks for this great article. The info here is timely and helpful. It is quite self-less of you to give this info so freely. I did not notice but do you have more info in a free or paid PDF or some other more indepth report?
Bruce, thanks for the kind words. Actually, I'll be publishing a report on the blog / WordPress optimization within the next weeks… I've received several requests to do something along those lines, and I set myself an ultimatum to have my first product out before May 31st too. So free or paid (haven't decided yet), it's coming :)
Antti,
Nice article! I've been using a TON of vacation photos on my site (all originals via iPhone). Any chance for a follow up on 1) How to use those tools above to make sprites 2) split domain hosting for images and 3) Converting Image Searchers to real traffic?
I struggle with each of these.
Thanks for sharing. I am actually working speeding up my images so your tips really do help out. Using those those optimizing tools should help a little as well.
I have heard, that if you store your images off site that this could also speed up your site. What are your thoughts on this?
Yes, delivering images (and other static content, like .css- and .js-files) from a sub-domain (to the main site) or Content Delivery Network (CDN) helps to speed things up…
Without going into too much details, this speeds up things (vs. having all on the main site), because static objects can be loaded in parallel to the content from the main site. Many browsers only load 2-3 objects at once from one source, so having another site enables 4-6 parallel loads.
Also, when the off site is “cookieless”, it saves data on each request. And in case of CDN is used, the images are spread to many servers, and content is delivered from the fastest, based on visitor's location.
Yes, delivering images (and other static content, like .css- and .js-files) from a sub-domain (to the main site) or Content Delivery Network (CDN) helps to speed things up…
Without going into too much details, this speeds up things (vs. having all on the main site), because static objects can be loaded in parallel to the content from the main site. Many browsers only load 2-3 objects at once from one source, so having another site enables 4-6 parallel loads.
Also, when the off site is “cookieless”, it saves data on each request. And in case of CDN is used, the images are spread to many servers, and content is delivered from the fastest, based on visitor's location.
I love it. I have opened most of your links and I'm currently about to smush all of my images! Lovely!
Good stuff. Smushing is fun :)
1.) css-sprites are very usefull: you can show more pictures with one http-request http://de.spritegen.website-performance.org/
2.) CDN (Multiple Servers-Domains) are good: the browser can download many data from one domain, but the HTTP 1.1 specification says that it only make a few… so we use more domains for more requests :-)
3.) some image-optimize-commands for linux
find . -iname ‘*.png’ -exec optipng -o7 {} ;
find . -iname ‘*.jpg’ -exec jpegoptim –force {} ;