ButlerCC Webhosting

There are many different computer graphic file formats but only three of them are supported by all of today's Web browsers. GIF, JPEG, and PNG all effectively compress images which reduces file size so the images download more quickly from a Web server. So how do you choose the correct format for an image?

GIF (Graphics Interchange Format) files can contain a maximum of only 256 colors so they provide good compression for images with areas of solid color like logos, text, and simple drawings (cartoons, clipart). GIFs also support single-color transparency (allowing one color to disappear) and simple animation. Photos and images with gradients (color blends) tend to appear posterized (unrealistic) in GIF format.

JPEG (Joint Photographic Experts Group) files can contain millions of colors, making them ideal for photographs. The JPEG compression algorithm considers how the human eye perceives adjacent color values and uses a complex color analysis to lower the amount of data required to accurately represent images. Discarded data cannot be recovered, which is why it's referred to as a lossy file format. Since data is discarded each time a file is saved, be careful not to overwrite high-resolution files. And when additional modifications are needed, always start with the original uncompressed image. JPEG compression does not support transparency or animation, and can make text and large areas of solid color look blotchy.

PNG (Portable Network Graphics) files support the best features of GIF and JPEG in several versions. PNG-8 supports 256 colors and one-color transparency like GIF and can usually compress images to a slightly smaller file size. PNG-24 supports millions of colors like JPEG and without any loss of quality. But the higher quality results in a larger file size, so JPEG is still a better choice for photographs when file size is important. PNG-24 is the only format that supports 256 levels of transparency (also called alpha transparency) which allows you to adjust the opacity of images. If you want to see the background through a drop shadow or a partially transparent image, PNG-24 is a good choice. All the current browsers support PNG-24 but IE 6 replaces transparent areas with an awful blue background.

Note: The native PNG format used by Fireworks is an enhanced format that contains additional data. Fireworks images must be exported to GIF, JPEG, or one of the PNG formats before using on a Web page.

Related Links

• Image Types and Usage in Web Design from Webdesign TutsPlus
• Six Revisions JPEG 101: A Crash Course Guide on JPEG and Web Designer's Guide to PNG Image Format
• Smashing Magazine's Clever JPEG Optimization Techniques and Clever PNG Optimization Techniques