Graphic Formats For Web Use

This is a comparison using several graphic formats to show the effects of image compression algorithms based on image file sizes. It is important for Web designers to know the strengths and weaknesses of each format so they'll know when each type of image should be used.

Table of Contents

Format Overview
Graphic Example
Photograph Example
Permanent Data Loss
Size Increase
Data Loss Each Save
Conclusion

Format Overview

The image formats discussed here are:

Format

Extension

Compression

Max Color Depth

Bitmap

*.BMP, *.DIB

Uncompressed

24

Graphic Interchange Format

*.GIF

Lossless (LZW)

8

Portable Network Graphics

*.PNG

Lossless (LZH)

24

Joint-Photographic Experts Group

*.JPG, *.JPEG

Lossy

24

[Top]


Graphic Example

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 on your hard drive. Because it takes up so much space, the BMP image format should not be used on Web pages.

Below is a close up of the top right of the image to show the quality.

PNG Lossless
24 bit color

Size: 8.0 KB

This is the same image using the PNG format. PNG images are compressed with a lossless algorithm, just like how a ZIP file can compress a document. Lossless compression algorithms like this 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 screen shots.

As this side by side comparison shows, both images look the same.

GIF Lossless
8 bit color

Size: 15.2 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. While 24 bit color can have 16.7 million colors, 8 bit color can only have 256 colors, so GIF loses quality in that sense. 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 animations.

When we zoom in on the graphic, we can really see how much color data we lose when down-grading to 8 bit color.

PNG Lossless
8 bit color

Size: 7.8 KB

This example shows the same image using PNG compression and 8 bit color.

The image is identical to the GIF compression, however, the PNG image requires half of the space thanks to PNGs stronger compression algorithm.

JPEG Lossy 10%
24 bit color

Size: 9.6 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, when we zoom in on the center, 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 50%
24 bit color

Size: 5.2 KB

At 50% compression the artifacting of the JPEG is starting to become noticeable. Although the file size continues to decrease, so too does the quality of the image. The bottom on the rainbow box has a line running through it, the gray box isn't smooth any more, and the red, blue, and green box is looking very choppy.

The zoom really shows the artifacting of the JPEG compression. It looks terrible.

JPEG Lossy 90%
24 bit color

Size: 2.9 KB

While the 90% compression may have a very small file size, its terrible appearance doesn'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--even the checkerboard is messed up.

Zoomed in, the image just looks terrible.

[Top]


Photograph Example

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 uncompressed graphic above. 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 too big.

Below is a zoom of top right corner to show the quality.

PNG Lossless
24 bit color

Size: 114 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: 36.9 KB

When you drop from 16.7 million possible colors to 256 possible colors you allow for smaller file sizes, but you again lose color quality. Notice the grainy look that occurs when 256 colors have to compensate for millions.

The close up really makes the loss of color noticeable.

PNG Lossless
8 bit color

Size: 30.2 KB

Once again, PNG out-performs GIF. While the image looks the same, PNG just compresses a little better so the file takes up less space on your hard drive. This is why GIF should never 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. Notice that the quality of the image is practically indistinguishable from the original uncompressed image, yet even at only 10% compression, it still has a smaller file size than even the 8 bit color PNG.

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 pretty 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 JPEG for photographic images.

The zoom looks pretty bad, but few people will ever see the image this close up.

[Top]


Permanent Data Loss

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: 162 KB

Here is a picture of a snake compressed using PNG's lossless algorithm. It has a file size of 162 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 good example of too much compression. While 95% compression may be useful for really small images, or images that have very little detail, 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: 76 KB

All the data that told us what the fine details of the snake picture was supposed to look like has been lost forever in the JPEG compression, and saving it back into PNG won't get it 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 76 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.

[Top]


Size Increase

Lossy compression doesn't always make a file smaller than lossless compression. Some images actually increase in size when they're saved in lossy compression algorithms.


Compression Type
Color Depth

Description

PNG Lossless
24 bit color

Size: 1.0 KB

This lossless image shows how strong PNG compression can be. The uncompressed image would take 186 KB, but since there are large areas with the same color in this image, it is shrunk all the way down to 1 KB.

JPEG Lossy 25%
24 bit color

Size: 9.1 KB

Notice how the file size is now nine times larger than the PNG compressed image. This is because lossless compression is very good at storing data when there is a lot of similar area. Those large swaths of color compress really well in PNG. However, JPEG was designed for photographs, and photographs hardly every have large sections of the same color. Once again, PNG is better for screen shots and graphics, JPEG is better for photographs.

[Top]


Data Loss Each Save

One more thing about lossy compression. Every time you save a file using lossy compression you lose more and more data as these examples will demonstrate.


Compression Type
Color Depth

Description

JPEG Lossy 25%
1 Save
24 bit color

Size: 9.1 KB

Lossy compression like JPEG loses quality every time you save the image, even if nothing on the image changes, even if you use the exact same percentage of compression. Here we see the image after 1 lossy compression save.

JPEG Lossy 25%
25 Saves
24 bit color

Size: 9.13 KB

Here is the image again, this time saved 25 times using the same compression percentage. As you can see, the artifacting has compounded over each save becoming more obvious with the fuzzier edges. Notice as well how the colors no longer contrast as much; the dark blues aren't as dark and the vibrant yellows are faded. Also, because the artifacting has degraded the large areas of solid color, the file size has actually increased a little.

This is why it's important to use a lossless or uncompressed format for the entire time you're editing a graphic. Only when you're finished editing the image should you save into a lossy format.

[Top]


Conclusion

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.

[Top]


© Copyright 2005-2010: Dean Tersigni. All rights reserved.