Home Projects > Preparing Web Graphics (See Art & Illustration)

Preparing Web Graphics and Graphic Links, page 1 of 7
Dr. Linda M. Perry

In this exercise:

A JPEG exercise

A GIF exercise

Placing & linking graphics

Once you have a picture or graphic scanned into a computer file, open it in Photoshop and save it in Photoshop's native format, PSD. You'll want to convert the format to GIF or JPEG for the Web. Review the lecture notes on the World Wide Web to see which format is most appropriate for this piece.

GIFs are best for simple graphics with mostly solid areas of color. Examples of art best formatted as GIFs are logos, cartoons, and type-as-art. GIFs also support transparencies, which are necessary to make an outline, or silhouette. GIFs also are used for animation and rollovers. GIFs only support the 256 index colors that all color monitors can display, including the 216 colors that all browsers can display. GIFs use a lossless compression, meaning that no data is lost during compession.

JPEGs are best for continuous-tone images (photographs), or reproductions of halftones, especially four-color process halftones. JPEGs support the millions of colors that 24-bit monitors can display. JPEGs use a lossy compression, which discards some data from the image to reduce the file size, so that some quality is lost. JPEGs recompress and lose data EVERY TIME THEY ARE SAVED, so don't resave a JPEG if you can help it. In a Source Art folder, keep a copy of your images in the PSD format for when you need to manipulate or refresh a JPEG.

All images for Web pages should be saved at 72 ppi. It won't make your image look any better or clearer to save it at a higher resolution, because all computer monitors display images at 70 to 75 ppi. So follow the industry standard and save for the Web at 72 ppi. Change the resolution first, as that will affect the image dimensions. Choose Image > Image Size. In the Image Size dialog box, under Document Size, change the resolution to 72 pixels/inch.

Image Size dialogue box


Your goal in saving images for the Web is to strike a balance between image quality and file size. The images on your Web pages should be saved at a file size of no more than 35K. Any larger than that would take too long to load over a dialup connection. JPEGs' file size can be further reduced by adding more compression. Photoshop refers to this adjustment as "quality." You can also add blur, decrease saturation and decrease contrast to reduce file size. GIFs' file size can be reduced by reducing the number of colors and reducing dithering.

1 2 3 4 5 6 7

Next

Back to Schedule

Back to Projects