GIF, JPEG or PNG?

Bottom Line

Always make a master file!

Always make a master file and run off copies for the web from the master. If your graphics program has a native file format, use that. If your graphics program doesn't have a native file format, save your image as a full-color PNG and use that as a master file. See our section on "JPEG rot" to find out why your master file should never be JPEG file.

Lossless or lossy compression?

Except when you're doing what you need to do to avoid "JPEG rot", forget about "lossy" versus "lossless" compression. When you turn an image into a GIF file, you reduce the number of colors to 256, and you can't get the lost colors back. That's a huge loss (if you happened to do it on the wrong kind of image), and if you use the default or "web safe" palette for GIFs, you get even fewer colors, and chances are, the colors will be wrong.

Lossless means that what you get out when you decompress is identical bit for bit to what you had before you compressed. There's a big difference between that and "very good quality" or even "visually indistinguishable". Most of the time you don't need every bit. A lot of the time (when you reduce the image size) you don't even want every bit.

What you care about is quality, which is nothing more complicated than (a) how it looks, and (b) how much bang you'll get out of every byte.

Quality

Some web hosts charge you extra if you have too much bandwidth on your site, so the time you spend making your images just the right size will put (or keep) money in your pocket. Even if they don't charge extra, a site with lots of overweight graphics files will take so long to load that your visitors will give up and go somewhere else where the site owner was more considerate. Remember, your website may be speedy, your visitors may have broadband, but all it takes is one slow point between the site and the visitor to separate the speedy, successful websites from the slow, lonely hogs.

You can control the quality of JPEGs, usually with a little slider. Some graphics programs and third party tools let you see the results while you play with the parameters. If you play with the controls for GIF and PNG, you can change their size and quality too.

Until you're dead sure when you should save a JPEG, and GIF, and a PNG, save all three. It'll take you 30 seconds, tops. Then look at the size of all three files, look at the quality, and make up your mind which file you want to use.

Remember: quality isn't a number. The best tool you have for judging image quality is your own eyeballs. Well, best except for one: the very best tool you have is your experience. And you get that for free! Every time you make another image, you get a little smarter.

10 Second Summary

"JPEG" stands for "Joint Photographic Experts Group". So if your image is mostly like a photograph, save it as a JPEG. If it's mostly like something else (text, clip art, engineering drawings, scans) save it as a GIF or PNG. When in doubt, save it as all three, look at the size, look at the quality, and make up your own mind. And always make a master file. That's all there is. You can do this.