Chapter 5. Formatting Graphics


Along with text, graphics comprise the bulk of your web site’s content. Graphics can convey specific information (logos and charts)or set a tone for the site (photos and illustrations). Even though visitors may not linger over your site’s visuals the way they do the written word, graphics have a subtle effect on the perceived quality of your web site. Graphics also make up the majority of a web page’s overall file size. Although your HTML code itself may total just 15 or 20 KB, a half-dozen graphics files on the page at 5 or 10 KB each quickly add up to a weighty download. In this chapter, I’ll cover a few of the most common issues surrounding the use of graphics on a web site, including how to choose the right ones and optimize them for fast download.

5.1. Optimizing Your Images


You need to minimize the file size of images to be used on your site while retaining as much image quality and color integrity as possible.


The Web’s main image formats, JPEG and GIF, along with their oft-forgotten stepsister PNG, complete a trio of optimization methods for web designers. You may already know the basic rule of thumb for choosing among the three:

Use GIFs (or 8-bit PNGs) for logos and simple graphics; use JPEGs for photographs.


Why optimize? About half of all U.S. households have some kind of broadband Internet access, and many of those users don’t have high-speed access at the office, school, public library, or Wi-Fi hotspot. ...

Get Web Site Cookbook now with O’Reilly online learning.

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