Introduction
If you have ever worked with computer graphic images, whether they be from digital cameras, found on the web, or you create them yourself, then you know there are a lot of image file formats that are available. This is because each format stores the image in a certain way that makes it the best choice for a given situation. This tutorial will cover the most common image formats that you will find on the Internet or with your devices, such as a digital camera, and how they are used. Before we go into the discussions on the actual image formats it is important to discuss the various attributes that image file formats can have.
The Attributes and Terms
Compression
Compression is the act of reducing the file sizes of images. When images are stored in their raw format, without compression, their file sizes can be very large. This causes the images to take up a lot of storage space and, furthermore, take a long time to transfer over the Internet.. Compression techniques alleviate these problems by reducing the file sizes to a much more manageable size that can easily be stored and transmitted over various mediums. Almost all image formats use different forms of compression, so as an example, we will only discuss the compression technique GIF files use so that you can see how an image is compressed into a smaller file size.
GIF compression works by finding repetitive patterns in particular colors and instead of listing each pixel and its color, lists instead the amount of repetitions there are for a particular color. For example if a GIF image has 60 pixels of the same color in consecutive order, instead of adding that pixel color 60 times in the image file, it will instead enter the amount of times the color is repeated. The below figure represeents an image file that has a height of 1 pixel, and a width of 14 pixels. The first 8 pixels are the color Red and the last 6 are the color blue. When the file is uncompressed the image file will represent each pixel as it is seen in the actual image. When it is compressed it instead puts an index of the amount of times a pixel color is repeated consecutively. In the figure below you see the uncompressed image shows 8 Red Pixed and 6 Blues pixels and each pixel is represented. In the compressed format you see the index 8 preceeding the R, for red, and the number 6 before the B, for blue. That tells the image that there are 8 consecutive red pixels and then 6 consecutive blue pixels.. As you can see the amount of storage space saved by this method can be significant..
Uncompressed
|
Compressed
|
 |  |
Lossy
When an image is saved in a lossy format, that means that the file format compression technique discards some of the information from the image that it deems "unimportant". This technique allows for the resulting compressed image file to be smaller, but can result in a final image that is of lesser quality than the original. In most cases you would not notice the difference. When it is saved in a lossless format, that means no information will be discarded.
Animated
Certain image formats have the ability to be animated. This is done by inserting multiple image, or frames, into one image file, which then cycles through the individual frames in consecutive order. By quickly showing these individual frames it takes on the appearance of being animated. Below is an example of an animated gif.
Animated GIF
|
 |
Maximum Colors
The different image formats have limits on the amount of colors that can be used in the image. Image formats that have a low maximum color count tend to be best suited for images that have large blocks of the same colors. Those image formats that have high maxmimum colors are best suited for images that require the complex blend of hues and colors that are found in photographic images.
Transparency
This feature specifies that one color in your image should be considered transparent. This allows the background colors of the web page or document to show through the image and for your pictures to blend into the background of the page instead of standing out as an actual image. Figure 3, below, shows examples of a non transparent image and a transparent one. As you can see the transparent picture blends into the background of the page while with the non-transparent image you see the entire picture.
Non-Transparent
|
Transparent
|
 |  |
Another feature similar to transparency are alpha-channels. Alpha-channels allow you to set the opacity of pixels in your image to a range from 0 to 255. What this does is make the particular pixes that change the opacity for, transparent to the background. You can make certain areas transparent to let the background show through, and the rest of the image would be solid. Unfortunately, Microsoft Internet Explorer does not support this feature as of yet, so it is not in use that often.
Interlaced
When you save a graphic image as interlaced it allows the image to load progessively from top to bottom, eventually filling in the entire image. This was a popular way of showing images in the past when people were on dialups and the images took a while to download to your computer. With the image being interlaced, it allows those people who are on a slow Internet connection, to start seeing parts of the image immediately even when the entire image has not been downloaded.
The File Formats
GIF - Graphics Interchange Format
The GIF is a lossless image format that is the most common format found on the web. Due to having a 256 maximum color range this format is ideal for making small icons, buttons, or other graphics that have large blocks of the same color, but not for images that are required to be photographic quality. Therefore, if you are working with images from a digital camera, do not use GIF as the file format. This file format supports transparency, interlace, and can be animated which makes it a excellent format for putting images on a website.
JPG - Joint Photographic Experts Group
The JPEG is a lossy file format that was designed with photographic images in mind. A JPEG is capable of storing millions of colors making it a great format for saving your digital camera photographs and capturing the proper hues and color that we see in real life. JPEG does support compression, but the more you compress this type of image, the more loss of detail will occur. The predominant uses for JPEGs are for photographic images on websites and for storing pictures from digital cameras. Though the TIFF format is a higher quality format, the size of the resulting TIFF image, makes the JPEG the more practical choice. This format does not support does not support animation or transparency, but can be interlaced.
PNG - Portable Network Graphics
This lossless format was designed specifically for the web in response to a licensing issue with Unisys who owned the patent for the GIF file format. This file format supports animation, in the form of MNG files, transparency, and can be interlaced. PNG files come in two formats, PNG-8 and PNG-24. PNG-8 is similar to GIF files, and has a 256 maximum color range. PNG-24 is has similar color ranges to JPEG, but they tend to have larger file sizes. PNG's also support alpha -channels. PNG images are becoming much more common as a replacement for GIF files on websites..
BMP - Bit-Map
The lossless BMP format is the Microsoft Windows standard for image files. This format is rarely compressed, therefore causing the image to be quite large. Though they do have the ability to go to 16.7 million colors, there really is no reason why the average user should need to use this format for image manipulation. You are better off using one of the previous formats. This format does not support animation, transparency, and can not be interlaced.
TIFF - Tagged Image File Format
The TIFF format is a lossless image format that is the considered the best choice for photographic image quality. Most digital cameras give you the option of using TIFF as the format it saves files in. The main problem with this file format is that most applications do not compress the TIFF files, so they can be quite large. This is not much of a problem for storing the pictures on your computer, but with limited flash memory sizes for cameras it could limit the amount of pictures you can store on one card. If you have the storage, then the TIFF format is highly recommended, but if you do not have the space, then go with a JPEG as you most likely will not notice a difference in image quality. This format does not support animation, transparency, and can not be interlaced.
Conclusion
I hope this was informative and if you have questions or suggestions, please do not hesitate to ask them in the forums. Below is a reference list of the various image formats and their attributes.
Name
|
Extension
|
Compressed
|
Loss
|
Animated
|
Max Colors
| Transparency |
Interlaced
|
| Graphics Interchange Format | .GIF | Yes | Lossless | Yes | 256 | Yes | Yes |
| Joint Photographic Experts Group | .JPG | Yes | Lossy | No | 16.7 Million | No | Yes |
| Portable Network Graphics | .PNG | Yes | Lossless | Yes | 256/16.7 Mil | Yes | Yes |
| Bit-Map | .BMP | Rarely | Lossless | No | 16.7 Million | No | No |
| Tagged Image File Format | .TIFF or .TIF | Yes | Lossless | No | 16.7 Million | No | No |
