You can create and save graphics in many ways, but only a few formats are actually appropriate for images you intend to use on the web. As you create web-friendly images, you must pay attention to file formats and sizes.
Often, graphics file formats are specific to operating systems or software applications. Because you can’t predict what a visitor’s computer and software will be (other than he or she will use some sort of web browser), you need images that anyone can view with any browser. This means you need to use cross-platform file formats that users can view with any version of Microsoft Windows, the Mac OS, or Linux.
These three compressed graphics formats are best for general use on the web:
Graphics Interchange Format (GIF): Images saved as GIFs often are smaller than those saved in other file formats. GIF supports up to 256 colors only, so if you try to save an image created with millions of colors as a GIF, you lose image quality. GIF is the best format for less-complex, non-photographic images, such as line art, clip art, or icons.
Joint Photographic Experts Group (JPEG): The JPEG file format supports 24-bit color (millions of colors) and complex images, such as photographs. JPEG is cross-platform and application-independent. A good image editing tool can help you tweak the compression so you can strike an optimum balance between the image’s quality and its file size.
Portable Network Graphics (PNG): PNG is the latest cross-platform and application-independent image file format. It was created to combine the best aspects of GIF and JPEG. PNG has the same compression as GIF but supports 24-bit color (and even 32-bit color) like JPEG does.
Any good graphics editing tool lets you save images in any of these formats. Experiment with them to see how converting a graphic from one format to another changes its appearance and file size. Then choose whichever format produces the best results.
The table shows guidelines for choosing a file format for images by type.
| File Format | Best Used For | Watch Out |
|---|---|---|
| GIF | Line art, icons, and images with few colors and less detail | Don’t use this format if you have a complex image or photo. |
| JPEG | Photos or images with millions of colors and lots of detail | Don’t use with line art. Compromises quality when you compress the file. |
| PNG | Photos or images with millions of colors and lots of detail | Don’t use with line art. Offers best balance between quality and file size. |
Each of the following sites offers a complete overview of graphics formats:
W3C’s “Graphics on the Web” article
Quackit.com’s Web Graphics Tutorial
As you build graphics for your web page, maintain a healthy balance between file quality and file size. If you poke around with your favorite search engine, you can find good tutorials on trimming image file sizes and optimizing entire sites for fast download. For tips and tricks to help you build pages that download quickly, review these handy resources:
Optimizing Images article on the HTML Source website
Optimizing Web Graphics tutorial at Website Optimization.
