Graphics and text are at the center of every Web-based e-learning program. Graphics can be the buttons on the page, a beveled navigation bar across the top, a graph or pie chart, or a slightly textured background. Graphics can be found in image repositories, generated from scanned images and hand-drawn artwork, or created with a graphics software package. Here are some factors you’ll need to consider.

Image file size. Anyone who has ever used the Internet to download a file knows the difference between downloading a file through a broadband connection (the fast connection you have at your office) and a telephone modem. A file that takes seconds or minutes to download via a broadband connection can take hours and hours on a telephone modem. Smaller file size images are better. Keep this fact in mind as you and your team create graphics for your e-learning. Saving space by optimizing (see below) and trimming graphic size can make a huge difference to the learner who’s waiting for the graphics to load into a browser window.

Image resolution. E-learning graphics are usually viewed on a monitor with a resolution of between 72 and 96 dots per inch. This resolution is significantly less than the pixel size necessary to produce a quality print image. With the reduced file size comes a loss of tiny detail. Don’t fret about this; the loss of details will not be noticed on the computer screen. The reduction of image quality is usually performed by the designer using image editing software (this is called optimizing the image). The designer compresses the pixels of the image in such a way that the overall file size is reduced, but the image still looks good on screen. After the image has been optimized, it will look fantastic on the screen and will download quickly.

Raster graphics. Raster graphics are also known as bitmapped graphics. They are composed of a grid of pixels. Most graphics you’ll use for e-learning will fall into this category. Raster graphics tend to be larger than vector graphics in terms of file size and are what’s usually created using Adobe Photoshop or Macromedia Fireworks software.

Vector graphics. These are composed of lines, curves, and other geometric shapes. Instead of a defined grid of color that forms an image, vector graphics are a series of mathematical functions that tell the computer how to display the color, shapes, and lines. Because of the high detail that the functions create, vector graphics can come close to simulating real-life painting effects. Software like Adobe Illustrator or Macromedia Freehand can create vector graphics; these programs can save images into formats that can be used by other programs to create raster images. If your design calls for an animation, you may choose to use a program such as Macromedia Flash, which uses and publishes vector graphics. Flash movie graphics appear sharp and quick but have the advantage of small file sizes and no degradation of image quality.

GIF (Graphics Interchange Format). This type of graphic element is the most popular on the Web. GIF files are small and load fast. They are perfect for line art and drawings with large areas of a single color. GIF images are 8-bit, meaning they can only display 256 colors. (The browser-safe palette uses only 216 colors.) GIFs are not very good for displaying complex, colored images like photographs or paintings, but they can be saved with a transparent background (allowing the background color or image on your Webpage to appear behind the graphic). Several GIFs can also be saved together as a single file and then run as an animation.

JPEG (Joint Photographic Experts Group) format. JPEG graphics are designed specifically for complex color photographs and can retain millions of original colors of an image. JPEG images also have the advantage of taking up very little file space while producing vibrant colors. With JPEGs, you can control how detailed your images need to be and weigh this against the learner’s available bandwidth. Macromedia Fireworks and Adobe Photoshop allow control of image quality, and the final decision is a “graphics juggle” between file size and image quality.

PNG (Portable Network Graphics) format. PNG is a format that is growing in acceptance, but its use is still limited. Most current browsers can display these images properly, but unless you are 100 percent sure about your learners’ environment; don’t use them. PNG combines the best of JPEGs and GIFs. PNG graphics can be made transparent like GIFs but with the color depth of a JPEG. The images are easily imported into other programs, such as Macromedia Flash. PNGs also create nice sharp edges over a transparency.

Choosing a Web graphics software program

Here are some questions to help you select an application.  

• Do you plan to create images from scratch? If so, choose a vector-based tool like Adobe Illustrator or Macromedia Freehand.
  
• Are the graphics to be included in the e-learning program photographs, scanned images, or photorealistic images? Choose a raster-based tool like Adobe Photoshop, Macromedia Fireworks, or Jasc Software’s Paint Shop Pro. A raster-based program can easily edit photographs.
  
• Are the final images to be used outside the Web environment (for example, in magazines, on T-shirts, or on posters)? Use a high-end raster program like Adobe Photoshop that can create high-dpi images. 
  
• Is your goal to incorporate images that are more artistic and look like line-drawn clip art? Your choice should probably be Adobe Illustrator or Macromedia Freehand, which include palettes of effects and styles, including brush strokes. 
  
• Will the images need to be retouched or altered? Consider Photoshop or Paint Shop Pro, which both contain tools that can dramatically improve poor-quality or damaged photographs and images.
  
• Will the images come from different sources and be different file types and, therefore, require optimization and conversion before they will work in your e-learning program? Your choices for this task include raster-based tools like Photoshop, Fireworks, or Paint Shop Pro. Each has powerful optimization and compression tools for reducing file size, as well as the ability to import just about any graphic type.

Published: August 2004