Image Optimization Part 1: The Importance of Images
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.
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?
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
- 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...