Color Insert: Bitmap Comparisons Flash

The color insert of this Flash 5 Bible is dedicated to comparing bitmap quality within Flash, subject to various settings. Using two example photographs, we’ve generated a series of bitmap examples to help you understand the consequences of some of the procedures that have been discussed here.

To facilitate your deeper exploration into the subject of bitmap settings and their impact upon image quality, we’ve included the .SWF’s that were built to collect and test our sample shots. They are located in the folder titled, BitMap_Comparison_ 8-SWF’s, which is located in the ch12 folder on the CD-ROM. Because this is all about how images look on screen (and print is merely an approximation of this), we encourage you to use the Flash Player’s zoom facility to take a good look at these examples. We’ve chosen to supply these as eight separate .SWF’s because this will enable you to open several pages simultaneously for side-by-side comparison.

Generation of comparison images
Before you can make intelligent use of bitmaps in Flash, it’s imperative to know about the options for creating bitmaps for use within Flash. That’s because all bitmaps are not created equal. A bitmap from one program, created with similar settings, can be twice the file size with no appreciable increase in quality of a bitmap created in another program. It makes no sense to study optimization constraints within Flash if you ignore your exposure to fatty imports. To create a set of controlled images that could be used for comparison, we chose a portrait (with a background that shifts contrast) and a landscape (with a broad expanse of graduated color).

Both images were derived from high-quality film shots, scanned at a very high resolution, down-sampled to equivalent dimensions and resolution, 227 × 287 pixels at 96 ppi, and saved as uncompressed .TIFs. These files were used as the source files from which all other variations were derived (with the sole exception of the double-JPEG example, in which an image that had been previously .JPEG’d was used as the source image for the double-JPEG example).

Our principal comparisons were done with Adobe Photoshop and Macromedia Fireworks, simply to establish a comparison of the quality and degree of compression available from each program. However, when preparing .JPEGs for comparison, we added a choice alternative, BoxTop Software’s ProJPEG, which is a Photoshopcompatible plug-in. Because each program offers different options and different combinations of options, it is absolutely impossible to perform a direct one-for-one comparison. As such, our results are necessarily subjective and may not equate with your findings.

The BoxTop interface
As shown below, the interface for the BoxTop ProJPEG Photoshop-compatible plug-in is roomy and clear. For the purpose of our comparison we retained all settings as shown except for the Quality setting, which was set at 94, 60, and 30 for the High, Medium, and Low samples.

Here’s the BoxTop ProJPEG interface. Note the check box options at the right for both Better Image Sampling and Huffman code optimization.

Image Sampling and Huffman code optimization.

The Fireworks interface
As shown below, Fireworks’ Export Preview interface is also roomy and clear. It also provides the option which we did not use of comparing the before image with three other previews. Again, for this comparison we retained all settings as shown except for the Quality setting, which was set at 94, 60, and 30 for the High, Medium, and Low samples. The Fireworks’ Export Preview has several options that may have tipped the compression contest in its favor. Note that we used the default, No Smoothing, and that we left the Remove Unused Colors check box activated.

The Fireworks Export Preview

The Fireworks Export Preview

The Photoshop interface
The Photoshop Interface that was used for these comparisons is shown in Figure below. In all fairness, it should be noted that Photoshop also sports a roomy interface complete with preview, which is accessed from Photoshop with the File➪Save for Web command. (But it should also be noted that, in preliminary testing, the Save for Web interface, in multiple configurations, failed to deliver competitive compressions.)

For this comparison we retained all settings as shown except for the Quality setting, which was set at 11, 9, and 7 for the High, Medium, and Low samples. The deviation in these settings is due to the Quality range of 1 to 12, rather than 1 to 10.

The familiar Photoshop .JPEG dialog. Note that the Quality range is from 1 to 12, rather than the expected 1 to 10 shows below. However, this difference was not the deciding factor in Photoshop’s failure to produce competitive compression— we experimented with multiple settings and with the Save for Web dialog. In all cases, Photoshop delivered much heavier .JPEGs than either Fireworks or the BoxTop plug-in ProJPEG.

The Photoshop .JPEG dialog

The Photoshop .JPEG dialog

Compression Results
To make reasonable sense of the results of our compression tests on the portrait and road images, we assembled the results into Table below.

Compression Results

Observations and notes about the results of the settings
When we set out to create this test, we had some preconceptions based on prior experience that dissolved in the face of this metrical analysis. In some instances, the results were even counterintuitive, or clearly subject to the specific nature of the bitmap’s final use.

As shown below, in all cases, unless specified otherwise (for smoothing comparisons and to demonstrate double-JPEG corruption), the settings in the Flash Bitmap Properties dialog were maintained to preserve the compression and quality of the imported image. Unless otherwise noted, the .JPEGs and .PNGs were generated with Fireworks from the same Photoshop source .TIF.

Regardless of the kind of image imported, these settings in the Flash Bitmap Properties dialog usually deliver the highest quality image while preserving the imported compression.

Regardless of the kind of image imported, these settings in the Flash Bitmap Properties dialog usually deliver the highest

Basic image-type comparisons in the color insert
The following is a description of each image in the color section, plate by plate. To see the images discussed, flip to the insert.
Color Plate 1: At the top left, the uncompressed Photoshop .TIF source file is displayed, as rendered by Flash with no compression. In the adjacent panel, this original .TIF is compared to 24-bit .PNGs from both Fireworks and Photoshop; note the slight color shift in the Photoshop .PNG. In subsequent panels, high quality (94 percent) and low quality (30 percent) .JPEGs are compared. Although the quality is nearly the same, on close inspection, at 200 percent zoom (right-click/Ctrl+click), the BoxTop images are slightly less chunky, with less artifacts.

High-quality .JPEG smoothing comparisons
Color Plate 2: Here, high-quality .JPEGs are compared when deployed in the Flash Bitmap Properties dialog either with or without smoothing enabled. At 100 percent, the unsmoothed image is superior. However, if you intend to scale the image smoothing may, as shown, improve the quality. The difference is more noticeable with the portrait.

High-quality Fireworks .JPEG scaling comparisons (no smoothing)
Color Plate 3: Here the high-quality .JPEGs of both images are compared to the same image, when scaled to 200 percent. Note how the horizon detail of the landscape is adversely affected by the zoom, while the portrait is chunky but almost acceptable.

Medium-quality Fireworks .JPEG scaling comparisons (no smoothing)
Color Plate 4: Here the medium-quality .JPEGs of both images are compared to the same image, when scaled to 200 percent. At 100 percent, both images are acceptable. But at 200 percent, it’s a different story: Here, you’ll note that the portrait is too chunky and unacceptable—many areas have a marked checkerboard pattern. Conversely, the zoomed horizon detail of the landscape isn’t much worse than the same view of the high-quality version.

Low-quality Fireworks .JPEG scaling comparisons (no smoothing)
Color Plate 5: Here the low-quality .JPEGs of both images are compared to the same image, when scaled to 200 percent. At 100 percent you’ll note that the portrait is barely usable too many areas of soft transition have been chopped and flattened. At 200 percent, the portrait is so corrupted and badly discolored that it’s unusable. It’s easier to tolerate distortion in landscapes, thus the 100 percent view of the landscape is still usable, although not advisable for anything more than a background or an incidental shot. However, the zoomed horizon detail of the landscape is far worse than the zooms of both the high- and medium-quality versions note, especially, the shimmer of artifacts both immediately above the horizon and around the clouds.

Medium-quality double-.JPEG corruption comparisons (no smoothing)
Color Plate 6: This image was created by first saving a low-quality .JPEG from Photoshop, then opening it in Fireworks, and then saving it as a low-quality .JPEG from Fireworks. Although the portrait faired worse than the landscape, the results weren’t nearly as monstrous as we had expected. The double-.JPEGs are chunkier and have more artifacts in transition areas, but they aren’t as bad as the print world’s admonition that precedes them.

Bit depth and color comparisons
Color Plate 7: These images demonstrate the effect of reduced bit depth or range of color through a series of three reductions. The 24-bit .PNG is a full-color image, with a range of millions of possible colors. Subsequent images have been reduced to 256, 128, and 64 colors. Note the increased posterization (or clumping of flattened color) in the transition of the cheek from light-to-dark, as well as the blue sky. Also note the successive banding of the accompanying spectrum.

High-quality .JPEG rotation comparisons
Color Plate 8: This is perhaps the trickiest comparison to analyze. We had this problem when building our Web site for the Flash 4 Bible. When the animation resolved and the book was displayed at a slight, 14-degree angle, it was distorted and it was distorted regardless of whether it was rotated in Photoshop and imported with the angle, or if it was imported into Flash on the square and subsequently rotated the manner of the distortion changed, but not the perception of distortion!

  • When rotated in Flash, hard edges, such as text, may appear choppy as if they had been cut out with pinking shears. Yet, when zoomed, this effect is less problematic.
  • When rotated in Photoshop, prior to import into Flash, hard edges are less choppy, although the file will increase (to accommodate the larger overall shape), the background will become a fixed color, and a certain flutter may occur along the edges of the transition between the background and the image. Yet, other straight lines and text will appear smoother and more acceptable. However, at 200 percent zoom, text looks worse than the same image rotated in Flash.
  • Before rotating a bitmap in Flash, you should perform a few tests to see how your specific bitmap will be affected by the combination of compression, zoom, smoothing, and rotation (either in or out of Flash). Your choices and your decision will certainly vary, subject to the nature of the bitmap and the manner in which it will be used within Flash.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics