TWU ID wiki / Preparing Images for the Web

TWU Blogs

Preparing Images for the Web: A Graphics Bonus Page

This is a "bonus" page for those of you who plan to do some of your own graphics work.

Preparing Images for the Web

Suppose you have scanned artwork, a banner image, or a photograph that you want to include on your course page. What are the steps in making this image Web-ready? While the actual procedures will vary according to the project and the software you are using, here are

some basic information to help you make decisions on how best to edit and optimize your files.

Basic Steps for Preparing Images for the Web

Preserve a copy of the original.
Make corrections to the image in terms of cropping, tone, and sharpening.
Adjust the image size.
Make sure the resolution is set to 72 ppi.
Preview the image in .gif or .jpg formats and select appropriate quality.
Save.

Save the Original

The first step in preparing images for the Web is to preserve a copy of your artwork or photograph in its original size and native file format. (This could be TIFF, PSD, or something else.) Once you edit and compress an image for the Web, you lose data that cannot be brought back, so it is important to keep a copy of the original in case you should ever need it again.

Making Corrections to the Image

Your image may need corrections, but you will have to make this determination. You may decide you do not want the entire image for your page and will need to crop it. If you are unhappy with the range of tones, saturation of colors, or feel that it needs sharpening or blurring, you can make these adjustments using your image-editing software as well. Below is a selective list of corrections you may need to make to your images:

Cropping

Use the crop tool to select the portion of the picture you want to use in your page. After selecting the tool, drag it over the image to create a marquee. When you are happy with your selection, you can usually double-click in the application to crop it.

Levels

Adjusting levels will alter the range of tones (shadows, midtones, and highlights) across the image. Many image editors offer an "auto-levels" feature that will make the adjustments for you, but you can also adjust them manually.

You can also manipulate brightness, contrast, color balance, hue/saturation, and apply filter effects at your discretion.

Adjusting Image Size

The next step in preparing images for the Web is to scale the image to the size you want it to be. Some people rely on the <height> and <width> HTML attributes on the Web page to resize a large graphic in the browser. Two problems with this method are:

the quality of the image suffers when left to the browser to scale it
the original file is still large, and it takes more time for the source file to load

Pixel Dimensions

Adjust pixel dimensions for horizontal width. If you have "constrain proportions" checked, it will automatically scale the vertical dimensions so that the proportions of the image do not distort. Remember that 535px width is the maximum safe viewing area for any browser. It is best to keep the horizontal width to 535px or under to prevent users from having to horizontally scroll your page.

Optimizing and Saving the Image for the Web

Most image-editing software now offers an option in the File menu called "Save for the Web." In Fireworks, you can choose "Export Preview" or "Export Wizard" from the File menu. For whatever program you are using, find the option that lets you preview the different file formats and quality levels so that you can make the best choice for your image. One word of caution ... if the file you are working with was in JPEG format originally, it is best that you simply save the file after making corrections and adjusting the size. If you re-optimize it as a new JPEG, the quality will suffer considerably.

Resolution

Images on the Web are displayed at 72 dpi. If your images are saved at a higher resolution, the quality will not be improved, and the file size will be larger. Be sure you have set your resolution at 72 ppi. If you want to provide higher resolution images for printing, you can create a thumbnail and link to the image file for downloading. When you have chosen "Save for the Web," it should convert the image to 72 ppi.

GIF or JPG?

If your image is a color photograph or other continuous-tone image with many color variations, you will select JPG for your file format. (GIF will not provide you with the color range you need or a small enough file size for your page.) Then you should experiment with different quality settings. Your image-editing software will show you options for previewing in a range of percentages of quality. Be sure to pick a good balance between quality and file size.

If your image is a logo, line art, or other image with few colors and broad areas of color, you will be happier with GIF as your file format. It produces the smallest file size for these types of images without losing quality. Preview your image in GIF format. You will notice several options: adaptive, Web, selective, true. Try each and see what yields the best result. But before you save, you have another option to make your file smaller. You will next have to make a decision regarding color palette.

Color Palette

There are two basic kinds of color palettes: full RGB and indexed color. The complete RGB palette includes millions of colors, and is the only palette you can use if you have selected a JPG file format. An indexed palette contains 256 colors or fewer. By reducing the number of colors in a palette, you can dramatically reduce the file size of your image. You will see options in your software to reduce the size of the palette. Usually the choices are 256, 128, 64, 32, 16, and 8. Begin with 256 and reduce from there. Watch your image quality carefully, and monitor the file size as you do. Select a balance between the best quality and the smallest file size.

Once you have previewed and selected your file format, you are ready to save your image and place it in your Web page.

Tutorials and Books for Preparing Images for the Web

There are many resources available to help guide you through the process of creating and editing

Web graphics. Here are a few resources:

Designing Web Graphics (Lynda Weinman ISBN: 1562059491)

Optimizing Web Graphics (Webreference.com)

Yale Style Manual: Graphics