Hide full article
I'm a compression junkie. Late at night, when all good graphics geeks are fast asleep, I'm still looking to score one last kilo. Kilobyte that is, so my animation will download two seconds faster. While I'm flirting with full disclosure, I also admit addiction to Equilibrium's DeBabelizer, the ultimate image manipulator's toolbox. Alas, no software package is perfect. DeBabelizer requires the user to think long and hard - something that is progressively more difficult to do when you're under a deadline and half asleep. Like normal people, I long for a program that will make intelligent choices for me.
<http://www.equilibrium.com/>
BoxTop Software first came to my attention when I was working on the book Web Animation for Dummies. They're developing a portfolio of utilities that would make Cecil B. DeMille cast them as David to Equilibrium's Goliath. Instead of trying to take DeBabelizer head-on, they search for chinks in the armor, deconstructing the many individual things DeBabelizer does and transforming each into an inexpensive stand-alone utility. These tools aren't just DeBabelizer knock-offs: each one approaches its task in a new and distinctly different way.
<http://www.boxtopsoft.com/>
ImageVice isn't an application - it's a filter plug-in for applications supporting the Photoshop 3.0 filter plug-in API. It continues BoxTop's tradition by charting a new way to minimize an image's color palette. Contrary to what the name implies, however, ImageVice doesn't compress images. It optimizes the images so they compress better when saved as GIF, PICT, BMP, or PNG formats via your image editing program.
<http://www.boxtopsoft.com/ImageVice.html>
Image Compression Compressed -- To understand how this magic takes place, you have to tolerate a little background on image compression. If it's done well, image compression is like substituting milk for heavy cream in a recipe. Most people will never notice the difference, and the picture will painlessly lose unwanted fat. [For a more detailed explanation of graphic file formats on the Web, see "A Closer View of Web Graphics" in NetBITS-007. -Jeff]
<http://db.netbits.net/article/04458>
The two most prevalent image compression formats for Web and multimedia use are JPEG (created by photographers - the Joint Photographic Experts Group - for continuous tone images) and GIF (Graphic Interchange Format, created by CompuServe and most effective for flat color art).
JPEG is "lossy," which means it reads and then permanently forgets some image information it determines we mortal viewers will never miss. Less information means smaller files but lower quality. JPEG shrinks photos so effectively that, even at its lowest quality settings, the result is usually acceptable. So why not compress all our photos this way? Because JPEG has two important drawbacks.
First, there is no way to assign transparency to a JPEG image. So forget about irregular shapes, cool buttons, and most animations. Second, because JPEG was developed for continuous tone images, it's optimized for 24-bit color. You can't override JPEG's decisions about what visual information is important (well, you can, but only through sneaky and devious ways beyond the limits of this article!). Trying to influence the compression algorithm by lowering the number of colors in your image won't work, because the JPEG algorithm will stubbornly put them back, and not even in the right RGB combination or in the right places. That's why flat color images look terrible as JPEGs: the algorithm adds noise into flat areas and fuzzes crisp edges.
This brings us to GIFs, which depend on LZW (Lempel-Ziv Welch) compression. If compression schemes were professions, LZW would be a demographer, surveying an image in horizontal bands looking for information to put into neat digital boxes. If it finds a band of solid color or a pattern, it labels it and re-uses the label to describe identical colors and patterns elsewhere. GIF images each contain a custom palette; the fewer the colors in this palette, the smaller the image files end up, causing them to load quicker.
Like JPEG, GIF has its dark side. Its image palette can store only 256 colors. The more times a color appears, the more likely it will find a place in the palette. If the image is primarily made up of large areas of solid colors with clear definitions, this process will create remarkably small images that are often indistinguishable from their originals.
Unfortunately, GIF color polling bites on continuous tone images with no patterns and thousands of colors that are almost, but not quite, the same. Programs that create GIF files will try to mask this by dithering, a technique that attempts to fool the viewer into seeing a color that doesn't exist by creating a tiny pixel pattern of two or more palette colors. Photographs converted to GIF format look textured and grainy at best, noisy and splotchy at worst.
Obviously, it's in your own best interest to save photos as JPEG, not GIF, but we do not live in a perfect world. Users who rely on older Web browsers [We know several. -Jeff] can't even display JPEG files, no matter what the quality. If you must save a photo as a GIF image, how can you keep it from looking like something you wouldn't want to step in?
Enter ImageVice -- Dithering can be a quick fix for mismatched color palettes, but overall the results aren't stellar - and some people (and clients) demand stellar work. ImageVice helps produce compressed images without dithering them. Dithering can be unattractive and a real file fattener. ImageVice analyzes changes in color and value, replacing separate pixels with horizontal bands of color and tone. This allows files to reach new benchmarks of shrinkage - up to 70 percent smaller in some cases.
Sounds great, but I was born suspicious. Benchmarks can be deceiving, and don't add up to much if the image quality suffers for the sake of compression.
Working from this assumption, I concentrated on what I think really matters: the relationship between small and good. Because taste is an individual thing, when I tested ImageVice I created a series of images (see the URL below), which are numerically keyed in brackets in this review. To enhance your reading pleasure, open a browser window and follow along with the visuals.
<http://www.webcreature.com/>
Putting the Squeeze on Images -- I began by scanning a photo with a background of rock formations and a brightly painted metal sculpture containing a linear color blend in the foreground. This is a nasty combination, and I admit to pangs of guilt when I chose it. I set myself the goal of bringing it down to a maximum of 32 colors (5-bit color), while retaining acceptable image quality. Most importantly, the file, which measured 300 by 215 pixels and took up 189K, had to end up smaller than 30K for Web site use.
I saved a high-quality JPEG of the image [1] to use as a visual reality check. Then I created a baseline image [2] with Photoshop's own tools to make a dithered 5-bit GIF, using an adaptive palette (a palette whose colors are chosen from those available in the image). The file was a chunky 51K, and ugly as sin.
With my worst case version in hand, it was time to apply ImageVice. Using this plug-in at its default settings is a complete no-brainer. You set your target number of colors and click OK. Good thing, because tweaking before you've tried a first pass is not really possible. The preview is so small that it's one step above pointless; adding zoom settings to the preview image in next version of ImageVice would be a great improvement.
I ran the default settings at three color levels: 128, 64, and 32 colors. I then made the files into GIFs with BoxTop's PhotoGIF Filter in Photoshop. It includes the invaluable feature of displaying the data fork size (the portion of the file that contains the image, not the resource file information used by the Mac), then saving the file without this additional fat.
<http://www.boxtopsoft.com/photofilter.html>
The 128-color version looked almost as good as the original. The 64-color version was only slightly larger than the Photoshop 32-color one, and of course looked much better. Only at the 32-color level, when the file had shrunk to only 29.3K [3], did I decide I should begin tweaking ImageVice's default settings.
I headed first for ImageVice's Convergence sliders, which control how much averaging takes place from pixel to pixel. Using the lowest Convergence settings and saved with PhotoGIF, the file was 32K and is much better looking than the Photoshop default GIF. At the highest Convergence settings, the test image develops horizontal racing stripes. These are barely noticeable in areas where the image is textured and irregular, but they're distracting in the foreground with the color blend. On the other hand, the result is a mere 28K in size. Images with multi-colored or rough-textured subject matter can tolerate high Convergence settings, but I decided that the default settings worked best in this case. [4]
ImageVice has several options besides Convergence. Smoothing works with Convergence to determine how similar adjacent colors are merged. A high Smoothing setting makes for tiny files, since it's essentially posterizing the image (merging similar colors and reducing the color palette) in horizontal scan lines. Although this worked nicely for the background, it caused the colors in the shiny metal sculpture to band (develop hard-edged color breaks). By slightly decreasing the default Smoothing settings, I was able to reduce the color break-up.
It's hard to preserve detail equally throughout. Unless your image is very dark or light, or contains a critical object at one of those two ends, it's better to preserve color details in the midtones. ImageVice's default settings are set with this in mind. However, the two Clipping sliders give you some control over where color variation is lost or conserved. One Clipping slider controls the threshhold for omitting darker colors (leaving more palette space for mid-range values); the other slider does the same thing by reducing the number of lighter colors.
In my image, I needed much more variation in the light colors than the default settings provided, so I moved the Clipping slider controlling light values down to 8 from the default 15. I also edged the dark value Clipping slider down to 7 from 16, because I discovered the default settings merged a critical foreground detail - the metal sculpture's "hair" - into one black glob. I was able to add back in some of the light aqua shades that had disappeared. Unfortunately, nothing I tried returned detail to the dark areas, because hair hangs vertically, not horizontally. All the subtle variation that tells you that strands of hair are not one solid object are edited out by the horizontal smoothing process. [5] I found this to be one of the few drawbacks in BoxTop's strategy, and the only place in which I missed dithering.
There are often major economies of scale in reducing an image's colors by one or two, even if you can't decrease the image's bit depth. ImageVice enables you to set exactly how many colors your palette will hold; however, it decides which colors to delete for you. This is not necessarily good. By the time you get down to 32 colors, every additional color deleted needs to be chosen carefully, according to the unique needs of the image. If you decide to try shaving a few colors off, at least do the deletion in a utility like PhotoGIF, where you can see the results as you work and can include dithering as part of your solution.
BoxTop Software is up-front about ImageVice's incompatibility with fixed palettes. ImageVice is geared to create adaptive palettes, which are optimized to the individual image. However, the 216-color Web palette is fixed, so I had to know what the files would look like to the average color-deprived Windows user. [The 216-color Web palette contains colors reasonably guaranteed not to be substituted or dithered when viewed via Web browsers on various operating systems. The NetBITS article noted earlier has more information. -Geoff] I took three adaptive color versions - the Photoshop GIF, the optimized ImageVice file, and an optimized DeBabelizer version - and applied the Web-safe palette to them. The word uglification applies here. In all cases, colors shifted to accommodate the highly saturated Web palette. The dark areas in the ImageVice version, already a problem, posterized as black horizontal lines. This is worse than the standard maiming dithered images receive. [6]
Fortunately, several programs enable you to create "optical" colors (essentially boutique dithering) to visually match non-Web-safe colors from an original image. ImageVice images lend themselves to this strategy better than most adaptive images, because ImageVice creates large areas of color which are easy to replace with a dithered pattern.
Color Obsession -- For any place you can use adaptive palette images, ImageVice is now the way to go. It offers the average user the first predictable, inexpensive, and simple way to balance image quality with image compression. But be cautious. If you get into image compression and palette reduction only because you need to create images for a Web site, there's still no magic bullet. Either develop your images with the Web-safe palette in mind (and then use ImageVice, because it will give you the best results in practically no time), warn your audience to come appropriately prepared, or accept those late nights spent obsessing over every colored pixel.
ImageVice is $49.95 and available at BoxTop Software's Web site, along with a 275K fat binary demo version.
[Cynthia Baron is the author of Creating a Digital Portfolio, and co-author of Web Animation for Dummies. She has contributed to a wide range of publications, from Computer Graphics World to Critique Magazine. She teaches design courses and is Technical Director for the Graphic Design program at Northeastern University in Boston, Massachusetts.]
<http://www.amazon.com/exec/obidos/ ISBN=1568303262/
tidbitselectro00A/>
<http://www.amazon.com/exec/obidos/ ISBN=076450195X/
tidbitselectro00A/>
