Return to Index

Return to Daily Schedule
Go to MS Word Version

Definition of Graphic Types

Choosing a File Format for Web Graphics

Nearly all graphics on the Internet are either JPEG (Joint Photographic Experts Group) or GIF (Graphics Interchange Format) format. Other file formats, such as PNG (Portable Network Graphics) exist, but to be sure that the greatest number of browsers can display a graphic, choose either JPEG or GIF

Use .jpg files for:

  • Photographs.
  • Natural-looking images.
  • A large number of colors, such as in the millions.
  • An image with large dimensions.
  • Use .gif files for:

    • Images that contain transparent areas.
    • A limited number of colors, such as 256 or less.
    • Colors in discrete areas.
    • Black and white images.
    • A small-size image, such as a button on a site.
    • Images in which sharpness and edge clarity are important, such as line drawings or cartoons.
    • Images containing text.
    • Animations.

    The purpose of the graphic will help determine its size, file format, style, and appearance. Before you begin to work on a graphic, ask yourself if the graphic adds something to your site. If the answer is no, don't use the graphic.

    Consider the Total Size of Your Web Page

    • Although estimates vary, many Web page designers suggest that you keep the total size of a Web page from 40 KB to 60 KB for most purposes, and not more than 75 KB.

    • Use the smallest graphic possible. Remember that the JPEG format can produce the smallest size file.

    Alternatives to Graphics

    • If your goal in using a graphic is to catch a reader's eye, you can sometimes accomplish the same purpose in ways that will reduce file size and download time.

    • Consider using a solid color that will complement the color of text on the page, instead of using background images for a Web page.

    • Consider using spot color in blocks in specific areas of a page to call attention to a block of text, or to group information.

    • Consider using different colors in table cells to group information or highlight specific information.