Optimizing Web Graphics

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]

^[1] Eric Siegel of Keynote Systems, email to author, 25 September 2002. The median KB40 site has over 50 percent graphics, and without JavaScript, over 60 percent. The average KB40 page size is over 93KB with the HTML portion averaging 33KB. The average page has a total of 24 embedded objects.

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.

^[2] Jing Zhi, "Web Page Design and Download Time," CMG Journal of Computer Resource Management , no.102 (2001): 4055.

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.