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:
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:
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:
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
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.
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.
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.
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:
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.