home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeWeb Design in a NutshellSearch this book

3.4. Graphics on the Web

Print designers need to adapt their graphics production skills for the Web to take into account the peculiarities of graphics that are distributed over a network and displayed on computer monitors.

3.4.1. Graphics File Formats

As of this writing, nearly all the graphics that you see on the Web are in one of two formats: GIF and JPEG. A third worthy contender, the PNG file, is struggling for browser support and attention. What follows is a very brief introduction to each of these online graphic formats. More detailed descriptions are provided in the chapters dedicated to each format.

3.4.2. Image Resolution

Simply put, all graphics on the Web need to be low-resolution: 72ppi (pixels per inch). Since web graphics are always displayed on low-resolution computer screens, higher resolution files are unnecessary.

Working at such a low resolution can be quite an adjustment for a designer accustomed to handling the 300dpi images appropriate for print. Most notably, the image quality is lower because there is not as much image information in a given space. This tends to make the image look more grainy or pixelated, and unfortunately, that's just the nature of images on the Web.

Measuring Resolution

Because web graphics exist solely on the screen, it is technically correct to measure their resolution in pixels per inch (ppi). Another resolution measurement, dpi (dots per inch), refers to the resolution of a printed image, dependent on the resolution of the printing device.

In practice, the terms dpi and ppi are used interchangeably. It is generally accepted practice to refer to web graphic resolution in terms of dpi.

3.4.4. Web Graphics Production Tips

The following is a collection of tips for maintaining quality in web graphics. Work in RGB mode

When you are creating graphics for the Web, it is important to work in the RGB color mode. CMYK mode, while common to the print world, is incorrect for web graphics. When creating a GIF file, do your designing and editing in RGB mode and convert it to Indexed Color as the final step before saving. It's a good idea to hang onto an RGB original for later changes. To make this process easier, web graphics tools such as Photoshop 5.5 and higher, ImageReady, and Fireworks have separate export functions that create the final graphics while retaining the RGB original. JPEG graphics should simply be saved in RGB mode.

If you need to make adjustments to an existing GIF, you should convert it back to RGB mode before editing. When an image is in indexed color mode, the colors are restricted to those in its defined Color Table, and no new colors can be added. This prevents the color blends and adjustments that occur when image elements are transformed (resized, rotated, etc.) or when adding anti-aliased text. When the image is in indexed color mode, any text you add will automatically have aliased (stair-stepped) edges. (If you only need to crop the GIF or make other changes that don't require the addition of new pixel colors, it is okay to work directly in indexed color mode.)

The typical steps that should be taken when editing an existing GIF are:

  1. Open the GIF in the image editing tool.

  2. Change it to RGB color mode (in Photoshop, select Image Figure Mode Figure RGB Color).

  3. Edit the image as necessary.

  4. Change it back to indexed color mode, setting the desired palette and bit-depth.

  5. Save or export to GIF format. Resizing tips

The following tips pertain to resizing web graphics:

3.4.5. For Further Reading

If you feel you need more of a primer on making the transition to web design, check out my other book, Learning Web Design (O'Reilly, 2001), which is specifically for beginners. You can get more information about it at http://www.learningwebdesign.com or on O'Reilly's web site at http://www.oreilly.com/catalog/learnweb/.

For more information on basic design principles as they apply to the Web, see Lynda Weinman's very popular book, Designing Web Graphics, Third Edition (New Riders, 2000).

One of the best online resources for designers is Joe Gillespie's site, Web Page Design for Designers (http://www.wpdfd.com). It is packed with very detailed explanations of how type and graphics work on the Web.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.