Tips for Web Graphics

Creating graphics for web pages is not just a simple matter of converting an image to the .gif or .jpg format. Anyone who has tried to do so can attest to the disastrous results if care is not taken in the preparation of the image.

Choosing Between .GIF and .JPG/.JPEG Formats

GIF = Graphics Interchange Format
JPEG = Joint Photographers Experts Group

In general, use .GIF for "computer art" images and graphics with large blocks of color, use .JPG/.JPEG for photographs and other complex images. Note that .GIFs build on the screen gradually. For large graphics, such as .JPG photographs, provide a low source alternative to give your viewers something to see immediately: resample your original image to 575 pixels or less, then save it with the maximum compression.

General guideline for estimating the speed of loading a graphic to the screen: allow for one kilobyte per second. Example, Graphic of 1,326k: 1,326 divided by 60 = 22.1 minutes. This is based on a 14.4 BAUD modem, but realize that many netizens use these older, slower modems, even if you have the "state of the art" modem of choice. Don't test the patience of the majority!

Suggestions to enhance the quality of your image:

• Background: Decide on the background color of your web page first. Your graphic will need to have the same color background if you want your graphic to look as if it's "floating" on the page. Otherwise, create a frame with a contrasting color.
• Edges: Draw a box around the design, with neither outline nor content, allowing some space at the outer edges of your design before converting the combined box and design to .gif or .jpg. This avoids sliced-off tops, bottoms, and sides.
• Bitmap Conversion: Convert your design to a bitmap, then to RGB (24-bit), then to a palette (8-bit). This is important! Your image will not look clean if it is not first converted to 24-bit, then to 8-bit, even though some programs will permit direct conversions from higher bit levels. Ideally, the palette will be one designed for the web such as Internet Explorer or Netscape Navigator. This is often a "custom" setting, not a default choice. Perform these conversions using a paint program, not a drawing program, to achieve the best results.
• Preferences: Conversion preferences that may enhance the final image: anti-aliasing, super-sampling, interlaced, and 300 dpi. Interlacing improves the detail in a .GIF image such that it may be comparable to the quality of a .JPG/.JPEG.
• Complex Colors: If your design uses gradient colors, choose "dithered" in the bitmap conversion, and error diffusion in the palette conversion. A little experimentation with the options permitted by your particular software program should eventually produce the desired results.
• Size: Resize your image to the exact size you wish to use for it in your web page before saving it in its final form. Do not try to change that size using HTML code. Specify the original image's width and height in HTML code to speed page layout. Be sure to make the image as small as possible to accomplish your purpose in order to minimize the time it takes to load your page to the screen. This may take some experimentation, but it's well worth it in the long run. For all netizens' sake, try to keep graphics under 20 kilobytes.
• Testing: Test your pages with your display set to 640 x 480 resolution, because this is what most of the general public uses.

A Note About Animated Graphics

Netscape Navigator give precedence to the SRC command, looking for animated .GIFs, whereas Internet Explorer looks to the DYNSRC command for .AVI files. Use both types of files if possible.

Return to Ideas & Images Home Page.


Fleur-de-lis Designs
1607 Agawela Ave
Knoxville, Tennessee 37919
tel 865-540-9990 fax 865-540-9989