Return to Home Page Graphics column icon ONLINE GRAPHICS

B Y   N E I L   P E R L I N 
Boston Chapter

  Welcome to Hyperviews' Graphics column. This column describes the concepts behind graphics used in WinHelp and HTML-based help and documentation. The column's goal is to present enough detail to be helpful to writers, without the detail needed by programmers. This issue discusses the common question about graphics - "why can't I scale a bitmap without ruining it?" - focusing on three issues. What does "ruined" mean? Why does this happen? And what can you do about it?
What does "ruined" mean? Assume you're creating a help file for an application and want to insert a screen shot in one of the topics. You display the screen, capture it by pressing PrintScreen or using a graphics tool, save it as a graphic file, and insert the reference to that file in the topic. But the screen shot is too big, and you decide to reduce it. When you do, the letters and icons look broken and the detail is lost. For example, compare Figures 1 and 2. Figure 1 is the original. Figure 2 is the scaled graphic. Note the difference in quality.
Figure 1 - The Original Version
Figure 1 – The original version
Figure 2 - The Scaled Version
Figure 2 – The scaled version

If Figure 2 is an example of what you're getting, read on.

Why does this happen? The problem is due to the nature of bitmaps. A bitmap is basically a grid of pixels, as shown in Figure 3.

Figure 3 - A Pixel Grid That Forms A Bitmap
Figure 3 – A pixel grid that forms a bitmap

If you wanted to scale this graphic by 50%, how might you do so?

  • You could shrink the pixels, thus shrinking the overall graphic. For example, making the pixels 50% smaller makes the graphic 50% smaller. Unfortunately, you can't shrink the pixels.
  • The alternative is to discard some pixels and shrink the graphic into the freed-up space. For example, discarding half the pixels means that the space they needed can now be discarded. Technically, this works perfectly. The problem lies in the nature of the original graphic and what pixels get discarded.

When you scale a graphic, your graphics tool determines what pixels to discard. If the original graphic had 1,000 pixels of one color and you discard half, you get a graphic with 500 pixels of one color and no loss of quality. But, if the graphic contains text and images and you discard half the pixels, some of those pixels will come out of a letter or icon and, with those pixels gone, the letter or icon looks broken.

What can you do about the problem? One answer is to duck the problem by not using large graphics like full screen shots or dialog boxes. But that may not be an option. You may need to use large graphics. Then what?

One option is to insert the graphic and just accept the fact that it's large enough to trigger scroll bars. (This is equivalent to creating a printed book containing a table that's so big that you have to print it in landscape format, forcing users to turn the book 90 degrees to read it. It's an inconsistency in the interface, but the content of that table may be important enough to justify it.)

You might vary the previous option by discarding parts of the graphic that don't apply and adding ragged edges to indicate discards. Or create a call-out like the one shown in Figure 4. You can get impressive results, but it will probably require a lot of work.

Figure 4 - A Call-Out Effect
 

Figure 4 – A call-out effect

But, sooner or later, you'll have to scale the graphic. The easiest way is to use a scaling utility. RoboHELP users have Blue Sky Software's Resize. There's WexTech's Smooth Scaling utility, bundled with Doc-To-Help and also available separately. Tools like PhotoShop and Paint Shop Pro also have scaling features.

These tools still lose detail, especially if you scale below about 80% of the original size. However, most of them try to make up for the loss of detail by using a technique called anti-aliasing. Anti-aliasing can't fix the broken lines and letters but, by adding grey pixels and rounding the corners of some pixels, it tricks the eye into seeing continuous lines where there are none. The result can be a bit blurry, like looking at the graphic through a dirty window, but it's usually perfectly readable. You may even be able to artificially boost the detail by opening the scaled graphic in a tool like Paint Shop Pro or PhotoShop and applying the Sharpen feature.

Summary Scaling graphics is both a design issue and a technical issue. Ideally, you'll settle it at the design level first by deciding not to use large graphics, like full-screen shots, at all. But if you have to, and if you want to maintain the quality of the graphics, clip and crop to get the important portions first. Because of the time needed to do the scaling, and hand tweaking and experimentation, and the usually visible reduction in quality with even the best of tools and techniques, scaling is one of those tasks that are best avoided unless you really need the effect.
Trademarks
  • Photoshop is a registered trademark of Adobe Systems Incorporated.
  • Blue Sky, Blue Sky Software, and RoboHELP are trademarks or registered trademarks of Blue Sky Software Corporation in the United States, or other countries, or both.
  • Other company, product, and service names may be trademarks or service marks of others.
Return to Home Page Neil Perlin has twenty years experience in technical writing, with fourteen in training, consulting, and development for various types of online documentation including WinHelp, HTML Help, and some now known only in legend. Neil writes about online documentation and lectures frequently to computer societies, the STC, and other professional groups. Neil provides training, consulting, and development for online documentation through Hyper/Word Services of Tewksbury, MA. He can be reached at nperlin@concentric.net, www.hyperword.com.
Spring 1999
Volume 2, # 2