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

• The compression ratio refers to the size ratio between the uncompressed data and the compressed. Thus, a 10:1 compression ratio means that the uncompressed image is 10 times larger than the compressed image.

• Compression techniques can be divided into symmetric and asymmetric methods. Symmetric methods require approximately the same amount of work to perform the compression as they do for the decompression. The asymmetric methods do not. There are instances where one is willing to pay a big cost for compressing an image if the decompression is very fast. Consider images placed on the web. The creater of the image generally doesn't mind if compressing the image takes some time. Besides, the compression is only done once. However, once it is on the web, there may be thousands of people wanting to decompress the image. Here, it is important that it be done as quickly as possible not just because of the volume of people performing the compression but also there is an expectation that an image should be able to be viewed quickly.

• Non-adaptive methods perform the exact same set of operations and coding on all images (e.g. CCITT uses the same dictionary of predefined substrings). Adaptive methods adjust how images are compressed based on the characteristics of the image (e.g. LZW which builds a unique dictionary).

• Lossy vs loss-less. All compression techniques can be characterized as either lossy or loss-less. Loss-less techniques result in no image degradation. The image that results from compression followed by decompression is identical to the original image. In lossy techniques, the original and final image are not identical, however, often the differences are so slight that the view can hardly tell the difference. Lossy compression techniques not surprisingly can result in much greater compression often at little cost to image quality.

Types of Encoding

• Run-length Encoding: Used in tiff and bmp. Each row in the image is represented by a series of numbers. Each number is the number of consecutive pixels of a particular color. For example, consider a black and white image (b=black, w = white). if the row is as follows:

  b b b b b b b w w w b b b b b b b b w w w w w w w w w

  then runlength encoding might give

  7 3 8 9

  If there are more than two colors, the color (e.g. stored as an index) could be included. For example, if there are 3 colors (b, w, r) we get the following:

  w w b b w w b b b b w w w r r r r r r r b b b b r r r

  becomes 2w 2b 2w 4b 3w 7r 4b 3r

  If the image has many colors and does not have large blocks of color then run length encoding would be very poor.

• Predictive Encoding: Similar to run-length encoding except that instead of sending information on the runs of identical pixels, the encoder sends the difference between the current pixel and the predicted value.
• Lempel-Ziv-Welch (LZW): Use in gif and tiff. Is referred to as dictionary based encoding. the algorithm builds a dictionary of data occuring in an uncompressed file. Patterns are identified are are matched to entries in the dictionary. If a substring is not present in the dictionary, a new dictionary item is created.
• CCITT: This is a varient of Huffman encoding. Huffman encoding works by giving items that are frequent a short encoding and items that are infrequent longer encodings. For example, if a file is mostly red and white with a little blue and green, then we can assign the color red the coding "1", the color white "0" and the color blue "00, and the color green "10". These are bits (base 2) representations.
• Discrete Cosine Transform(DCT) Used in jpeg. Lossy.
• Pixel Packing This is not really a compression technique, rather it is just an efficient method of storing contiguous bytes of information in memory.
• Vector images This is also not typically thought of as a compression technique. It does not save the image itself. Rather it is a way of saving information about how to generate the image. This is typical of files created in postscript and Adobe Illustrater. For example, a line can be represented as the location of its endpoints. This type of file effectively has infinite resolution because the image can be generated from scratch onto any canvas using an exact description.

Common File Formats

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

GIF Characteristics:

• Assumes a palette of size 256 colors. If the image has more than 256 colors then there will be some loss of information (called lossy), otherwise, the image will be saved exactly (lossless).
• Colors that are thrown out can be approximated using dithering. Dithering is a technique where two existing colors can be placed near each other to give the effect of a third color. Because of the color limit, gif is typically used for images that contain a limited number of colors.
• GIF images can have transparency. This is useful if one wants the web page background color to show through (e.g. an edge can be faded out).
• GIFs can be interlaced meaning that a low-quality version of the picture appears first, then gets progressively drawn over by the final image.
• GIFs use a simple technique called LZW compression to reduce the filesizes of images, but this compression never degrades the image quality.
• GIFs can also be animated.

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:

• Use JPEG for images with many colors.
• Use GIF if there are a limited number of colors and transparency is desired.
• Use PNG-24 is there are many colors and transparency is required.
• Photoshop allows you to experiment with the size and quality of the various formats. When in doubt, experiment.
• If you want the best resolution and quality of an image then create a thumbnail image of the image and link it to the full image. That way, a user need not spend the time to load in the full image if they are interested.