Graphic Formats For Web Use

The image formats discussed here are:

Format	Extension	Compression	Max Color Depth
Bitmap	*.BMP, *.DIB	Uncompressed	24
Graphic Interchange Format	*.GIF	Lossless (LZH)	8
Portable Network Graphics	*.PNG	Lossless (LZW)	24
Joint-Photographic Experts Group	*.JPG, *.JPEG	Lossy	24

Here is an example of the output from all of the image formats on a single graphic image to show what to expect.

Compression Type Color Depth	Description
BMP Uncompressed 24 bit color	Size: 186 KB This is an uncompressed bitmap. It looks exactly as the image is supposed to, but takes up the most space. Because it takes up so much space, the bitmap image format should not be used on Web pages. Below is a zoom up of the center of the image to show the quality.
PNG Lossless 24 bit color	Size: 9.7 KB This is the same image using the PNG format. PNG images are compressed with a lossless algorithm, like ZIP files, so they don't lose any of the original data. This means that they look the exact same as the uncompressed bitmap, but use a fraction of the size. PNG works especially good on computer graphics like screenshots and clip art. Below is a zoom up of the center of the image to show the quality. Note that it is the exact same as the one above.
GIF Lossless 8 bit color	Size: 13.5 KB This image is the same as the original image, only it uses GIF's lossless compression. The GIF format doesn't allow for 24 bit color, only 8 bit color. 24 bit color can have 16.7 million colors, but 8 bit color can only have 256 color. Also, as the file size suggests, GIF compression isn't as good as PNG compression. Because PNG is a better format, GIF should never be used except for animation. It's difficult to notice the missing colors, but if we zoom in on the red, green, and blue box you can notice the jumps from one color to the next. The image to the right shows the same area using 24 bit color which is much smoother.
PNG Lossless 8 bit color	Size: 5.9 KB This example shows the same image using PNG compression and 8 bit color. While there are still only 256 colors, the file size is smaller due to PNGs stronger compression algorithm.
JPEG Lossy 10% 24 bit color	Size: 8.8 KB JPEG compression is something special. It uses a complex mathematical algorithm to help eliminate unneeded data in an image to save space, while still allowing the image to look similar to the original. This image is only at 10% compression, and already it takes up less space than the 24 bit color PNG image. At at a distance it's hard to tell the difference between it and the original. However, if you zoom up close, you'll notice that the image looks slightly different than the original on the right. It's a little "fuzzy" around areas of high contrast, like the middle of the image. This unwanted fuzziness is called "artifacting".
JPEG Lossy 25% 24 bit color	Size: 6.5 KB This JPEG image is compressed at 25%. It's almost as small as the 8 bit PNG image and still looks great. You can only notice the artifacting if you look really close at the bottom of the rainbow box or the middle of the red, green, blue box. The zoom shows a much different picture though. The JPEG compression is starting to look awfully blurry.
JPEG Lossy 50% 24 bit color	Size: 5.2 KB At 50% compression the JPEG image is starting to become noticeable. Although the file size is smaller even than the 8 bit color PNG, you can see the artifacting. The bottom on the rainbow box has a line running through it, the gray box isn't smooth any more, and the red, green, blue box is looking very choppy. The zoom really shows the artifacting of the JPEG compression. It looks terrible.
JPEG Lossy 75% 24 bit color	Size: 3.9 KB While the 75% compression may have a very small file size, its terrible appearance won't make it worth it. The artifacting is very obvious in all four panels. There are dark lines all around the contrast points, and none of the gradients fade properly anymore, instead they are bands of colors. Zoomed in, the image just looks terrible.

Every example shown so far has been on a graphic that you would see on a computer. Often times, graphics that are generated on a computer contain a lot of similar pixels. Having a lot of similar pixels allows the image to compress better with lossless algorithms. Lossless compression algorithms work through pattern recognition, and the big white border, the long vertical stripes of the rainbow and gray squares, as well as the checkered square are patterns. Many of the pixels in the picture are the same as other pixels. This is why it's best to use lossless compression, especially the PNG format, for computer graphics like screen shots and clip art.

However, photographs--like this picture of a bookshelf--usually don't contain patterns. In a photograph nearly every pixel is different from the surrounding pixels. Because of this, lossless compression doesn't work very well on photographs, but JPEG compression excels on photographs.

Compression Type Color Depth	Description
BMP Uncompressed 24 bit color	Size: 186 KB Notice that the uncompressed picture has the same file size as the graphic. This is because in an uncompressed format each pixel is stored uniquely. Even if the entire picture was white, the file size would still be 186 KB. Again, you should never use BMP for Web pages because it's so big. Below is a zoom of top right corner to show the quality.
PNG Lossless 24 bit color	Size: 118 KB Just as before, our lossless compressed image has a smaller file size than our uncompressed image. However, unlike with the graphic image, the file size didn't shrink nearly as much. Lossless compression works using pattern recognition in the pixels. Since there aren't any noticeable pixel patterns in most photographs, the lossless compression can't work as well. However, the PNG lossless compression algorithm will still always yield smaller files than uncompressed. Notice that the zoom is identical to the uncompressed file.
GIF Lossless 8 bit color	Size: 46.7 KB When you drop from 16.7 million possible colors to 256 possible colors you allow for smaller file sizes. This 8 bit color GIF is smaller than the 24 bit color PNG. However, you also lose image quality. This zoom compares the green book at the center of the image. Notice how the 8 bit color image has chunks of color that don't fade seemlessly like the 24 bit color zoom.
PNG Lossless 8 bit color	Size: 37.2 KB Once again, PNG out performs GIF compression. The file is the same, but PNG compresses a little better. This is why GIF should no longer be used for static images. This zoom is the same as above.
JPEG Lossy 10% 24 bit color	Size: 23.5 KB Here we will begin to see the real strength of JPEG. Although most lossy compression formats are slightly hindered by pattern recognition like lossless compression algorithms, they still perform much better. Already, at only 10% compression, the lossy compression image is smaller than all the lossless compression images. You can see some minor fading in the color on the zoom, but it's worth it for such a small file size.
JPEG Lossy 25% 24 bit color	Size: 14.8 KB At 25% compression the image is less than 15 KB. That's a huge difference from the 118 KB from the 24 bit lossless compression. The zoom has become a lot more blurry now, but surprisingly, the full size image still looks great. JPEG compression has special features in it to make the image look good at normal size, even though it looks awful at close range.
JPEG Lossy 50% 24 bit color	Size: 10.4 KB Now, at less than 11 KB, the image still looks good at regular size. The zoom continues to degrade, but we don't see any of the dark lines that we saw in our previous graphic where there were areas of high contrast. JEPG compression doesn't work well on high contrast areas, but since most photographs don't have high contrast areas, you don't need to worry about it.
JPEG Lossy 75% 24 bit color	Size: 7 KB Even here at 75% compression, the image still looks good. You can now notice the degradation effects on the words on the books, but you can still read them. At such an amazing compression percentage, it becomes hard not to justify a high level of compression. The zoom looks pretty bad, but few people will ever see the image this close up.

It is important to know that lossy compression cannot be reversed. Once you save an image using a lossy compression algorithm, like JPEG, you can never get it back to the higher quality appearance. Converting from a lossy compression to a lossless compression, or a lossy compression to a different lossy compression is called "transcoding". Transcoding should be avoided if at all possible because all it does is lower the quality further, or increase the file size. Neither of which is desirable. See the example below for an explanation.

Compression Type Color Depth	Description
PNG Lossless 24 bit color	Size: 164 KB Here is a picture of a snake compressed using PNG's lossless algorithm. It has a file size of 164 KB, which is pretty big, but it's still smaller than what it would be is it were uncompressed. Can you guess the file size of the uncompressed image? It is 186 KB. Unlike lossless and lossy compression which are affected by the image's content, the file size of an uncompressed image only changes due to the height and width of the image, and the color depth.
JPEG Lossy 95% 24 bit color	Size: 17.3 KB Here is that same image compressed with JPEG's lossy compression algorithm at 95%. This is obviously an example of too much compression. While 95% compression may be useful for really small images, or images that have very little detail (like a fully gray image), it looks terrible on detailed images like our snake. Now we have a problem. How do we turn this overly compressed image back into a clean image like the one before? Well, unfortunately, you can't. You can open the image up, and save it back into a lossless compression format, but the result will look like the image below.
PNG Lossless Transcode 24 bit color	Size: 85 KB All the data that told us what the fine details of the snake picture were supposed to look like have been lost forever in the JPEG compression. Saving it back into PNG won't get them back. In fact, all we did by saving back into PNG was make the file much bigger. Instead of the 17.3 KB of the JPEG, we're up to 85 KB. It's smaller than the original PNG image, but that's just because so much data has been lost. It is always important, when you're working with lossy compression algorithms, to keep an original copy around. Sometimes you'll compress the image too much and you'll want to go back to the original, so always keep a backup.
JPEG Lossy 10% Transcode 24 bit color	Size: 24.7 KB This image is the over-compressed JPEG saved back to only 10% compression, but the image still looks awful. Even trying to save into a lower level of JEPG compression there is no way to ever get the quality back, and once again, the file size has increased without giving us a clearer picture.

One more thing about lossy compression. Every time you save a file using lossy compression you lose more and more data. Even if you use the same percentage of compression each time, you still lose data. This is why it is important to use a lossless compression like PNG for all image editing that you do. Finally, when you're done editing, you can compress in a lossy compression like JPEG.

Compression Type Color Depth	Description
PNG Lossless 24 bit color	Size: 1.3 KB This lossless image shows how strong PNG compression can be. The uncompressed image would take 186 KB, but since there is a great deal of similar pixels in this image, it is shrunk all the way down to 1.3 KB but the picture quality hasn't changed.
JPEG Lossy 25%, 1 Save 24 bit color	Size: 5.6 KB This shows another problem with JPEG compression. When there is a large amount of contrast (in this case the straight lines around the squares) the JPEG compression looks awful even at low compression percentages. The artifacting is noticeable. Also note, that the JPEG compression resulted in a larger file size than the PNG. This is because artifacting degrades patterns. The real purpose of this demonstration is to show that lossy compression loses data after every save. Here we see the image after one lossy compression save.
JPEG Lossy 25%, 5 Saves 24 bit color	Size: 5.7 KB Here is the image again, saved four more times at the same compression percentage. The artifacting has compounded over each save, and is even more obvious. Also, because the artifacting has degraded the patterns the file has grown again.
JPEG Lossy 25%, 10 Saves 24 bit color	Size: 5.7 KB At ten saves the image has become even worse. While the fize size hasn't increased, the image's clarity continues to degrade. This is why it's important, when you're editing an image, to always use a lossless or uncompressed format until you're done with the editing process. Otherwise, each time you save the image it'll keep looking worse.

From these examples you have probably realized the following:

1.) The lossless compression of PNG works best on graphic images, like screen shots.

2.) The lossy compression of JPEG works best on photographs where you won't notice the loss of data as much.

3.) The format GIF should not be used for Web images anymore unless needed for animation. PNG compresses better and has more features like 24 bit color.

4.) Uncompressed formats like BMP should not be used on the Web because lossless formats are smaller and look identical.

It's important to note that lossless and lossy compression works the same for all data, not just pictures. Music has uncompressed formats like WAV, lossy formats like MP3, and lossless formats like FLAC. Videos have similar formats as well. All of the rules above can be applied to audio and video formats because they all use similar forms of compression.

© Copyright 2005: Dean Tersigni. All rights reserved.