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



Photoshop 5

Photoshop 5.0.2, available for Macintosh and 32-bit Windows, is the latest version of Adobe's flagship image editor, as of this writing. It supports colormapped, grayscale, and RGB PNGs at sample depths of 8 bits, and images optionally can be saved as interlaced. Alpha transparency is supported in grayscale and truecolor images, but there appears to be no way to add any sort of transparency to a palette-based image. Gamma and color correction are also supported, with one caveat; I'll come back to that shortly.

Photoshop 5 is modal, which is to say that images of a given type (e.g., RGB) remain of that type until explicitly converted to something else--a process that must occur before one attempts to save the image. For example, to convert an RGB or grayscale image to palette-based, follow this prescription:

  1. Choose ImageModeIndexed Color, which pops up a dialog box.

  2. Choose an appropriate Palette type (typically Adaptive).

  3. Set the number of colors, either via the Color Depth selector or by entering the number explicitly in the Colors entry field.

  4. Select a dithering method: None, Pattern, or Diffusion.

  5. Choose Faster or Better color matching, and optionally check the Preserve Exact Colors box (disabled if no dithering).

  6. Click the OK button.

The Color Depth selector rather disingenuously indicates bits per pixel, but it is actually nothing more than a shortcut for specifying a power-of-two number of colors--that is, 3 bits/pixel is 8 colors, 4 bits/pixel is 16, and so on. All settings result in 8-bit-per-pixel PNG files.

Note also that the Pattern dither type is known as ordered dithering in other contexts, while the Diffusion choice corresponds to Floyd-Steinberg or something similar. The latter generally looks much better, since human eyeballs are very good at noticing the regular patterns of an ordered dither.

Photoshop 5 includes a wizard for creating transparent images, but we'll step through the procedure manually. The key is not to rely on background transparency but instead to add a new layer representing alpha transparency. More specifically, given an image with or without background transparency, do the following to add an alpha channel to it:

  1. In the Channels palette, click on the arrow at the upper right and select New Channel..., which pops up a dialog box.

  2. In the Name: entry field, give the new channel a name (for example, Alpha) and click the OK button; the other fields can be left with their default values.

  3. In the Channels palette again, return to the original RGB or grayscale channel.

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

  5. In the Lasso Options tab of the tool palette, set the Feather radius to some value, perhaps 13.

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

  7. Do not invert the Lasso selection; instead go back to the Channels palette and select the alpha channel (the lassoed loop will still be visible on the blank channel).

  8. Erase everything outside the loop via EditClear.

  9. Once again, return to the original RGB or grayscale channel via the Channels palette, and optionally click on the visibility box of the alpha channel to show its effects overlaid on the main image.

The preceding Lasso-related operations differ from those in every other image editor that I investigated, including Adobe's own ImageReady 1.0. Specifically, the requirement not to invert the selection in order to erase the outer part of the alpha channel seemed counterintuitive.[25]

[25] It should be noted, however, that I am by no means an expert with any of the image editors described here! It is entirely possible that there are settings or alternative approaches that conform more closely to the ``standard'' Lasso procedure used in the other programs.

Having added an appropriate alpha channel to the image, it may now be saved as a 16-bit gray+alpha or 32-bit RGBA PNG:

  1. Choose FileSave a Copy..., which pops up the usual file dialog box.

  2. Pick an appropriate directory and filename for the image, choose PNG as the format, and make certain the Exclude Alpha Channels checkbox is not checked.

  3. Click the OK button, which triggers yet another dialog box.

  4. Optionally create an interlaced PNG by selecting Adam7 as the interlacing type, and make sure the filter type is Adaptive for grayscale or truecolor images.

  5. Click the OK button.

If transparency is only desired as an aid in creating the image, not as part of the actual file data, check the Flatten Image box in the Save dialog box.

Adobe made significant improvements to the overall handling of gamma and color correction in Photoshop 5, with explicit support for the new sRGB color space (see Chapter 10, "Gamma Correction and Precision Color") and a number of other standard color spaces, as well. Photoshop 5 also includes an option to enable Monitor Compensation (which requires that the monitor be specified correctly first), and it always saves gamma and color-correction information with PNG images.

Unfortunately, the gamma information PS5 saves in PNG images is wrong; it is always too small by a factor of two, resulting in images that display much too darkly. This is a significant problem, because it appears only to affect PNG images. In other words, one cannot simply make the appropriate compensation in Photoshop's RGB setup panel and forget about it; either PNG images will be written incorrectly, or all other image types will be read and written incorrectly. The only workaround within Photoshop 5 is to misadjust the display gamma setting just before saving a PNG image and to reset it just after saving. For example, in a typical Windows PC (or other sRGB display system) with a gamma value of 2.2, temporarily change the value to 1.1 in Photoshop's RGB Setup box (shown in Figure 4-1):

  1. Choose FileColor SettingsRGB Setup...

  2. Halve the Gamma: value (i.e., if it was 2.2, change it to 1.1).

  3. Click the OK button.

Figure 4-1

Figure 4-1: Photoshop 5 RGB Setup window.

Then save the file in PNG format as before, but when finished, be sure to change the value back! Clearly, this is a crude and painful workaround.

An alternative, available at least to DOS, Windows, and Unix users, is to use a third-party utility to change the gamma values in all of the PNG files after they're saved. One such utility is pngcrush, which I'll discuss in some detail in Chapter 5, "Applications: Image Converters". For a system with a gamma value of 2.2, which should correspond to a PNG file gamma of 0.454545 (or 1/2.2), the following command will replace the incorrect gamma information and write the fixed PNGs into a directory called fixed/:

pngcrush -d fixed -replace_gamma 0.454545 foo.png foo2.png ...

Newer versions of pngcrush support a simpler approach, tailor-made for Photoshop 5:

pngcrush -d fixed -double_gamma foo.png foo2.png ...

In addition to writing incorrect information in PNG files, Photoshop 5 appears to ignore any existing color space information when reading PNG files. Although one could, in principle, read the PNG gamma and chromaticity information and set up a custom RGB profile that matches it, this would have to be done manually and requires significant effort and knowledge on the part of the user. In other words, only the most dedicated experts are likely to be able to accomplish it, or even to bother with it in the first place.

Photoshop 5 has several other quirks, as well. As I mentioned earlier, palette-based images are always saved with 8-bit pixels and 256 palette entries, regardless of how few colors are actually used; for a bicolor image, this can result in a bloat factor of eight or more, compared to a properly optimized image. Adobe's rationale seems to be that this sort of optimization should be handled in a web-specific application like ImageReady. But leaving aside the fact that ImageReady 1.0 has similar problems, one would expect a high-end editing application like Photoshop (with its high-end price tag) to do much better.

Photoshop's PNG-related user options are overly technical and can also result in files that are larger than necessary. For example, for most users a simple Interlaced checkbox would suffice; there is no need to know that PNG's interlacing method is formally known as Adam7. Similarly, the ability to specify individual compression filters is nice from a theoretical standpoint, but 99% of users are not going to waste their time experimenting with the six choices Photoshop allows. Most will instead stick with the default value, which is often None (but sometimes Adaptive) and is rarely correct for the given image type. As a rule of thumb, palette-based images should always use None, and grayscale and truecolor images should always use Adaptive. There are very rare cases in which another choice will be better, but they are difficult to predict, and the difference in file size will usually be minimal anyway. In fact, Photoshop should probably offer only these two options in the first place. Oddly enough, Photoshop offers the user no control at all over the compression engine itself, even though this is much easier to understand conceptually and has a more predictable impact on the file size. Photoshop's hardwired compression setting seems to correspond to level 6 in most other implementations.

Photoshop 4 had little or no support for 16-bit-per-sample images; this, together with improved color management, was one of the major new features in version 5. Unfortunately, due to a programming oversight, 16-bit support was not extended to include PNG. On import, 16-bit PNG images are converted to 8-bit samples, and on export, PNG is not offered as an option for 16-bit images. Adobe has indicated that this will be addressed in the next major release.

Photoshop also lacks support for embedded PNG text annotations, despite allowing the user to enter an extensive set via the FileFile Info... dialog box; these can only be saved to an external file. This is particularly surprising given the presence of checkboxes allowing one to Mark as Copyrighted (in the File Info dialog box, shown in Figure 4-2) and Exclude Non-Image Data (in the Save dialog box). The former option has to do with digital watermarking and the copyright symbol in Photoshop's titlebar. As to the latter option, text data is always excluded from the file.

Figure 4-2

Figure 4-2: Photoshop 5 File Info window.

Most critically, Photoshop has absolutely no support for transparency in colormapped PNG images. When an RGBA or gray+alpha image has been converted to indexed mode, only the non-alpha data is affected; that is, Photoshop still indicates two channels, one for the indexed color data and one for the (unchanged) alpha channel. Attempting to save such an image is an exercise in frustration, however: in the Save As dialog, PNG is grayed out even though GIF is allowed (and indeed, a GIF saved in this way will have binary transparency corresponding approximately to the alpha channel). In the Save a Copy dialog, PNG is allowed, but the Exclude Alpha Channels box is both checked and grayed out.

Overall, it is evident that Adobe's attention was devoted more to enhancing generic editing features than to providing comprehensive support (or, in some cases, even basic support) for the three-year-old PNG format. In fact, PNG support seems almost to have been an afterthought, even in version 5.0. This may be reasonable from a business perspective, but it is nevertheless disappointing, given that PNG's capabilities map so closely into Photoshop's.

Further information about Photoshop is available from Adobe's web pages at http://www.adobe.com/prodindex/photoshop/.




Last Update: 2010-Nov-26