Image Optimization Part 1: The Importance of Images
By Stoyan StefanovOctober 29th, 2008
About the Author: Stoyan Stefanov is a Yahoo! web developer working for the Exceptional Performance team and leading the development of the YSlow performance tool. He also an open-source contributor, conference speaker and technical writer: his latest book is called Object-Oriented JavaScript.
This is part 1 in an ongoing series. You can read the other parts here:
- Image Optimization Part 2: Selecting the Right File Format
- Image Optimization Part 3: Four Steps to File Size Reduction
- Image Optimization Part 4: Progressive JPEG…Hot or Not?
This is the first in a series of posts about image optimization. In this series, I’ll explore how images affect web site performance and what can you do to your images in order to improve page loading times. (I won’t say how many posts in this series, so that I can claim later that I underpromised and overdelivered…).
When you think about improving page response time, one of the first obvious things to think about is the page weight. It’s obvious that, all things being equal, the heavier a page is the slower it will be. If we take this to the extreme, we can say that the fastest page you can possibly have is the blank page. Once you start adding stuff to the blank page, you’re only making it slower.
On a more serious note, it really is up to you how much content you want to put on a page, so let’s focus on what comes next. After you’ve settled on the content, it’s your job to make sure the content and components are as small as possible. Following our Yahoo! performance best practices, you should make sure that all plain text components (HTML, XML, CSS, JavaScript…) are sent compressed over the wire and that you minify CSS and JavaScript.
But what about the images, how can you speed them up without sacrificing quality and looks? But first, does it really matter?
How important are the images?
Before we start, let’s see if we should even bother with images. Lately we’ve been witnessing the rise of rich internet applications with lots of JavaScript — by “lots” meaning sometimes 300K or more worth of JavaScript code. In other cases, especially in advertising, Flash seems to be the weapon of choice. So, on average, how much of the page weight is images. It’s easy to answer this question by just looking at Alexa’s top 10 websites in the world (as of October 2008) and use YSlow to check what percent of the total page weight is images. The results are given below.
| 1 | Yahoo! | 39% |
| 2 | 75% | |
| 3 | YouTube | 37% |
| 4 | Live.com | 94% |
| 5 | 39% | |
| 6 | MSN | 59% |
| 7 | MySpace | 36% |
| 8 | Wikipedia | 34% |
| 9 | Blogger | 28% |
| 10 | Yahoo! JP | 25% |
On average, 46.6% of the page weight for these popular sites consists of images, included either inline with <img> tags or via CSS stylesheets. Other studies show that this percent can be even higher, depending on the cross section of sites you examine. The exact number is not important, because every site is unique and different from the average; for example Amazon’s home page was made of 75% images at the time of the experiment.
This is a massive percentage and it tells us one thing: There’s huge potential to improve the performance of websites if we can improve the way we handle the image payload. By focusing on images you can make a difference and delight your site visitors with a faster and more pleasant experience.
To be continued…
Over the course of the following weeks, we’ll be publishing more about image optimization. The topics for discussion include:
- different image formats and how to pick the right one
- ways to put your images on a diet without compromising quality
- optimizing generated images
- the effect of using
AlphaImageLoader - favicons
- CSS sprites
- serving images faster
The series of posts will not require Photoshop or other designers’ domain-specific knowledge, so it should be pretty easy for anyone to learn and apply these techniques. More to come soon…
October 30, 2008 at 9:17 am
I’m really looking forward to this series! I’ll be waiting for the next one :D
October 30, 2008 at 9:49 am
Can’t wait.
October 31, 2008 at 1:42 am
Definitely a series I’m going to follow.
One great tool I found out about the other day is smush.it!
October 31, 2008 at 5:28 am
I’m hot to read more about it ;-)
In fact about the usage of PNG 8-bit format…
Is it better then the GIF format?
October 31, 2008 at 11:27 pm
live.com is 94% of images, woah, never thought about it. looking forward to read more, oh and Ole, I don’t think that you could say that PNG is definately better than GIF, although when all our browsers will come up with PNG alpha-transparency support, we can forget about GIF (imho)..
November 3, 2008 at 1:44 pm
Thanks for your comments, guys.
Geert, the author of this blog post is accidentally the co-author of the smush.it tool :) We’ll talk about smush.it soon enough in a follow-up post.
November 4, 2008 at 12:06 am
@Stoyan: Can’t wait to read more of your articles.
@Ole: In most cases png is so much better than gif. png has an alpha channel and makes you independent of the background color of your website. On the other side, in some cases file-sizes of gif’s can be smaller than png’s. It’s always a matter of usage – for realistic looks jpg’s can be better too…
Léonie.
November 4, 2008 at 9:29 am
[...] Image Optimization Part 1: The Importance of Images [...]
November 14, 2008 at 8:43 am
[...] Image Optimization Part 1: The Importance of Images [...]
December 5, 2008 at 8:26 am
[...] Image Optimization Part 1: The Importance of Images [...]
December 12, 2008 at 8:38 am
Nice series.