Low-Fat Graphics for the Web

Cramming too many bloated images into a Web page has always been one of the surest ways to scare away visitors. Images that have been saved in the wrong format or compressed poorly can slow download speeds to a crawl. That's why a key step in Web design has always been optimizing a site's buttons, photos, and other graphics before the site goes live.

Strangely, the most popular image-editing application–Adobe Photoshop–was historically less than ideal when it came to optimizing images for the Web. Because it lacked an efficient interface for tweaking and comparing compressed images, designers had to either install special plug-ins or defect to newer imaging applications, such as Macromedia Fireworks and Adobe ImageReady, that were built for Web design.

With Photoshop 5.5, Adobe has addressed many of the Web-related shortcomings of its flagship product. A new Save For Web option lets you easily preview, apply, and save optimization strategies for the main Web image formats: JPEG, GIF, and PNG. And because Adobe now bundles Photoshop with ImageReady 2.0, you no longer need to buy two applications to get high-end imaging power and handy Web development options. (See the sidebar "Optimization on Autopilot" for a tip on using ImageReady.) Armed with some basic knowledge about how image compression works, even Photoshop beginners should be well prepared to create image-rich sites that download quickly.

Compression 101

Image-compression formats take advantage of the fact that describing an image with mathematical formulas can be much more efficient than describing it one pixel at a time. It's analogous to defining an image of a green square as "a 10-by-10 grid of green pixels" as opposed to defining it as "one green pixel, then another green pixel, then another green pixel," and so on. Compression schemes often decrease the amount of space required to store an image by 90 percent or more. (For a file-size comparison of the different imaging formats, see the sidebar "Which Format? Compression Basics.")

Different types of image compression use different formulas to compress information, and each has its advantages and disadvantages. Luckily, you don't have to be a mathematician to choose the best compression format for your Web-page images.

If your image is a photograph, you'll want to save it as a JPEG file–because the JPEG format can support millions of colors in a single image, and because it excels at compressing images with continuous changes in tone. JPEG's main drawback is that it's a lossy compression format, which means you lose a little information when you save an image as a JPEG file. The loss of information shows up as small artifacts that can multiply in intensity if you repeatedly compress the image in that format. When you save an image as a JPEG, you select the amount of compression to apply. This involves deciding how many artifacts you're willing to put up with in exchange for a small file size. Photoshop's Save For Web option lets you adjust the JPEG compression and preview the compressed image side by side with the uncompressed original. (This comparison feature was previously one of the advantages of using Fireworks and ImageReady.)

If you really want to pack down your photos, Save For Web lets you add Gaussian blur to your images before saving them. JPEG works best with continuous tones, so softening a picture's edges with the blur tool can help boost compression.

The other type of image Web designers deal with regularly is illustrations with hard edges and large areas of flat color. These are best saved as GIFs (or as PNGs, which we'll discuss below). GIFs are limited to 256 colors, which is usually enough for flat-color illustrations (but not for many photos).

GIF is lossless , meaning it doesn't lose information during the compression process. However, a new lossy adjustment in Photoshop 5.5 allows you to increase compression by discarding information before saving your files as GIFs. (For more on this, see the sidebar "Put Your GIFs on a Diet.")

The most important part of optimizing compression with the GIF format is decreasing the number of colors in the image as much as possible (this is one of Save For Web's options). Flat-color buttons and similar graphics can often be reduced to 32 or fewer colors and still display fine. Other Save For Web functions, which include determining how a GIF's color palette is selected and whether dithering will occur, have different (but minor) effects on file size, depending on the image.

A Peek at PNG

The Save For Web option also lets you save images as PNG (pronounced "ping") files. PNG is the least-used compression format, mainly because it's the newest, and browser support for it has been spotty. (Microsoft Internet Explorer 4.5 for the Mac doesn't support PNG at all; Netscape Navigator 4.5 supports PNG but not all of its features.)

The PNG format's advantage is that it can support millions of colors, like JPEG, but it's also lossless, like GIF. Therefore, it often generates a higher-quality (though slightly larger in terms of file size) compressed image than GIF. Other advantages include its ability to store gamma information, which can compensate for different display brightnesses across operating systems, and partial transparency.

The PNG format should finally have full support in version 5.0 browsers, giving Web designers more reasons to consider PNG when optimizing images.

MIKE WOOLDRIDGE ( mike@mediacosm.com ) is a writer and Web designer living in Berkeley, California.

January 2000 page: 111

Which Format? Compression Basics
FLAT-COLOR ART
140 by 160 pixels

TIFF, uncompressed: 39.4K
JPEG, medium quality: 5.0K
GIF, 16 colors: 4.3K
PNG, 16 colors: 6.0K
PHOTOGRAPH
360 by 270 pixels

TIFF, uncompressed: 307.6K
JPEG, medium quality: 15.6K
GIF, 16 colors: 25.4K
PNG, 16 colors: 29.3K

The three different image formats available in Photoshop 5.5's Save For Web tool compress the pixel information using different mathematical formulas, and each formula yields different results depending on the image in question. Here, for example, are the original and compressed sizes for these photographic and flat-color images.

The JPEG format is the clear choice for photographic images. While the JPEG format uses several mathematical techniques to save file space, the most important one is Discrete Cosine Transformation (DCT). DCT saves space by approximating the arrangement of an image's pixels and discarding the information that is least relevant to the human eye.

For compressing a flat-color illustration, you're better off using either the GIF or the PNG format. This is because JPEG, though it may be able to shrink such an illustration to a similar file size, adds artifacts to the resulting image (this is because JPEG is a lossy compression format, meaning you lose some pixel information during the process). These artifacts will be especially noticeable in the solid-color areas of illustrations, which is why you want to use one of the lossless formats–GIF or PNG.

The GIF format compacts image information using a mathematical technique known as LZW compression (named for its inventors, Abraham Lempel, Jacob Ziv, and Terry Welch). LZW works by creating a dictionary of different pixel patterns that occur in an image; it then references the dictionary entries multiple times to re-create the image. This saves space because, while patterns tend to occur more than once in an image, they have to be stored only once in the dictionary. The GIF compression algorithm is patented by Unisys, which collects royalties on applications that use GIF compression.

PNG compresses information using a technique similar to GIF's LZW compression, but it's different enough not to infringe on the Unisys patent. (The fact that PNG is unpatented–as is JPEG–is one of the main reasons developers have pushed for its acceptance.) A PNG file can have millions of colors, but you'll want to use much fewer for flat art, because doing so will decrease the final file size.

Put Your GIFs on a Diet

Combining Photoshop's save for web tools with a few tricks of the trade will help you get your image files microsized. The following steps show how you can trim extra kilobytes off your GIFs so they'll download faster.

1) I started with a scan of a cartoon illustration. I brought the image into Photoshop, chose the Save For Web option, and then saved it as a 256-color GIF file. The total file size was 6.7K.

2) The most important part of reducing the size of a GIF file is to reduce the number of colors. Since the cartoon contained black lines and areas of flat color, and it had no gradients, I was able to reduce the number of colors from 256 to 16 without degrading the image. This slimmed the file down to 4.3K.


3) One trick to reducing the size of a GIF file is to get rid of any stray pixels in the areas of mostly solid color. I used the clone tool to get rid of some dark-green pixels scattered in the cartoon's background. When I resaved the file, its size dropped to 3.9K.

4) The final step was to apply the Lossy GIF feature, which is new in Photoshop 5.5. Lossy GIF takes advantage of the fact that GIF compresses better when pixel patterns repeat within an image. When you set the Save For Web Lossy GIF slider higher, Photoshop finds sequences of pixels that are similar and makes them identical. For this illustration, I set the lossy slider at 30. This reduced the file to a final size of 3.7K–45 percent smaller than the GIF file I began with.

Optimization on Autopilot

Need to compress a folder full of images, but you're approaching a deadline? This is when ImageReady 2.0–which is bundled with Photoshop 5.5–comes in handy. ImageReady's droplets are automatic image-optimization schemes that appear as desktop icons. Here's how to create and use a droplet from inside Photoshop.

1) Click on the wide button at the bottom of Photoshop's Tools window. This will open ImageReady. (If you have an image open in Photoshop, it will be imported into ImageReady.)

2) Select a compressed file format from ImageReady's Optimize window and adjust the compression settings to your liking.

3) Click on the droplet icon (top) in the upper-right corner of the Optimize window (the icon is the arrow pointing down). This will prompt you to name and save your new droplet. In the screen shot (bottom) , I've saved four different schemes as droplets in a folder.


4) To put your new droplet to work, drag and drop one or more image files (or folders) onto the icon. ImageReady will open, compress, and save new versions of the files.

Double-clicking on a droplet icon will bring up an ImageReady action menu that allows you to do further fine-tuning of your image-compression scheme.

Subscribe to the Best of Macworld Newsletter

Comments