Saving Images

If you've ever had a graphic go from snazzy to nasty after uploading, the problem probably lies in the file type. Saving an image incorrectly can completely ruin the quality of a graphic. This tutorial will explain when and why to save images as PNGs, JPEGs, or GIFs.

PNGs
When you aren't too concerned with saving space on your computer or server and want your graphics to maintain all their original quality, PNGs are the way to go. The amount of colors is not limited and nothing will be compressed. Not a single byte of information will be lost. This file type is ideal for photographs and very detailed images, but it can be used successfully for any type of graphic. It even supports transparency in Firefox and Internet Explorer 7+.

JPEGs
JPEGs are tricky, and I only recommend them if you're looking to save a little space. When saved as a JPEG, an image is compressed. The following image shows exactly how much quality is lost. The icon on the left was saved as a PNG and the one on the right was saved as a JPEG.

As you can see, there is a lot of distortion and "artifacts" left over in the right image. But the image cani> look fine if the compression level is kept at no more than five or ten, but the default compression level is sixteen. You need to find JPEG optimizer in your program in order to lower it.

GIFs
GIFs are absolutely perfect for simple images with few colors but are a nightmare for most photos. Images are limited to only 256 colors when saved as GIFs. It sounds like a lot, but photos typically have many more colors than that. The end result turns out dotty or posterized-looking. Here are some examples of graphics incorrectly saved as GIFs.

  

Images that should be saved as GIFs are ones that are extremely simple (plain text icons or vectors without gradients, for instance). GIFs are also the standard file type for non-flash animations.

While this tutorial barely touches on the complexity of these file types, it's meant to give you a general idea of how to save what and maximize the quality of your graphics.