Understanding Images: A Guide to File Formats

How to choose the right image format for your Web or print project

By: Brian Satterfield

December 12, 2006

If you've ever worked on an image for your nonprofit's Web site, blog, or printed materials, you've probably found yourself confronted with multiple acronyms when it came time to save the file. Staring at the options, you may have wondered if it really makes a difference whether the file is saved as a JPEG, a TIFF, an EPS, or other format, as long as it looks good on screen.

In short, yes. For although it might seem like an inconsequential detail, different file types are best suited to different uses. While some formats are optimal for saving Web-navigation icons, for instance, they may not be the best choice for high-resolution photographs. And just because a certain format works well for online graphics doesn't always mean it is ideal for print jobs.

To help you understand the alphabet soup of image formats, we'll discuss a few basic factors to consider when choosing a file type, provide an overview of some of the most common formats, and explain when you might choose each one. That way, you'll be better equipped to make the right decision the next time you find yourself staring at your image-editing program's Save As prompt.

Factors to Consider When Choosing a File Type

Compression

Since image files can be quite large, many formats employ some form of compression, the process of making the file size smaller by altering or removing information.

If you choose a format that uses lossless compression, no data will be removed from the image, resulting in a file that appears almost identical to the orignial, albeit much smaller. On the other hand, if you use a format with lossy compression you permanently eliminate certain information in the image but do so in a way that's not obvious to most people. Applying larger amounts of lossy compression makes the image smaller but also degrades its appearance, so there's a trade-off between image quality and file size.

Color Depth

Color depth refers to the amount of colors found in an image and is expressed in bits, the smallest unit of binary measurement. An image's color depth can range from one bit (black and white) to 24 bits, which provides more than 16 million different colors.

Note that the more colors an image contains, the larger the file size will be. Also, be aware that even if you decide to use 24-bit color for your organization's Web images, viewers using older hardware may not be able to view it at its intended color depth.

Common Image Formats and Best Uses

BMP

Bitmap (BMP) files are the default image format used by Microsoft operating systems and by Windows' built-in Paint accessory. Like GIFs, JPEGs, PNGs, and TIFFs (see below for more information on these file types) BMPs are raster-based, meaning that they use thousands or millions of pixels to compose an image. Typically, BMPs do not use compression — resulting in very large file sizes— and range in resolution from one bit (black and white) to 24 bits (16.7 million colors)

Best Uses: BMPs are generally not used for Web purposes and should probably be avoided in most cases unless you just want a quick way to save images to your local machine for personal reference.

EPS

Encapsulated Post Script (EPS) files are one of the industry-standard formats used in professional printing. Many commercial graphics applications — including Adobe Photoshop (available to qualifying nonprofits for $60 from TechSoup Stock) and Adobe Illustrator (available to qualifying nonprofits for $50 from TechSoup Stock) — will output EPS files, as will free graphics-editing program Inkscape.

Best Uses: EPS is an ideal format for printing vector-based graphics, which build images using geometry rather than pixels. Because vector graphics don't use pixels like raster graphics do, a print shop can resize them as many times as necessary without worrying that the quality will degrade. An EPS file makes a good choice for printing graphics such as logos or other jobs that don't contain many photographs. Adobe Illustrator and Inkscape both save vector-based images as EPS files. For more background on vector graphics versus raster graphics, read TechSoup's article Creating Web Graphics.

GIF

Commonly used on Web pages, Graphics Interchange Format (GIF) files are unlike many other popular image formats in that they only support up to 8 bits of color depth (or 256 colors). However, since the GIF format uses lossless compression, it does not noticeably degrade the original image.

Best Uses: Because GIFs contain fewer colors than other image formats, they are best suited for Web graphics with a limited color range, such as site navigational buttons and headers. However, the fact that GIFs use less color than other formats also make them smaller, meaning they'll load faster in the user's Web browser.

JPEG

Joint Photographic Experts Group (JPEG) files provide full 24-bit color but use lossy compression. While most users won't be able to see much difference between a moderately compressed JPEG and the original uncompressed image, a heavily compressed JPEG will appear blurry and make individual pixels noticeable.

Best Uses: As the "P" in its acronym implies, the JPEG format is optimized for use with photographs, particularly those to be posted on a Web site. Since JPEGs use 24-bit color they can accurately render a photograph's subtleties, while the lossy compression algorithm helps achieve an economical file size.

PDF

While it's more of a general file type than a dedicated image format, Adobe's Portable Document Format (PDF) can be put to good use in both print and Web-based projects.

Best Uses: Because they can preserve both textual and graphic information, PDFs can be a good format for converting printed materials — such as your organization's direct-mail newsletter — into something that's readable on the Web. And since Adobe's PDF-reading program, Acrobat Reader, is free to download and use, content saved as a PDF will be accessible to a large percentage of site visitors. PDFs are also efficient for smaller professional print jobs, since you can send all the images, text, and fonts to the print shop in a single document. However, to produce high-resolution PDFs that will appear professional when printed, your organization will need to purchase a program such as Adobe Acrobat Standard (available to qualifying nonprofits for $30 from TechSoup Stock).

PNG

Originally developed to replace the GIF format, Portable Network Graphics (PNG) files employ lossless compression. But unlike GIFs, PNG files can be saved in 24-bit mode to achieve a much wider range of color.

Best Uses: PNG can be a better choice than GIF for designing graphics for a site with a design that may change or for creating images that might be repurposed on multiple sites. This is because PNG supports variable transparency, meaning that individual pixels can have different degrees of transparency. Since GIFs only let you have one totally transparent color, the site's background color must match the transparent color in the GIF. If the background color changes, the GIF will display cosmetic flaws. (Note that Microsoft Internet Explorer does not currently support PNG's variable transparency feature.)

PSD

PSD (Photoshop Document) is the proprietary file format Adobe Photoshop uses to save projects, which can contain can any combination of photographs, graphics, and text. Finalized PSDs are usually saved as another format, such as GIF or TIFF, before being posted to the Web or sent to a professional printer.

Best uses: If your organization works with a freelance or volunteer graphic designer, it might be a good idea to get copies of the PSD files in addition to the final graphics. That way, if you ever need to make changes at some point during the road, you can modify the original files in Photoshop. While you can of course make changes to PSD files using Photoshop, programs such as Adobe InDesign (available to qualifying nonprofits for $60 at TechSoup Stock) and QuarkXPress (discounts available for nonprofits) can also tackle some PSD editing chores.

TIFF

Though Tagged Image File Format (TIFF) files can be saved completely uncompressed for maximum quality, you can also apply a lossless compression algorithm decrease file size. Like PNGs and GIFs, the TIFF format supports full 24-bit color.

Best Uses: Because TIFFs offer a high color depth and an uncompressed option, they are a superior format for printing high-resolution photographs or other pixel-based (raster) images. The vast majority of free and commercial graphics-editing applications allow you to save images in the TIFF format.

Whether your organization primarily uses images to keep its Web site fresh or to add panache to printed materials, choosing the right format for the job helps ensure that your graphics maintain a high-quality, appearance. And with professional-looking materials at your disposal, you're bound to convince a few more folks to join your organization's cause.