Creating Web Graphics

So your nonprofit is ready to build its first Web site. You've written all the copy and gathered all the electronic documents you plan to put on public display. The textual content is all there -- but now you have to make it come alive with images. These can be photographs of your staff, your offices, the year-end holiday party, your clients, or illustrative drawings that display your logo, samples of your work, or simply ornamental touches that add visual interest to the text.

Your challenge is to create eye-pleasing graphics that promote and augment your mission and highlight your accomplishments to the community, while at the same time making sure your viewers don't sit there forever while your site slowly paints itself onto their screens.

To illustrate your Web site, you need to be familiar with the graphical file formats that computers can read, and know which ones can be displayed by most Web browsers.

A file is an electronic document created with a computer program. A file is portable: You can email it, put it on a ZIP or floppy disk, burn it onto a CD-ROM or DVD, or you can place it in an HTML document to be viewed on your Web site. A file format identifies the kind of document for the computer -- be it text, graphic, spreadsheet, audio, video, or any other type. While most computer programs save files in their own native formats by default (a document created with Microsoft Word is in Word format, for example), most programs also can save documents in non-native formats so that people with different programs and operating systems can read them. This story covers the major file formats used for graphics on the computer and on the Web.

Computer Graphics: Vectors and Rasters

There are two kinds of electronic graphical images: raster and vector. These image file types are not platform-specific. They can be created on a Mac, a PC, or a Unix-based computer and viewed on any other computer.

Vector

Vector graphics use a geometric formula to describe an image. They are made up of mathematical splines or vectors and are sometimes called "object oriented" because they contain information about the objects they describe, such as shape, position, and color. Generally, illustrations, drawings, and other line art are vector images. That makes resizing them easy, as they retain their shape and smoothness regardless of their dimension. Vector images have two major attributes: stroke, the outline, and fill, the color. PICT and EPS (Encapsulated PostScript) are two popular vector file formats. Illustration programs such as Adobe Illustrator, Freehand, CorelDRAW, and others are used to create vector images.

Vector Samples

These vector graphics are screen shots of lettering done in CorelDraw. The smaller image is enlarged without any loss of quality.

Raster

Raster images (sometimes called bitmapped images) are based on a collection of pixels or picture elements laid out on a grid. One or more bits of computer information are mapped to each pixel, thus creating the image. Raster images can be resized, but enlarging or shrinking them too much produces jagged edges. Raster images are created and edited in image editing programs such as Photoshop, Photoshop Elements, and Fireworks (which works with both raster and vector images). Pixel-based image editors let you make an almost infinite number of changes to any photo or raster image.

Most images on the Web are raster images -- whether they began life as rasters or vectors. Most illustration and image editing programs let you convert your images to a file format that is compatible with Web browsers. Vector programs can rasterize an image (convert it to pixels) to prepare it for Web viewing.

Raster Samples

These files compare enlargements of the same lettering in Photoshop. The smaller image, opened as a bitmap, shows jagged edges when enlarged.

These bitmapped images show the degradation in quality when a photo is enlarged.

Compressed Graphics

The chief difference between ordinary computer graphics and Web graphics is compression. Images must be small and fast to travel through the Internet from the server where your Web site resides to the viewer's computer. The Internet is like a thin pipe. An image is a fat thing. Somehow the image must be slimmed down so it can download -- pass through the Internet -- easily and quickly. This is called optimization.

Not only must the image be small and compressed, it also must be saved in a file format that browsers such as Internet Explorer and Netscape understand. There are three graphical file formats in popular use: GIF, JPEG, and, to a lesser extent, PNG. When you optimize an image by converting to a compressed format, its dimension stays the same -- a one-inch square on your computer will be the same one-inch square on your computer when compressed (although different viewers' monitors and settings will determine how large the image appears on their computers). Only its file size changes according to the compression formula used for its format.

Broad bandwidth connections to the Internet, such as cable modem, DSL, and T1 certainly make large images download more quickly. However, not all viewers have access to broadband technology.

Web Graphics: GIF, JPEG, and PNG

GIF

Short for Graphics Interchange Format, GIF (pronounced with either a hard or soft g depending on what area of the country you come from or how many cups of coffee you've had) is the oldest compressed image format still in popular use. The GIF format was created by Unisys, which still holds its patent. However, it was the online service CompuServe that in 1987 first adopted GIF as a standard for displaying digital images online.

This is important because in 1995, Unisys began to collect royalties from software developers whose products could read and output GIF images. A controversy ensued, out of which a new file format, PNG, was born (more about that later). However, at present, and for the foreseeable future, the GIF format remains dominant. Web site designers and just plain folks can create GIFs to their heart's content and not pay a cent for the privilege.

GIFs are mostly used for images derived from illustrations. These typically contain large blocks of the same color or are line drawings. GIFs are 8-bit graphics (also known as indexed graphics) that can hold eight bits of information, meaning you get up to 256 colors per image. GIF is a "lossless" compression technique because it does not lose information when the image is compressed. Though GIF retains 256 colors, you do not have to use 256 colors. The fewer colors you use, the smaller your image will be and the faster it will download.

GIFs come in two flavors: GIF87a and GIF89a. GIF87a was the original CompuServe specification, which did fine with the basics of displaying images in a browser, lossless compression, and interlacing, the technology that lets images flow into the browser window gradually (usually in four passes) rather than keeping the viewer waiting for a blank area of the page to fill in.

GIF89a came along in 1989 as an improvement to 87a. It supports two additional technologies: transparency and animation. GIF 89a lets you designate one color (usually the background color of an image) as transparent, thus dropping the background from sight. This lets you place an oddly shaped illustration over a different color or patterned Web page. GIF 89a also can store several different images in one file, and allows them to be displayed sequentially, for an animated effect. These are known as animated GIFs. Animated GIFs are responsible for those obnoxious blinking banner ads you see all over the Web. However, used responsibly, animated GIFS can add depth and style to a Web site design.

Not that you can't compress a photo using the GIF, but the reason why it's not advisable is because its method of compression (the LZW algorithm, named for Abraham Lempel, Jacob Ziv, and Terry Welch, its inventors) is most efficient for large blocks of flat color. Continuous tone images like photographs are significantly larger when compressed as GIFs, and may need more than 256 colors to look good. That is why a different file format has become the standard for photographic images.

JPEG or JPG

JPEG (pronounced "jay-peg") stands for Joint Photographic Experts Group, and it is the most common compressed format for photos on the Web. JPEGs work differently than GIFs, and are better suited for continuous tone images and those with subtle gradations of color such as drop shadows and gradients. The JPEG is especially useful for preserving the subtlety of skin tones.

As it compresses an image, the JPEG format will discard information that it considers non-essential. Thus, it is a "lossy" compression technique -- it loses information in compression. However, this is not a huge concern with photographs because often the information lost is not noticeable on the computer monitor where it will be viewed.

The reason JPEGs can get away with throwing out information is that they are 24-bit graphics (not 8-bit) and can display 16.7 million colors -- more than enough to represent most colors. You can save your JPEG as a progressive JPEG (similar to the GIF's interlace option), which flows a picture onto the page in alternate columns or rows until it is sharply focused. However, progressive JPEGs have fallen out of favor for photographs, especially photos of people. If you've ever watched someone's face display in four passes, you'll understand why. The JPEG format, unlike GIF, does not support transparency or animation.

PNG

PNG (pronounced "ping"), which stands for Portable Network Graphic, is a relatively recent addition to Web file formats. It was developed by Thomas Boutell as a standard graphics one-stop-shop to replace both GIF and JPEG. This has not happened yet. PNG supports both 8-bit indexed color and 24-bit color, allows for transparent backgrounds, various degrees of transparency, and interlacing. Theoretically, it combines the best of both worlds.

So why hasn't PNG taken over the online world yet? While PNG images can be viewed in many browsers, their implementation across platforms and through operating systems is not reliable enough for most Web designers. You can optimize your Web graphics in PNG format, but some people will not be able to view them in the way you intended, with problems likely arising if the image has some areas of transparency.

But there's another problem. PNGs tend to be somewhat heftier then their GIF or JPEG counterparts. And hefty graphics mean slower downloads. For more information about the PNG format visit the PNG Home Site.

Comparison of Various JPEG Compression Values

The JPEG compression setting determines how much information is kept in your image, and how clear it is.

GIF Photo Compression

The GIF format is inefficient for compressing photographs.

Comparison of PNG Formats

PNG graphics tend to offer slower downloads as the file sizes are larger.

SVG

Scalable Vector Graphics (pronounced with its initials S-V-G) is a Web file format that is currently under development. SVG is an open standard format based on XML or Extensible Markup Language, which is widely considered to be an eventual replacement for HTML, the current markup language of the Web. SVG enables Web graphics to be generated dynamically and with special, interactive effects. These graphics can be integrated with databases and e-commerce systems, and can serve the viewer real-time images. You must download a plug-in to view SVG files within some browsers, but others -- such as Opera and Netscape -- include native SVG support. You probably won't be producing SVG files just yet, but it's good to know that the format is out there, and that programs such as Adobe Illustrator support it.

What to Do Now

If you are just starting to work with computer graphics for the Web, stick with this formula: GIF for graphic art; JPEG for photos. Shrink down your GIFs to as few colors as possible. Experiment with high-, medium-, and low-quality JPEGs until you get the best image at the smallest file size. Many programs have demo and trial subscriptions that you can download from the Web and try out free for a limited time. Take advantage of free trials to find the products that best suit your needs.

When creating Web graphics, you have a choice of buying products that are suited to both Windows machines and Macs, as well as integrated software suites that are capable of processing both raster and vector images. If you use a Mac, check out GraphicConverter X/Classic, a shareware utility from Lemke Software that converts (imports and exports) images to a vast variety of cross-platform file formats.

After that, there's only one thing left to do: Have fun.