Web Graphics

As part of developing your own web site, you will need to become familiar with different techniques for incorporating graphics into your web pages. Since most of us are not graphics designers, it is important that you understand both the nuances of creating graphics and how they work within a web site. 

Graphics File Formats

Graphical images are stored on a computer in a particular graphics file format. Because graphics include color combinations and great levels of detail, they tend to take up more space than text. Therefore, it is important that you choose the right graphics format for your site. Each format has advantages and disadvantages (typically a trade off between quality and size). In general, you want to pick a format that will result in the smallest possible file size.

The two most common graphics file formats today are the Graphics Interchange Format (GIF) and the Joint Photographic Experts Group (JPEG). Both formats compress images to conserve space, although quality is sacrificed slightly as a result of the compression process. 

GIF

CompuServe's Graphics Interchange Format (GIF) compresses images in two ways. First, it uses something called Lempel-Ziv encoding, which counts rows of like-colored pixels as a single unit. Second, it limits itself to indexed color. This means that a GIF can have no more than 256 colors, so you may have to reduce the colors in your images to use it. That's why GIF doesn't work well for photographic or high-color images.


JPEG

The JPEG format supports full 24-bit color. It compresses images by accurately recording the brightness of each pixel but averaging out the hues, which our eyes distinguish less accurately. In effect, it records a description of an image, not the literal composition of that image. The viewer's Web browser or graphics application decodes this description into a bitmap that looks more or less like the original image. Tropical birds, for example, are particularly well suited to the JPEG format.


Designing Your Own Graphics

Although very complex, you may choose to design your own graphics files for your web site. Tools are available for purchase that allow you to design detailed graphics files to be used later to incorporate into your web site. Some common graphics design software packages are listed below (and vendors):

Fireworks (Macromedia) 
Photoshop (Adobe) 

Purchasing Graphics

Another way to get graphical images into your site is to purchase a collection of existing graphics. This option is optimal for most developers as design custom graphics can be complex and time consuming. Although the graphics are not original, many software vendors sell huge collections of original graphics that you can choose from. You can also subscribe to services which provide you with fresh original graphics on a periodic basis.

Copying Graphics from the Web

Using your browser, you can copy existing graphics files from web pages onto your hard drive and (re) use the files for your own web page. However, be aware that copying content from a web site may represent a copyright infringement. Carefully read any copyright considerations, terms of use, and any other legal language on the site before you copy someone else's graphics.