Crunch GIFs Quickly with PhotoGIF
Web designers create heaps of graphics. I’m not referring to the image-heavy Web pages that load in the time it takes to get coffee or read a historical novel. Putting together even a modest Web site requires that a designer produce dozens or hundreds of image files that act as temporary placeholders, iterations of design ideas, and multiple attempts to compress an image to its smallest possible byte size. Doing so can take up vast quantities of time, making me wonder sometimes if I’m actually designing or just working on a Web production line.
When the Web first started to become popular, few companies recognized the need for a better way to create high-quality GIF (Graphics Interchange Format) images than the cumbersome default method offered by Adobe Photoshop. One of those few was BoxTop Software, which released a superior image cruncher and time saver. PhotoGIF is an Adobe Photoshop-compatible plug-in, meaning it works with Photoshop 3.0 or higher, as well as programs that can use Photoshop filters such as MetaCreations’ Painter. (The latest version, PhotoGIF 3.0.2, requires a PowerPC-based Macintosh.) In addition to compressing image data and saving it to the GIF89a format, PhotoGIF includes support for opening GIF animation files, plus an active preview of how its settings will affect the image before saving it to disk.
<http://www.adobe.com/prodindex/photoshop/>
<http://www.boxtopsoft.com/pg.html>
<http://www.metacreations.com/products/painter55 />
Chomping at the Bit — I prefer PhotoGIF over other similar utilities for several reasons. Although the market is now inundated with Web graphics programs such as Macromedia Fireworks and Adobe ImageReady, I still do most of my image manipulation in Photoshop (version 4, in fact), so a plug-in is handier than launching a separate application. (For background information about graphic file types and image compression, see "A Closer View of Web Graphics" in NetBITS-007.)
<http://www.macromedia.com/software/fireworks/>
<http://www.adobe.com/prodindex/imageready/>
<http://db.netbits.net/getbits.acgi?nbart=04458>
PhotoGIF also enables me to convert my images directly from RGB mode (Photoshop’s default color space) with all of my layers and masks intact; in contrast, Photoshop normally requires you to flatten images and convert them to indexed color before they can be saved as GIF files. That flexibility alone made early versions of PhotoGIF worth using, because it meant that I didn’t have to go through a series of steps each time just to make a single adjustment. Adobe’s free GIF89a Export plug-in also created GIFs from RGB images, but activating it involves choosing a hierarchical menu from the File menu – too much repetitious mouse work for my wrists. Instead, I can press Command-Option-S to activate Photoshop’s Save a Copy command, then choose BoxTop PhotoGIF from the Format pop-up menu, which gets me to the main PhotoGIF dialog.
What You See Is What You Crunch — PhotoGIF provides several options for tweaking compression settings applied to your image. The main dialog displays two preview areas that show the original image on the left, and the indexed version of the same image on the right. You can turn one or both of the previews off using checkboxes beside each box, which turns out to be a surprising benefit: the PhotoGIF documentation suggests viewing only the indexed image to focus more on making a better final image than one which just matches the original. If your source image is larger than the preview windows, you can click and hold on either one, then drag to reveal more of the image; both areas move in tandem.
The current file size of each image is listed beneath the preview areas. Unlike some utilities which offer a best-guess estimate of the final file size, PhotoGIF’s numbers truly reflect the size of the saved file. This is because PhotoGIF does all of the compression work right before your eyes, and updates its display whenever you change the settings. The only exception is if you plan on specifying transparent colors (see below), which can decrease the file size after saving.
Although I referred to a NetBITS article about Web graphics above, it’s worth taking a moment to understand how GIF compression works. Instead of noting the color value for each individual pixel in an image, GIF algorithms scan each line and note the number of colors that are present, then note any patterns using a form of shorthand. Suppose that the first line of pixels in a small test image reads like this: blue, red, red, red, green, yellow. The GIF algorithm would express that as: one blue, three red, one green, and one yellow. We’ve gone from six points of data to four. Removing the redundant colors and replacing them by a description of the pattern results in a smaller file. Thus, the fewer colors in your image, the more compression you can expect to achieve. When you’re applying a GIF-optimization tool like PhotoGIF to an original image, you want to use as few colors as possible while still maintaining the quality of your image.
PhotoGIF includes a number of options for controlling the colors in an image:
Depth: Just because your image contains 256 shades of blue doesn’t mean you’re stuck with them all. The Depth pop-up menu enables you to choose the number of colors you want to appear. PhotoGIF’s color engine figures out the best combination of colors to fit within the number you specify, then redraws the altered image in the indexed preview window. This is where you can test varying degrees of compression and evaluate the image quality versus the file’s size. You can also type a number into the Colors field just below the Depth pop-up menu.
Dithering: The GIF format supports a maximum of 256 colors, so there’s bound to be a trade-off between achieving a small file size and staying true to the original image’s colors. Dithering is a process where a collection of colors are grouped in such a way that your eye is fooled into perceiving a color that doesn’t actually exist in the image – for example, blue and yellow pixels in a tight pattern might simulate green. PhotoGIF includes a sliding scale of one to ten to represent the amount of dithering you’d prefer; more dithering reduces the number of colors in your image but can make it appear grainy.
Palette: The lower third of the PhotoGIF main screen is occupied by the color palette, which shows a grid of every color present in the indexed version of your image. Clicking a color fills a larger square to the right that also displays the color’s RGB values in decimal notation on a scale of 0 to 255. The most important component of the color palette is the Palette pop-up menu, which allows you to specify which palette you want to use. Although GIFs can store values for up to 256 colors, there are only 216 colors that can be shared safely between Mac and Windows Web browsers – these colors are sometimes called the "Web-safe palette" or the "Netscape palette." If you want to ensure that your image will appear the same no matter which platform is being used to view it, select Netscape from this pop-up menu. Selecting Grayscale or System from the Palette pop-up menu forces the image into a grayscale palette or the Apple system palette, respectively. The Custom option builds a palette based on the colors present in the image; this palette will usually do the best job of representing the original image, but may not appear the same in all browsers. If you’ve created a custom palette for your entire page or site, or if you want to use the colors from another image, you can import another palette into PhotoGIF’s palette by clicking the Load button. If the GIF file you’re loading contains multiple palettes, PhotoGIF lets you choose one, with a preview appearing in the Load dialog box.
Base: PhotoGIF’s color engine might replace a color appearing infrequently in an image as it attempts to compress the data. If there are colors that you want to retain, you can choose a Base palette that protects those colors when they appear in an image. Like the Palette pop-up menu, you can choose between None, Custom, Netscape, Grayscale, System.
If you’ve never used PhotoGIF, you may be thinking that working with its main options must be like trying to decipher the controls in a jumbo jet’s cockpit. Fortunately, BoxTop has done an admirable job of maintaining a clean, understandable interface. Despite the number of color controls, their operation actually makes the optimization process go faster and smoother, with one exception: depending on the size and complexity of your original image, you’re forced to wait until PhotoGIF finishes its calculations before you can move onto the next step (the OK button is grayed out until PhotoGIF finishes). More about this later.
I Can See Clearly Now — One significant advantage of the GIF format is that it supports transparency, so pixels marked as transparent won’t appear on a Web page. After clicking OK on the main dialog, you’re presented with PhotoGIF’s second dialog, where you can choose to apply transparency, select a background color that will be marked as the transparent color, add a comment to the file (such as a short copyright notice), and toggle interlacing (which makes a Web browser load the image in stages, rather than from top to bottom). It’s worth noting that if you’re saving a file that is already in Indexed Color mode when you initiate the PhotoGIF plug-in, you will go straight to this second dialog box.
Typically, transparency is defined by one or more colors. You can choose which color to use by using an eyedropper tool to point at the color in your image that should be marked transparent. Shift-clicking with the eyedropper selects multiple colors. There are also two tools for fine-tuning the image’s transparency on a pixel-by-pixel basis: with the paintbrush you can select pixels the way you would paint in any drawing program (memories of MacPaint inevitably rise up when I use this tool); the edger tool helps eliminate pixel halos that occur when an anti-aliased object partially blends with the color set to be invisible. Transparency can also be defined by an alpha channel if one was set up in the original file.
Moving from GIF Animation — PhotoGIF isn’t a tool for creating GIF animations, but it can be useful for pulling out and editing individual images. When opening an animated GIF, you’re presented with a dialog with four options: Edit single image, Edit in cell strip format, Extract single image, and Extract all images. The first two preserve the animation’s structure, so after you’ve made any changes the file is still an animated GIF when viewed in a Web browser. The last two options don’t actually open the original animated GIF, but create new files in Photoshop representing each embedded image.
Editing animated GIF cells in PhotoGIF enables you to modify the global color palette shared by all of the embedded images. If your changes introduce new colors to the palette, you can either force the image to adopt the existing color palette by choosing Force to Global from the Palette pop-up menu, or you can change the palette by selecting Adjust into Global from the pop-up menu.
PhotoGIF versus Photoshop — So how does PhotoGIF stack up against Photoshop’s built-in GIF tools? I’ll admit at the outset that I’m not truly obsessive about compressing every last little byte out of every image. In some limited testing, I took an anti-aliased image of a lizard created in Macromedia FreeHand measuring 85 by 105 pixels, and weighing in at 28,528 bytes. In the first test, I switched to Indexed Color mode using Photoshop’s Web palette option, then saved the file in CompuServe GIF format with interlacing turned on. The resulting GIF file ended up being 5,986 bytes, but had no background transparency (it’s not supported).
The second lizard was run through Adobe’s GIF89a Export filter using similar attributes (Netscape color palette, transparency, interlacing active), and ended up at 5,140 bytes.
The third lizard found himself at the mercy of PhotoGIF using similar attributes, but emerged as a 2,655 byte file. The only other modification I made from the default settings was to increase the diffusion setting from 5 to 7 to offset a green hue that crept into the gray background.
My Only Real Complaints — As is no doubt apparent, I like PhotoGIF and am very happy with its performance. My GIF files are small, the image quality is good, and for the most part it helps me work faster when I’m cranking on multiple iterations of images.
As I mentioned at the outset, producing many images takes a lot of time. But whenever I’m working with even a moderately sized image, I’m forced to wait while PhotoGIF calculates the effects of the current color settings. Probably the first 50 percent of images I create are drafts or tests, where I don’t care about file size. It would be nice to be able to turn off the compression calculations and speed through PhotoGIF’s dialogs with a few presses of the Enter key. In a similar vein, it would speed up my production to have the eyedropper tool automatically selected after I press the Color transparency button. Of course, I could use another GIF creation utility to work around these quibbles, but PhotoGIF’s suite of features more than makes up for my petty demands.
PhotoGIF 3.0.2 is $70, and available for purchase online (a 1.6 MB download) or by telephone from TidBITS sponsor Digital River (BoxTop Software’s distributor; 800/656-5443 or 612/253-8300). BoxTop also offers the free PhotoGIF Lite, which shares some, but not all, of PhotoGIF’s features. Among the features that are missing are color reduction capabilities (so PhotoGIF Lite can’t reduce the size of files) and support for animated GIFs.
<http://www.digitalriver.com/dr/v2/ec_main.entry ?sp=10007&cid=0&sid=7274>
<http://www.boxtopsoft.com/pg-faq.html>