Chapter 22. Lean and Mean Web Graphics

Because a web page is published over a network, it needs to zip through the lines as little packets of data in order to reach the end user. It is fairly intuitive, then, that larger amounts of data will require a longer time to arrive. And guess which part of a standard web page packs a whole lotta bytes—that’s right, the graphics.

Thus is born the conflicted relationship with graphics on the Web. On the one hand, images make a web page more interesting than text alone, and the ability to display graphics is one of the factors contributing to the Web’s success. On the other hand, graphics also try the patience of users with slow Internet connections and gobble the data plans of mobile devices (see the Note).

This chapter covers the strategies and tools available for making web graphic file sizes as small as possible (a process known as optimizing) while maintaining acceptable image quality. I hope that I impressed upon you the importance of optimizing site performance back in Chapter 3, “Some Big Concepts You Need to Know.” In addition to cutting down on the number of requests your page makes to the server, reducing the total file size of images is the next powerful tool for making pages display as quickly as possible. It is well worth the extra effort to learn how to squeeze every unnecessary ...

Get Learning Web Design, 4th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.