There are many different image formats that you can choose from but only a few a common to most websites. I’m going to limit my discussion to the five most popular here and give you my opinion about the pros and cons for each of them.

BMP

This image format was one of the first ones used on the web because many early digital cameras captured images using this format. BMP stands for Bitmap image and is a device independent format. Thus, it works well on all personal computers, tablets, laptops, and phone. It can support from 1 bit per pixel (essentially just black and white dots much like a newspaper print image up to 24-bit color which supports over 16 million colors. Early computers supported graphics of only 16 colors. While this was rather limiting, it served the needs of early games and data charting (after all, most charts don’t need more than 16 colors because more than that can be confusing). Over time, as computers supported more color depth (bits), BMP images added more bits per pixel to support images. However, because of the rather simplistic encoding of the colors in a BMP image which used lossless algorithms, the sizes of these images rapidly grew. One advantage is that the format is capable of supporting a transparent color. You will often see reference to an alpha channel with formats that support transparency. With greater bit depth to support more colors and increasingly realistic images, the size of BMP files grew, and they started to take an increasing amount of time to transmit across the internet to a person’s browser. While the format in theory supported compression, it was almost never used. As the Internet grew and the demand for more graphics changed the nature of the Internet, there had to be a better format to transmit images without losing quality.

GIF

The early days of personal computer usage were driven in part by the popularity of newsgroups. However, it was clear to many that newsgroups that only supported text could not present information as clearly as groups that supported graphics. But computer transmission speeds were significantly slower then as anyone who remembers the old dial-up modems can attest to. Therefore, images that did not support compression typically had to balance the use of few colors (color depth), the size of the image, and transmission speeds. A file format that supported data compression to reduce the total amount of data that needed to be transmitted while not affecting the quality of the image was desired. To fill that need, CompuServe, one of the early online service providers in America, developed an image format to download color images from its servers. This format, called GIF, stood for Graphic Interchange Format and was originally proprietary to CompuServe and to those to whom they licensed its use.

As personal computers became more popular in the 1980’s a common format was needed to encode graphics that could be displayed on different computer systems while at the same time keeping the time required to transmit a graphics file as reasonable as possible. This format was originally protected by patents held by CompuServe. Companies that created browsers that supported this format were expected to pay a royalty to CompuServe. However, these patents had expired by 2004. In the meantime, someone came up with a way to add coding to the GIF image that allowed multiple images to be displayed one after the other. While these were still multiple still images that were displayed sequentially, the effect was add simple animation to an image. Early examples were the Dancing Girl and the Dancing Baby. However soon people were adding animated GIF files everyone in their websites. While a little animation is interesting, too much animation becomes distracting and even can seriously affect some people and can cause seizures in those sensitive to flashing images. As a result, The Americans with Disabilities Act, while allowing animated gifs, requires that they either stop after 5 seconds or provide a way for the user to pause the animations. They must still have alt text and they cannot blink or flash (which is defined as three times in any one second) to get attention.

GIF files are still commonly used for buttons, logos, and icons because these generally do not require a large number of colors. In fact, the size of a GIF file is based on the number of colors it needs. While it can vary from two colors, black and white, the limit is 256 colors. On the plus side of this restriction is that these 256 colors can be any of the 16+ million colors possible with the RGB color palette. That is because each gif stores a table of the colors it can use. If the GIF file uses from 129 to 256 colors, the file must use 8-bits to identify the index in the table for each color. On the other hand, if the image is a simple button, logo, or icon with fewer colors, you can reduce the file size by reducing the number of bits used per color. For example, if you remove at least one color from an image with 129 colors so that it only has 128 colors, the resulting gif can be encoded as a 7-bit gif reducing the file size. In fact, utilities can still be found on the internet that can reduce the number of colors in a gif. They typically do this by converting some of the least used colors to other similar colors. Taken to the extreme, a 2-color button can be encoded as a 2-bit image. Each color in the color table requires 3 bytes. One byte is used for each of the primary colors in the RGB color palette: red, blue, and green. However, now instead of requiring 3-bytes per pixel to represent a color, each pixel can simply be defined by pointing to the color in the table. This decreases the image file substantially over the equivalent BMP file.

Another advantage of a GIF image file is that one color can be defined as the transparent color. In other words, when the image is placed on another background, you will see through the portions of the image with the transparent color to see the underlying background image or color. The use of transparency for one color is common for logos to avoid the ‘ugly’ box around an image when the image is placed on a background of a different color.

Next week we will discuss the other three common image formats found on the web.