Why you should optimize your graphics

General optimization strategies

Optimizing GIFs

Optimizing JPEGs

Optimizing PNGs

Optimizing to a target file size

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 the most 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 surfers with slow Internet connections. The user can hang in there and wait, turn graphics off in their browsers, or simply surf somewhere else.

This chapter covers the strategies and tools available for making web graphic files as small as possible (a process known as optimizing) while maintaining acceptable image quality. Maybe you’re thinking, “Why bother? Everyone has broadband these days, right?!” After you read the next section, I think you’ll be eager to learn the general and format-specific optimizing techniques that follow. If you’re going to make web graphics, why not do it like the pros?

Why Optimize?

Despite the popularity of high-bandwidth connections, dial-up ...

Get Learning Web Design, 3rd Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.