O'Reilly logo

Even Faster Web Sites by Steve Souders

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 10. Optimizing Images

Stoyan Stefanov

Nicole Sullivan

The single most important thing you can do to improve performance is put your site on a diet—take off (and keep off) all the bytes you put on under the stress of chasing the next killer feature. Optimizing images is one way to do just that. Historically, the question of which features to include was considered a business rather than an engineering decision, so page weight has rarely been discussed in performance circles, and yet it is extremely important to overall response time.

Response time for web pages is almost exactly correlated to page weight, and images tend to account for half of the size of typical web pages (see Figure 10-1). Most importantly, images are an easy place to improve performance without removing features. Often, we can make substantial improvements in the size of an image with little to no reduction in quality.

Images as a percentage of page weight for the Alexa top 10 global web sites

Figure 10-1. Images as a percentage of page weight for the Alexa top 10 global web sites

In this chapter, we focus on nonlossy optimizations, which result in a smaller overall file size with no loss in quality. Pixel for pixel, the visual quality of the original and final images is the same. The reduction in size often results from removing metadata, better compression of color or pixel information, or (in the case of PNG) removing chunks that are not necessary for the Web.

If you don’t optimize ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required