CSU Home > CSU Webs > Styles & Standards > Appendix E - Graphics

Appendix E: Graphics

Images are big consumers of bandwidth that can result in increased download times for Web users. Reducing the Web page load time by reducing graphic file sizes is a great way to increase a page’s overall ease-of-use. Try to keep the total size of the page plus image files under 40K.

General rules for graphics

• GIF (.gif) is the best file format for text and line graphics.

• JPEG (.jpg) is the best file format for photographs and image-only graphics.

GIF file size
GIF (.gif) is the best file format for text and line graphics. A GIF can have a maximum of 256 unique colors. By default a GIF automatically assumes that an image has 256 unique colors. For simple images, like buttons and bullets that use only a few unique colors, this default setting of unique colors creates wasted file space. To reduce this wasted space, render GIF images with a smaller number of colors. Size savings are achieved at 16, 32, 64, or 128 colors. (Going below 16 colors is not recommended)
Use the smallest number of colors that render the image acceptably, without compromising its quality.

JPEG compression and file size
JPEG (.jpg) is the best file format for photographs and other image-only graphics that have many subtle color variations. Imaging software programs usually give you the option of compressing JPEGs. Compression options are usually referred to as "high,” “medium,” or “low." With high compression, the size of the file decreases but the quality of the image also decreases. It may require experimentation to find the right amount of compression to save bandwidth without compromising the image. We recommend you save a copy of the original image before you experiment with compression.
The Web Development Team recommends using photos that are clear and in focus. We also recommend that you use images that show students learning outside of the traditional classroom, and that show people’s faces. See image below for example.

The Web Development Team can assist in taking pictures as well as developing or creating graphics for your Web site.