Graphics File Types -n- Stuff
Must be viewed in "true color" to get the right effect.
The world wide web and web pages for that matter are great. But for those of us who are sticklers for graphics fidelity, there are some things that we should be aware of. The two primary graphics file formats used on the internet are JPEG and GIF. They both have their pro's and con's. JPEG is a "lossey" file format, which means that in order to achieve the kinds of compression we see in JPEG files, the image is altered to varying degreesto create repeatable patterns that can be more easily compress, or in other words, the image quality is reduced. The GIF file format on the other hand isn't technically a "lossey" file format, but it is, sort-of. The problem with GIF is that it only handles 8 bit pixels. That means that GIF picture files are limited to 256 total colors instead of the over 16 million colors possible in 24 bit formats (like JPEG). O.K. that’s great but what does it mean? Well lets look at the some pictures…
This picture is a 450 x 300 pixel JPEG image. It was saved at the highest quality setting in a graphics program. Size: 137K. That makes this picture too large for fast access on dialup phone lines (you may have noticed), however the image quality is very acceptable, although it is not identical when compared pixel to pixel with the original (a TIFF file). Now lets look at the opposite end of the spectrum…
YUCK! This picture is the same 450 x 300 pixel JPEG image, but was saved near the lowest quality setting in my graphics program. Size: 7K. Notice the pixelation and blocking. This same thing actually happened with the 137K image above, but it is not noticeable. This 7K image looks bad by any standards. Now for the GIF image…
This picture is a 450 x 300 pixel GIF image. Size 74K. This is also to large for most web page applications. Also note how the dithering can’t quite make up for the limited color pallet of 256 colors. This might work in a tiny web ad but not for a quality image. After all of this some balance is required…
This picture is a 450 x 300 pixel JPEG image. It was saved at a medium (50%) quality setting in my graphics program. Size: 20K. Notice that there is still some pixelation and blocking the right hand side of the image and "inside" the fish bowl. This image would probably work very well by itself and seems to be sized right for a web page.
OK, this is all fine and dandy, but how much difference is really in the pictures? Well, to answer that we need to examine the difference between the original picture (a TIFF image) and the JPEG and GIF images. To do this I used a special bit of graphics software to subtract the original image from the JPEG and GIF images. Now first, due to a limitation of the software I used, I had to convert the images to gray scale, so in this exercise we will not be examining color fidelity (which is mostly an issue with the GIF image). That means that we will be looking primarily at the detail quality of the image. These images had their contrast enhanced by the amount noted so these changes can be easily seen.
This is the lowest quality JPEG above with the original TIFF image subtracted from it. Contrast was enhanced by 80%. Note that what you see here is detail missing from the JPEG image as compared to the original.
This is the difference between that rather acceptable looking medium quality JPEG image and the original TIFF image. You can see how much detail loss our minds are willing to accept. This image also had its contrast enhanced by 80%.
Now this one is interesting. This is the difference between the GIF image and the original TIFF image. Once again, the contrast was enhanced by 80%. Most of the difference here is related to the dithering used to make the 256 color limited GIF image format look better. Sense GIF doesn't really attack the detail, the detail differences are not as noticeable. This makes GIF an ideal choice for black and white photos sense most computers can only display 256 shades of gray anyway and black and white images are usually full of detail (see the example photo by Ansel Adams). These properties also make GIF the a better choice then JPEG for these low color clipart or technical type pictures (see example).
"Now we've got it" you say. This is the difference between the highest quality JPEG image and the original TIFF image. This image has its contrast enhanced by 80%. Don't see the differences showing up here? Well lets look again…
This shows that there is a difference. In this case the contrast was enhanced by 99%. The point here is that we should avoid storing our images in JPEG format until the image is ready to be used on a web page. Even at the highest quality settings, JPEG still attacks image detail, and while the image loss may be slight, over time it could add up.
O.K. So what can one do about all of this. First of all use the right image format for the task at hand. Where possible use a "lossless" image format such as BMP or TIFF. These image formats would the best choice if you were making a presentation or making photo quality images. For photos on web pages you will usually be limited to JPEG (although GIF may work in some cases). Make sure you balance the need for file size with the need for quality. GIF is the ideal choice for black and white photos, low color clipart, and technical pictures.
I hope these tips helped. If you have any feedback for me please send me a note.
Thanx!
