Image Optimization Part 1: The Importance of Images

By YUI TeamOctober 29, 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 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...