Choose the best file formats for the web

Talk with almost anyone involved in the design and production of websites and you're bound to become the proud owner of yet another informed opinion detailing the best file formats to use for image quality and speed of display. Some will say GIFs, others JPEG, and inevitably an "early adopter," a true maverick in the world of image preparation for the web, will hail the virtues of PNG. Once and for all, let's see what the current intelligence is on the subject so you can proceed with the business of providing image files that load quickly and look great on the World Wide Web.

A primer on three popular file formats

File formats for the web are designed to use very few bits of information and, as a consequence, process graphics quickly. That's always the main objective when working with files for the webspeed. Yet, the importance of speed must be balanced with image quality. Is the logo legible? Is the photo attractive? Are the colors accurate? To make effective choices with web files, you need to understand the basic features and limitations of each popular file format. We'll look at GIF first.

GIF: It pioneered web graphics

GIF (Graphics Interchange Format) has been around since the late 80s. It's designed to record images with flat color such as logos, line art, screen shots, and cartoons, as shown in Figure A, where there are long horizontal runs of a single color. In other words, an image comprised of only horizontal bars that run the width of the image and where each is just one color would make a very happyand very tinyGIF file. On the other hand, even a checkerboard design of individual colors would break up the horizontal run enough that the GIF file size would grow substantially. And a checkerboard with digital noise would tax a GIF even further. Here's a list of other GIF features and limitations:

Figure A.

• Ideally suited to handle simple graphics with its palette of 256 colors.

• Capable of displaying a color (such as the background) as transparent.

• Uses a lossless compression algorithm. That is, it reduces the file size without losing any of the original pixels.

• Can be separated into frames for animated GIF sequences.

• Can be interlaced, which means, on the web, it loads a low-resolution version first to get an image onscreen quickly as it continues to gradually load the full-resolution version. This feature is useful if your audience uses narrow bandwidth modems and slow connection speeds.

JPEG: The photo-quality favorite

You're probably familiar with the JPEG format if only because it's used for both print and web applications. The JPEG (Joint Photographic Experts Group) file format is normally assigned to record and compress full-color, continuous-tone images. Color photos, color-rich illustrations, and graphics with subtle gradient and shading effects are the purview of the JPEG. Here are a few points to remember about the JPEG format:

• Performs exceptionally well for photographic and rich-color images.

• Doesn't offer the option to make a color transparent.

• Uses lossy compression, so anytime the file is opened and resaved, additional pixel information is lost.

• Routinely produces larger file sizes if only because it's called upon to render higher quality and more complicated images.

PNG: The new and improved GIF

PNG, pronounced ping, is an acronym for Portable Network Graphics. It was developed in recent years as an improved substitute for the GIF format, primarily because the patent owners of GIF technology have begun to make noise about charging licensing fees for their invention. The only real problem with this new arrival to the file format arena is that it isn't yet widely accepted or supported. The PNG format provides the following:

• Lossless compression that's slightly more efficient than GIF.

• Access to the color palettes of GIF and JPEG, up to 24-bit true color.

• Interlacing or progressive display faster than GIF.

• Improved color rendition with control of image brightness.

• Variable transparency (not just on or off as in GIF).

• No animation capabilities.

• Smaller file sizes than GIF with simple graphics, but typically larger file sizes than JPEG with full-color continuous-tone images.

JPEG2000: Built on a solid history

JPEG2000 is a new format that's on its way to replacing the original JPEG codec invented by the Joint Photographic Experts Group. JPEG2000 improves on compression and image quality, but, as of this writing, requires a plug-in at both the point of origin and the point of viewing or printing. Some of its features are as follows: 2535 percent smaller file sizes at comparable image quality; support for 16-bit color/grayscale; 8-bit transparency; alpha and spot channels; region-of-interest enhancement; and optional lossless compression.

Photoshop CS supports both formats, so we think it's safe to assume that PNG and JPEG2000 will survive and become the next generation of image archiving and distribution. For now, we'll focus on the two formats that are still tightly woven into our work processes.

A look back at the origins of GIF

In 1987, CompuServe (a company now owned by AOL that provides information services, email, and specialized internet content) developed a file format, known as GIF, for archiving and exchanging computer images. CompuServe developers incorporated a Unisys compression algorithm, known as LZW, into the design of this file format. This new free format quickly became a world standard. However, in 1994, both CompuServe and Unisys announced to the software trade that developers would have to pay a licensee fee for using the GIF technology. Fear and consternation spawned PNGa patent-free replacement for GIF that offers lossless, portable, and well-compressed storage of raster images.

Narrow your choice by considering the content

Remember that we described the GIF format as being ideally suited for simple, flat-color graphics. If that describes the image you're considering, then GIF is a good starting point. On the other hand, if the image is a richly colored photograph or a full-color graphic or illustration with gradients and subtle detail, then JPEG should be your first choice. But the real determinant is how the image translates in your chosen format. The guidelines we just described are just thatguidelinesnot hard and fast rules. Here's an example.

Figure B shows a photograph that might lead us to lean toward JPEG because it's a photo. However, take a closer look: It's a posterized photo, leaving a limited number of colors and tones and producing flat areas of color. When you experiment with GIF, you'll find that it tends to posterize a continuous-tone photo as a result of its limited color palette.

Figure B.

Why not capitalize on this predictable behavior and GIF's excellent compression to make this photo a GIF rather than our first choice, JPEG? Using Photoshop's Save For Web dialog box, we set out to keep the same image quality with two different file formatsGIF and JPEG. We discovered, as shown in Figure C on the next page, that although the GIF format (top) approximated the posterized effect and color separation, it tended to dull the colors as compared to the JPEG version (bottom). The GIF size was 90 K, using 64 adaptive colors. The JPEG was set to a Quality level of 60 and produced a 94 K file. The small difference in file size would, in our opinion, point to JPEG as the preferred choice because of its image quality.

Figure C1.

Figure C2.

Now, take a look at a simple graphic that we might initially assume should use the GIF format. It's a graphic, and it has a few colors that are flat without much detail. We used GIF with its limited color palette and rendered a file size of nearly 96 K, as shown on the right in Figure D. With JPEG, shown on the left, we were able to maintain the same image quality but reduce the file size to about 74 K. In this case, GIF wasn't the best choice because of the image content.

Figure D.

Five more ways to shave data from the file

There seems to be no end to the ways in which programmers and designers slide file sizes down one pixel at a time. Here are just a few of the more popular techniques you can use in your quest for small files for the web:

1.	Every pixel counts when the objective is to shed unnecessary bits of information. For example, instead of keeping that margin of nothingness around your imageespecially odd-sized graphicscrop into the very edge of the live image. Leave little or no border, which you don't need anyway, to reduce the number of pixels recorded in the file. This applies to both GIF and JPEG file formats.
2.	Dithering helps to conceal the rough look of a limited color palette by adding back colors to achieve a blended appearance and consequently increase file size. If you can live without it, turn off dithering when saving a GIF file.
3.	Anti-aliasing text may also add to file size. Anti-aliasing adds pixels of varying value to the edges of type in an effort to conceal the stair-step effect on the edges of solid-color letterforms. Try turning off anti-aliasing to see if you can achieve the look you want while cutting bits of information off the size of your GIF file.
4.	Use a lossy GIF compression instead of the normal lossless compression. A lossy compression eliminates any stray pixels, which increases file size.
5.	While you're evaluating a GIF image in the Save For Web dialog box, try deleting from the GIF palette one color at a time to gradually eliminate colors you won't easily notice in the image. Click on the color swatch and click the Tras the button at the bottom of the palette. This process can actually reduce file size a fraction of a kilobyte every time you lose a color.

Note

For information on optimizing your images for the web, see the Problem :Solution "Improve blurring in compressed web images" at the end of this chapter.

Optimize quality and minimize file size

Preparing files for the web will be less of a challenge now that you know more about the way file formats work and which options are available. Photoshop's Save For Web dialog box gives you the freedom to experiment with a variety of settings quickly and easily. Try practicing with a file in a variety of ways and compare your results. The behavior of computer code often surprises usand sometimes pleasantly surprises usespecially when we discover how small we can trim an image file and still have it display the way it was originally intended.