8 Web Graphic Tips

Tips for making Web graphics small, fast, and smooth. Here are a few quick tips to get you started on the road to Web graphics wizardry.

TIP #1 - Avoid Background Color Shifts

If you try to code the background color of a Web page to match the background of an image placed on the Web page, the colors may not exactly match in all browsers or on every monitor. To help avoid color shift problems, create a small GIF (16x16 pixels or so) of the desired color and use it as a background tile.

TIP #2 - Avoid Halos

Avoid halos by working with images in a layer above another layer that matches your Web page background. Anti-alias the image to the background, then cut away as much of the background as possible.

TIP #3 - Anti-Alias
Smoothing the edges of images or text by blurring or blending the edges into the background is known as anti-aliasing. Most bitmapped images, with the exception of very small text, require anti-aliasing to get rid of jagged, rough edges. While most graphics programs will have an anti-alias setting, experiment to get just the right amount -- too much and your images will appear blurry, too little and they will appear jagged.

TIP #4 - Touch Ups

Pixel-level touch-ups can improve the appearance of bitmapped images and make them compress to smaller file sizes. (Vector images can be enlarged or reduced without loss of sharpness or quality.) Zoom in on images in a graphics program to work at the pixel level. Clean up the image by getting rid of off-color pixels. Use smudge or blur tools to smooth out rough edges.

TIP #5 - The Right Size

Always resize images using a graphics program. Never resize images by setting the HEIGHT and WIDTH attributes of the IMG tag to size that is different from the actual dimensions of the image.

TIP #6 - Optimize & Compress

Understanding how file compression works will help you create images that compress to smaller file sizes. In general, blurring reduces the size of JPEG files; decreasing the number of colors used and making each color area as large as possible will reduce the size of GIF images.

TIP #7 - The Right Format

Save images in the right file format. Images with large areas of solid color (such as vector graphics or illustrations) should be saved as GIFs. Images with lots of shading or gradients (such as photos) should be saved in the JPEG format. Very small photos are the exception, as they are often smaller when saved as GIFs.

TIP #8 - Only Save a JPEG Once

To avoid deterioration of a JPEG image, avoid re-saving it. Every time a JPEG file is saved, it loses information and, therefore, quality. Save JPEGs in a lossless format (such as TIF of PSD). Then, if you need to make changes to the image later, you can work with the non-JPEG file, saving it as a new JPEG when you're done.