Choosing the Appropriate Image File Formats
Choosing the right file format to save your images in is of vital importance. There are three image formats in constant use on the net - GIF, JPG and PNG. Each is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Saving and exporting into these formats will require a decent image editor.
When choosing the format for your image, you should always be conscious of both the image's quality and filesize.
GIF - Graphics Interchange Format
Compuserve's 8-bit GIF format has long been the most popular on the Internet, mainly because of its small size. It is ideal for small navigational icons and simple diagrams and illustrations where accuracy is required, or graphics with large blocks of a single color. The format is lossless, meaning it does not get blurry or messy. GIFs use a simple technique called LZW compression to reduce the filesize of images by finding repeated patterns of pixels, but this compression never degrades the image quality.
GIF files can be saved with a maximum of 256 colors. This makes it a poor format for photographic images. Because this can sometimes be tight, GIFs have the option to dither, and will mix pixels of two different available colors to create a suggestion of another color.
GIFs can be animated, which is another reason they became so successful. Most animated banner ads are GIFs. You will need an animation program to make your own animations.
GIFs allow single-bit transparency, which means when you are creating your image, you can specify one color to be transparent. This allows the background colors of the web page to show through the image.
GIFs can also be interlaced, which is a way of saving a graphic so that it loads progressively - first a blurry, low-detail version is loaded, and then successive layers of detail are added. This usually means a larger overall filesize, but it means that a version of the image gets placed onto the viewer's screen much quicker, and so is beneficial in many situations, as it gives the impression of a speedier download.
JPEG - Joint Photographic Experts Group
The 16-bit JPEG format (usually written without the E), was designed with photographs in mind. It is capable of displaying millions of colors at once, without the need for dithering, allowing for the complex blend of hues that occur in photographic images.
JPGs use a complex compression algorithm, which can be applied on a sliding scale. Compression is achieved by "forgetting" certain details about the image, which the JPG will then try to fill in later when it is being displayed. You can save a JPG with 0% compression for a perfect image with a large filesize; or with 80% compression for a small but noticeably degraded image. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage.
Though JPGs can be interlaced, they lack many of the other special abilities of GIFs, like animation and transparency; but as I said, they really are only for photos. Simple graphics with large blocks of color should not be saved as JPGs because the edges get all smudgy.
PNG - Portable Network Graphics
PNG is a format invented specifically for the web in response to a licensing scheme introduced which meant the creators of any software that supported the GIF format had to pay five thousand dollars for the privilege (this tax has since expired). While they were at it however, the creators of PNG went ahead and created a format superior to GIF in almost every way.
One version of the format, PNG-8, is similar to the GIF format. It can be saved with a maximum of 256 colors and supports 1-bit transparency. Filesize when saved in a capable image editor like Fireworks will be noticeably smaller than the GIF counterpart, as PNGs save their color data more efficiently.
PNG-24 is another flavor of PNG, with 24-bit color support, allowing ranges of color akin to a high color JPG. PNG-24 is in no way a replacement format for JPG, however, because it is a lossless compression format. This means that filesize can be rather big against a comparable JPG.
PNG's main draws are alpha-channels. Instead of the rudimentary transparency options in other formats (where a pixel is either transparent or opaque), an alpha channel can specify the opacity of any pixel from 0–255, where 0 is fully transparent and 255 is fully opaque. This allows you to create a graphic that can be placed on top of any background color and will retain a translucent effect, with the background showing through the pixels that are not opaque.
And what of animation? PNG can be made into multi-image files through the MNG extension of the format, but browser support is patchy for this format. Stick with GIFs for your animations.
Where does all this leave the PNG format? It may take a good number of years to find widespread usage, but as it stands at the moment using PNG-8 in place of static GIFs will lower the filesize of your images. There's no reason not to adopt them now as the format you create your site icons with.