The PNG Guide is an eBook based on Greg Roelofs' book, originally published by O'Reilly.

Home Applications Applications: Image Editors ImageReady
 
del.icio.us Reddit Facebook StumbleUpon MySpace Twitter


ImageReady

ImageReady is Adobe's Web-specific image editor for 32-bit Windows and the PowerPC-based Macintosh. It provides a number of ways to optimize the size and content of images and can be used either as a back end to Photoshop or as a standalone product. Its capabilities and structure are quite similar to those of Macromedia's Fireworks.

ImageReady 1.0 supports both 24-bit RGB PNGs and 8-bit palette-based PNGs, which it refers to as ``PNG-24'' and ``PNG-8'' files, respectively. There is no direct support for grayscale images, but it is possible to convert a color image to what is basically grayscale (Image → Adjust → Desaturate) and save it as an 8-bit colormapped image with nothing but shades of near-gray in the palette. Interlacing, simple transparency, and full alpha transparency are supported, but the program appears not to allow single-color transparency in RGB images, and its implementation of PNG's RGBA-palette mode is almost useless. I'll take a closer look at that in just a moment.

The procedure for adding portrait-style transparency to an existing RGB image is similar to that for Fireworks and Photoshop. As before, open the file and use the Lasso tool to select the region of interest:

  1. Choose File → Open.

  2. Click on the Lasso tool (left side of tool palette, second from top).

  3. Draw a loop around the face of the subject.

  4. Invert the selection so that the part outside the loop gets erased (Select → Inverse).

  5. Select → Feather... and set the Feather Radius to some value, perhaps 13.

  6. Erase everything outside the loop via Edit → Clear.

Note that, unlike Fireworks's feather radius, ImageReady's extends to both sides of the lassoed path; that is, there will be partially transparent pixels both inside and outside the selection. Thus, we drew our loop a bit bigger here and set the feather radius to roughly half of what it was in the Fireworks example.

Saving the newly cropped image as a 32-bit RGBA PNG is straightforward:

  1. Open the Optimize palette (subwindow), shown in Figure 4-4, if it isn't already popped up (Window → Show Optimize).

  2. Select PNG-24 from the pull-down list at the upper left.

  3. In the Matte: pull-down list, select No Matte (which will then display in the box as ``None'').

  4. Check the Transparency checkbox.

  5. Optionally check the Interlaced checkbox to make an interlaced PNG.

  6. Choose File → Save Optimized As... and pick an appropriate directory and filename.

The PNG-24 Optimize palette is shown in Figure 4-4. The Transparency checkbox is rather misleading; leaving it unchecked indeed creates a completely opaque image, but ImageReady nevertheless writes a full 32-bit RGBA file! That is, the alpha channel is still there, but it is completely blank. One can only hope that this is an oversight and that it will be corrected in the next release; such files can hardly be considered ``optimized.''

Figure 4-4

Figure 4-4: ImageReady Optimize palette for 24-bit PNG, with Matte pull-down menu.

Things get more interesting in the palette-based case. As before, the action takes place in the Optimize palette, as shown in Figure 4-5:

  1. Select PNG-8 from the format pull-down list.

  2. Select an appropriate palette type from the pull-down list on the second line (Perceptual is the default).

  3. Select No Matte from the Matte: pull-down list.

  4. Set Colors: to 256 or Auto.

  5. Set Levels: to 1 (which will reduce the Colors: setting to 255).

  6. Optionally check the Interlaced checkbox.

  7. Choose File → Save Optimized As... and pick an appropriate directory and filename.

Figure 4-5

Figure 4-5: ImageReady Optimize palette for 8-bit (colormapped) PNG.

Because the number of transparency levels was set to 1, this procedure will create an image with binary transparency; there will be a sharp cutoff at the lassoed boundary. (If the main image window is showing the Optimized tab instead of Original, the effects of the Optimize palette will be displayed in ``real time,'' more or less.) How about a nice RGBA-palette image? One might imagine that between 4 and 16 transparency levels would suffice with dithering turned on, but the Levels spin button actually indicates the number of palette entries with transparency, not the number of transparency levels. Thus, even 160 ``levels'' is insufficient in our portrait example. This is largely due to ImageReady's strange optimization algorithm, which seems to prefer dark colors for transparency. Figure 4-6 shows the result; note the speckled appearance of the letters on the right side and the odd banding appearance (almost like an edge-detection algorithm) on the left.

Figure 4-6

Figure 4-6: ImageReady optimized preview with 160 transparent entries, showing artifacts.

For this image, a levels setting between 220 and 230 worked best, at least for transparency. The drawback is that this leaves only 26 to 36 colors for the opaque regions. For facial tones, that is simply not enough--one loses many of the saturated colors and most of the fine gradients and shading, leaving skin tones flat and grainy. And on top of that, the transparent regions show distinct banding, even with the large levels setting. See Figure 4-7 for an example with levels set at 224.

Figure 4-7

Figure 4-7: ImageReady optimized preview with 224 transparent entries, showing degraded facial tones.

Overall, ImageReady's PNG support is adequate, but it seems probable that GIF and JPEG were considerably higher priorities. The PNG-24 mode is excellent for images with full alpha channels, but the 33% size penalty incurred by opaque RGB images (thanks to the extraneous alpha channel) is unlikely to win friends in the web design crowd. PNG-8 is fine for opaque images with more than 16 colors, but low-color images are always saved at 8 bits per pixel, resulting in files that are too big by a factor of anywhere from two to eight. PNG-8 images with transparency, in addition to suffering the quantization problems noted previously, appear always to be saved with as many transparency entries as palette entries, resulting in up to 255 wasted bytes per image.

On the positive side, ImageReady supports interlacing with no trouble, and it preserves existing Copyright text chunks while allowing authors to change or add a new one. The procedure for adding one is simple:

  1. Choose File → Image Info...

  2. Fill in the Copyright: field appropriately (e.g., ``Copyright 1999 O'Reilly and Associates. All rights reserved.'').

  3. Click the OK button.

The only other supported text keyword is Software, which ImageReady always writes automatically (``Adobe ImageReady''); it replaces any previous Software text chunk. All other text chunks are discarded, and there is no provision for authors to add others.

What about gamma and color correction? At first glance, ImageReady appears to support gamma, but this is mostly illusory. It does allow one to adjust the image appearance with a gamma slider (Image → Adjust → Gamma...), but doing so modifies the pixels directly, and information about the adjustment is not saved with the file. In other words, the same image will look different on different systems. Nor is the effect remembered, other than as part of ImageReady's Undo capability--changes to the gamma setting become permanent as soon as the OK button is clicked. PNG files that already have gamma chunks are treated the same as those without; the gamma information is discarded.

ImageReady's compression of PNG images is fair but by no means optimal. I already noted that colormapped images with just a few palette entries are saved at a higher bit depth than is necessary and that palette-based transparency information is stored inefficiently. On top of that, though, pngcrush (discussed in Chapter 5, "Applications: Image Converters") was able to achieve compression improvements of between 6% and 45% on 22 variations of my test image, averaging around 12% overall. The reasons for this are not immediately obvious, however; ImageReady's compression settings seem reasonable, and it does use dynamic filtering on truecolor images.

The ImageReady home page is at http://www.adobe.com/prodindex/imageready/.



Home Applications Applications: Image Editors ImageReady

Last Update: 2010-Nov-26