Image Optimization Part 1: The Importance of Images

By Stoyan StefanovOctober 29th, 2008

Stoyan Stefanov.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:

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.

Percentage of page weight that goes to images, average 46.6%
1 Yahoo! 39%
2 Google 75%
3 YouTube 37%
4 Live.com 94%
5 Facebook 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…

11 Comments

  1. I’m really looking forward to this series! I’ll be waiting for the next one :D

  2. Can’t wait.

  3. Definitely a series I’m going to follow.

    One great tool I found out about the other day is smush.it!

  4. 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?

  5. 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)..

  6. 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.

  7. @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.

  8. Nice series.