A Guide to Graphics File Formats
By Luisa Simone
You can gain more control over the quality and size of your images by picking the right format for the job.
Graphics files usually contain one of two types of data: raster—colored dots (or pixels) arranged in rows, and vector—images composed of lines, polygons, and text. Raster formats are ideal for photos, and vector formats are best for logos and diagrams. Vector formats use smooth outlines to create objects, maintaining quality even when an image is enlarged or reduced.
Generally speaking, there are three factors to weigh when considering graphics formats: the output media (print or Web), the format’s specific features, and your workflow. Typically, the only Web formats worth using are those supported by most browsers: GIF, JPEG, and SWF. Large raster images are more download- and memory-friendly if they’re compressed, but lossy compression schemes (such as JPEG) shrinks images by discarding data. Also, some formats support simple transparency (where designated pixels are opaque or clear), and others offer gradient (or alpha channel) transparency effects.
Workflow is also crucial: You can’t choose a format if your equipment doesn’t support it. The information below will help you make the right decision.
JPEG is a full-color raster format supported by all popular Web browsers and digital cameras. Its compression can produce very small files for speedy downloads. But JPEG employs lossy compression, so it can degrade image quality (notice the blocky interference pattern). Each time you save a JPEG file you further degrade the image.
GIF is a Web-ready raster format. GIF files use a limited palette (256 simultaneous colors at most) but they often use fewer colors to reduce file size. Small color palettes (see the inset), lossless compression, transparent colors, and frame-based animation makes GIF a fine choice for Web graphics such as icons or logos.
TIFF is a great choice for raster images intended for print. TIFF encompasses many different color modes. In addition to RGB color, TIFF supports 8-bit gray-scale or 32-bit CMYK data (for commercial offset printing). TIFF offers advanced features, including gradient transparencies, multiple layers, and several compression methods.
PNG (Portable Network Graphics) is gaining acceptance as a raster format for the Web. PNG supports palette-based and full-color images, plus lossless compression and a true alpha channel. The helmet in the image has a clear background as well as a soft, semitransparent drop shadow that can interact with other page elements. Note that not all browsers can display PNG’s multilevel transparency.
Native files are specific to particular programs. Proprietary formats support features essential to image development. The Photoshop file (PSD) shown here contains multiple layers, transparency masks, editable text, and automated shadows effects (as shown in the Layers palette).
Vector—or metafile—formats involve pictures composed of discrete objects. In the image, the blue highlighting of the fish on the left shows that the drawing comprises hundreds of individual shapes. On the Web, Macromedia Flash offers crisp text, smooth lines, and transparent objects, so it’s a good choice for static images. The new FlashPaper output option lets you zoom in without degrading quality (see the inset).