Image File Formats

Color Representation

True Color (24 bit): each pixel color is represented using 3 bytes, one for red, one for green, and one for blue. This is referred to RGB color. Since a single byte can represent 256 different shades, there are a total of roughly 16 million (256x256x256) colors that can be represented.

True Color (32bit): This is the same as 24 bit true color except that there is an extra byte, usually referred to as the alpha component, used to specify transparency.

16 bit Color: Each pixel is represented using 16 bits or 2 bytes. There are 5 bits for red, 6 bits for green, and 5 bits for blue. The total number of possible colors is about 65 thousand (256x256).

8 bit Color: Here, 256 different 24 bit colors (can also use 16 or 32 bit) are selected out of the 16 million possible. These 256 colors are called the palette. Each pixel in the image is represented by a single byte. This byte is not the color but rather is the location (index) of the color in the palette. When an image is stored, the 8 bit color index for each pixel is saved along with the palette. For a large image this can be significant space savings.

File size =
6x3 bytes (palette) +
7x5x1 bytes (indices)
= 53 bytes total

File size = 7x5x3 bytes
= 105 bytes total

Image Representation

Images are simply 2D arrays of colors where each color is represented using one of the above color formats (8, 16, 24, or 32 bits). Raw (uncompressed) images can be very large. For example, a 800x600 image stored in 32 bit color format would take

(800x600 pixels)x(4 bytes)= 1.92Mbytes.

Fortunately, images contain a lot redundancies. Consider the extreme example where our above 800x600 image happens to be all one color (not a particularly interesting picture). To store it in raw format requires 1.92Mbytes . However, it can also be can be saved very efficiently by specifying the single color (4 bytes) and the size of the image. This format will take on the order of 10's of bytes instead of megabytes. While this is an extreme case, all images can be reduced to some extent.

Computer algorithms exist that extract the redundances so that the image can be stored more efficiently (We say the image has been encoded or compressed). Often the image size is significantly reduced with little or no loss in image quality. Which algorithm works best depends on the image and the accuracy you desire.

Many different image formats are available. Each format is associated with a different file extension. (e.g. .gif, .jpg. .tiff, .png, .tga, .bmp, etc) Each of these formats uses at least one but often more than one type of image encoding.

Some Terminology

Types of Encoding

Common File Formats

Different image formats may use one or more of the above encoding techniques.

GIF Characteristics:

JPEG (Joint Photgraphic Experts Group) : JPEG is a lossy format. Once can specify the amount of compression (and thus the amount of information loss) by setting a quality level. Unlike GIF, JPEG is not limited to 256 colors. When an image has many different colors such as in photographs of natural scenes, JPEG is the format of choice. JPEG, however, does not allow for transparency.

PNG: PNG is a more recent file format that is not supported by older browsers. PNG-24 uses 24 bit color, is lossless, and allows transparency. The size of the files can be considerably larger than JPEG. PNG-8 assumes a palette. Like GIF, if the image has a limited number of colors, the compression will be lossless and will be considerably smaller than PNG-24.

There are many other image formats such as Targa, PICT, BMP, .... However, these formats are not supported by any browsers.

For a summary of file formats (not just graphics) click here or here.

General Rule of Thumb: