Web Graphics Tips and Techniques
Giovanna Genard and Cyndi Carey

Audience Considerations | Graphic Format Tips | Techniques | Resources

As Web professionals, we are pushing the boundaries of what we can do to create rich graphics that do not take forever to download. It is important to know your audience in order to achieve successful Web graphics design.

Educational Considerations
It is best to design graphics that will fit into 500 x 640 page, so people can print information. Even though at Penn State we work with a T1/T2 connection, we are designing for everyone. Use descriptive ALT tags to inform users what they are downloading. If people have their images turned off or use a reader to navigate through your site, they will not be able to navigate a site.

Bad Bandwidth= Good Design. Although actual data transmission rates vary depending on the type of modem, Web server speed, or Internet connection used, the more graphics you use, the longer your reader will have to wait to see your page. As an educational institution, visitors are accessing our sites via Internet service providers on 28.8 kilobit per second (kbps). 28.8 kbps= about 3.6 kilobytes (KB) per second. Combined graphics and text size should be kept in the 30-60 K range. Use Internet tools such as http://netmachanic.com to determine your actual file size.

Monitor Resolution
Average monitor size is 800 x 600 pixels. But a default stretched Netscape window opens at about 750 x 425 pixels and people don’t care to scroll horizontally.

Most monitors are 16-bit (capable of displaying 16,000 colors). But, there are still a significant number of users with 8-bit (256 colors) monitors. Cross-platform Web safe palette consists of 216 colors. For a more detailed example:

The Web safe palette is available in Dreamweaver and Fireworks as a default. Even though it is not available as a default in Photoshop, you can load a Web-safe color cube palette.

Speed Tip:
Preloading or “cache” graphics. Each time users access a Web site, the server downloads (“caches”) graphics to their hardrives in order to display a site. As Web professionals, we can take advantage of cache by using the same graphics in other pages. For example, if you use “spacer” GIFs, create one in a size 1 x 1 pixel and refer to this same graphic file in other portions of the Web site. The only thing you have to do is change the dimension when you refer to it. This way, the server understands that the image was already downloaded and the user’s computer displays the Web site faster. More info: Single-Pixel GIF Trick by Creating Killer Web Sites.


Audience Considerations | Graphic Format Tips | Techniques | Resources