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 =
File size = 7x5x3 bytes
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.
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).
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 wthen 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.
Different image formats may use one or more of the above encoding techniques.
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.
General Rule of Thumb: