May 13, 2009
On average, roughly 45% of a web page's weight is made up of images. Considering the size of that number, optimized images are the best way to speed up a website. A study for Amazon.com has concluded that each 100ms slower the page loads, equates to a 1% drop in sales. It's no wonder they go to great lengths to expedite page weight, and why you should too.
Up until the last couple of weeks, I didn't have a great understanding or appreciation for image optimization. I, like many others in our field, left the dirty work to Photoshop and assumed it would produce the lightest possible images.
Learning the basics about image formats, what works best for certain applications and what tools are out there to help, is something all web designers and front-end code monkeys need to master. I've put together a collection of best-practices and resources over the last couple of weeks that should be helpful:
PNG gets a bad wrap.
PNG is not only useful for alpha-transparency, but in nearly every case is better quality and lighter weight than a 256-color GIF. For more on this, check out the Image Optimization series linked up below.
Make use of CSS sprites.
Sprites are an advanced CSS technique, but can be HUGE in creating lightweight websites and applications. Read this Smashing Magazine feature for a great round-up of CSS sprite resources.
Adobe CS4 does not have it mastered.
Optimization in Adobe Creative Suite 4 is inconsistent. Photoshop does an average job optimizing images for web. Fireworks does a much better job, with JPEGs especially. Neither do particularly well with PNGs, and require outside tools for best results. The Adobe team says that the Fireworks web optimization features are coming to Photoshop in the next release, so we'll see.
Yahoo! and their people have led the way when it comes to prioritizing website performance. Stoyan Stefanov (member of the Yslow team) has written a very educational 5-part series about image optimization that is a must-read:
- The Importance of Images
- Selecting the Right File Format
- Four Steps to File Size Reduction
- Progressive JPEG ... Hot or Not?
Developed by the aforementioned team at Yahoo!, this website will take all the images on a given page, optimize them, and ZIP them up in a tidy little folder for you to download. It also shows you the measurable size improvements made on each image. It's a phenomenal tool we will not ever launch a project without in the future.
This is a very handy little Mac application for optimizing PNGs, since Creative Suite is not there yet. Simply drag an individual image or folder to the application icon, and it will optimize all PNGs for you within a matter of seconds, showing how much you saved in a little Growl notification. I love it.
The 5-part series from above mentions a bunch of other, more geeky command-line tools for optimizing images, but the two above tools work best for my needs. Happy optimizing!