This chapter shows you how to optimize your images to maximize visual quality and download speed. Images give the web pizzazz. They blink, they're bright, and they sometimes take flight (with the help of some DHTML). In fact, images are so popular, they make up the bulk of web page downloads, and determine a large part of the total download time of your pages. [1]
This chapter shows you how web graphics formats work and how you can take advantage of their compression algorithms to minimize file size. Graphics programs optimize the file size and quality of GIFs, JPEGs, and PNGs to varying degrees. Each has its own strengths and weaknesses. You'll realize the most savings in eliminating and replacing them with text and CSS, combining neighboring graphics, and reusing graphics with the same URLs.
Excluding network performance and hardware and software configurations, the size of your HTML "base" page and the number and size of your images and multimedia objects determines the display speed of your pages. [2] The base page size determines the initial download speed of your pages, while the embedded content determines the total download time. Because images and multimedia make up over 50 percent of the average web page, it is important to pay careful attention to the number and size of your images.
This chapter assumes that you already have some familiarity with web graphics formats. For more information, see Designing Web Graphics 4 by Lynda Weinman (New Riders, 2003), and Web Style Guide, 2 nd ed. by Patrick Lynch and Sarah Horton (Yale University Press, 2002) for an excellent introduction to web graphics. See also http://www.webstyleguide.com/graphics/ for an online version of the graphics chapter of their book.