Yale C/AIM Web Style Guide


Web Graphics


Color display primer

Graphic file formats

Interlaced GIF

Transparent GIF

JPEG graphics

Summary-File formats


Optimizing graphics I

Optimizing graphics II

Height & width tags

Colored backgrounds


This section contains techniques to optimize the look and efficiency of your Web page graphics. Although electronic publishing frees you from the cost and limitations of color reproduction on paper, you will still need to make some careful calculations (and a few compromises) if you want to optimize your graphics and photographs for various display monitors and current Internet access speeds.

Graphics and modems
Most of the present Web audience consists of people accessing Internet service providers via 28.8 kilobit per second (kbps) modems from their homes, offices, or remote work sites. At 28.8 kbps you only get about 3.6 kilobytes (KB) per second (remember it takes 8 bits to make each byte). This means a modest 36 KB graphic on your Web page could take 10 seconds or longer to load into the reader's Web viewer. Actual data transmission rates will vary, depending on the type of modem, the speed of your Web server, the type of Internet net connection used, and other factors, but the overall point is clear: the more graphics you use, the longer your reader will have to wait to see your page.
A full-screen graphic menu on your home page, plus background graphics could leave your modem-based readers twiddling their thumbs for a full minute or more, even if they have a state-of-the-art modem and good Internet connections. Look at your watch (or better yet, hold your breath) for a full minute, then figure out if that is the first thing you are willing to ask your users to do when they visit your Web site. A better interface strategy would be to gradually increase the graphics loading of your pages, drawing users into your site with reasonable download times. As users become more engaged with your content, they will be more willing to endure longer delays, especially if you give them notes on the size of graphics, or warnings that particular pages are full of graphics and will take longer to download.

Graphics and intranets
Luckily for graphic designers, many Web sites are created primarily for educational, organizational, or commercial users who access their local intranets and the larger World Wide Web at Ethernet speeds or greater. Graphics and page performance are also an issue for these users, but it makes little sense to arbitrarily restrict Web page graphics in the cause of "saving bandwidth." The bandwidth nazis and gearheads always miss this point: graphics are what drew most people to the Web in the first place. If you got the access speed, indulge!
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.