Image Formats
In many ways, the Web IS about images. The internet as originally developed was meant to transfer data, and graphical browsers as we know today weren’t around. Hey—256 colors on a display was pretty cool back then. The advent of the World Wide Web changed all that.
There are several formats in which (still) images are presented on the Web. The choices are few, and dominated by JPEG and Gif, but the third, PNG (Portable Network Graphics) is relatively new, and is quite adaptable. There are a few problems using PNG, mostly with transparency and Internet Explorer, but these are not insurmountable.
The Choice
When choosing a format, the rule of thumb is that JPEG is better for continuous tone (photographic) images, and Gif is better for flat colors (usually vector) images. The idea is to get the best image quality—or at least the image quality that you need—at the lowest cost in file size. Both Gif and JPEG are used to compress images, but they do it in different ways. This is what makes the above rule of thumb a rule of thumb. Here is a comparison.
The second rule of thumb is that Gif and PNG allow transparency, and JPEG does not. So, if you need transparency, such as the background on a text image, you gotta go with Gif (or PNG, below).
A third thumb rule, or at least a theory, is that you only need as good as you need. Compress images as much as you can get away with. Only use images for text when you really need to. If making an image 5 pixels smaller on a side works, do it. The bandwidth you save may be your own.
Compare
Both Adobe’s ImageReady and Macromedia’s Fireworks allow up to 4-up viewing of compressed images, before you actually save them. This is very, very useful, as it allows you to see the difference when you change compression, or how the image is to be saved for the Web, as well as seeing what happens when you use different degrees of compression.
Further…
More discussion of formats and compression can be found below:
