Staff Handbook: Skills : Image Files

Introduction

There are many types of graphical and textual content that simply cannot be reproduced using plain HTML, including:

• graphs
• logos
• photographs
• equations that use special characters
• text in non-European languages (Chinese, Japanese, Korean, etc.)

To represent these types of content, we typically use bitmapped images. A bitmapped image is simply a series of colored squares which appear to be an image when laid out in a grid. When we work with graphical content sent by contributors (ejournal editors, etc.), a graphic is either delivered in a usable form, must be converted somehow. Other graphics (logos for new sites, etc.) must be created from scratch. Each of these possibilities is covered below.

File Format

Currently, there are three supported formats that can be displayed as part of every web page:

1. CompuServe GIF (.gif)
   The GIF format, developed by CompuServe, is best used to store screen-quality images that do not contain many colors. GIF files are typically very small, but cannot reproduce the range of colors necessary to reproduce photographic images (use the JPEG format instead -- see below).
2. JPEG (.jpg)
   The JPEG format is primary used to store photographs. JPEG is a "lossy" format, meaning that some image quality is sacrificed in order to produce much smaller files. Images of higher quality should be stored in TIFF format instead (see below). Non-photographic images such as graphs and charts will be smaller if stored in GIF format instead (see above).
3. TIFF (.tif)
   The TIFF format is an archival format, meaning that it does not sacrifice image quality in order to reduce file sizes. TIFF images are excellent for storing detailed, high quality images. However, TIFF files tend to be much larger than either JPEG or GIF images, and cannot be opened using most web browsers without installing and configuring additional viewing software or plugins.
4. PNG (.png)
   The PNG format is an open standard developed to replace the Compuserve GIF format. Like GIF files, low-color images stored in PNG format are typically quite small. Unlike the GIF format, the PNG format can also be used to store high-color images, which means it is also suitable for storing photographic content. The PNG format is not as widely supported as the JPEG or GIF formats, but its popularity is growing.

If an image is not in any of these formats, it will need to be converted. For more information on converting images, visit the section of the handbook dealing with Photoshop. There is also a page dealing specifically with converting graphics from a Word document.

Image Resolution

A bitmap image is stored with an indication of how many pixels should be displayed in an inch of output one pixel wide. This number is called the resolution of the image. The higher the resolution, the more disk space an image will require to store, and the more memory an image will require when loaded as part of a web page. Print resolution is generally 300 dpi or higher. Typical screen resolution is 72 dpi, so an image stored at 300 dpi will be approximately four times larger than expected when displayed as part of a web page. This is why print-quality images must be resized before they can be included in a web page. For information on resizing images, check out the section of the handbook dealing with Photoshop.