The problem, essentially, is in the way RH handles images. To
explain, I'll start with a quick refresher on the difference
between size and resolution.
Size refers to the amount of information in an image. If an
image measures 100 pixels by 100 pixels, it contains 10,000 pieces
of information. If an image measures 200 pixels by 200 pixels, it
contains 4 times as much information (40,000 pieces). Each pixel
has a color value, and this determines what the image looks like -
its "image," if you will.
By contrast,
resolution refers to the amount of informaton contained
within a certain amount of space. Resolution is frequently measured
in "pixels per inch" - the amount of pixels that fit across an inch
on your monitor, the printed page, your arm (if you're into
tattoos), etc.
These attributes are related, but they are not the same. A
100 x 100 image at 50 ppi (pixels per inch) measures 2 inches high
and 2 inches across. The same 100 x 100 image at 100 ppi measures 1
inch by 1 inch. Note that both images contain the same amount of
information! Only the scaling (i.e., the resolution) changes.
Now let's step back to RH for a moment. RH accepts GIF files,
JPEG files, BMP files (which it converts to either of the
aforementioned types), and PNG files. However, RH for HTML is a
Web-centric program, and as such it handles only one resolution: 96
ppi, the standard for most PC monitors.
What does this mean? It means that if you create an image
that is 288 pixels wide at 288 ppi - remember, this image should
measure 1 inch across - and then insert it into RH, you will see an
image that is 3 inches wide (288/96). This means that RH ignores
the resolution of your imported image - it simply focuses on the
size of the file and scales the information for the Web (96 ppi).
This creates a problem. Normally, you would scale the image
back to the proper size, but RH's scaling functionality is poor.
And this is where the difference between the WYSIWYG editor and
Word (or similar programs) tips out of RH's favor. If you insert an
image into MS Word and then change its size (by percentage), you'll
get a properly scaled verson of the image. If you insert an image
into RH and attempt the same trick, however, you'll lose
information. Why? Because RH "resizes" by throwing away information
- it doesn't change the resolution (as Word does), it simply
changes the number of pixels in the image.
Ok - but what the heck does
that mean? I'll illustrate with a 96x96 square image at 96
ppi. If I insert this image into MS Word, it will appear 1 inch
wide by 1 inch high. If I format the picture and set the size to
50% for both height and width, I am left with a 96 x 96 image at
half an inch in each direction - but I still have the same amount
of information in both directions. Only the resolution has changed.
(It has doubled to 192 ppi, which accounts for the half-inch
measurements.) If I insert the same image into RH, it will appear 1
inch wide by 1 inch high. If I resize the picture, however, I can
change the image size to 48 x 48 pixels. This produces an image
that is half an inch square, but it does
not contain the same amount of information! And therein lies
the problem - it contains less information, so it's less detailed.
RH does allow you to resize the image by dragging the handles, but
this produces further pixelation.
So...what to do? Well, I'm afraid the solution is less than
ideal. First, you need to create a print-resolution image of your
icon. This should have a resolution of 300 ppi or 600 ppi. Scale it
to the desired size: if you want a 1.125-inch wide icon at 600 ppi
in your printed documentation, for example, create the image at 600
ppi with a width of 675 pixels. Next, insert this "print image"
into RH where appropriate. (Note that due to RH's "96 ppi only"
handling, this image will be much larger than it should be!) Tag
the image with a conditional build tag. Finally, generate the
printed documentation, and then search it for each image. (This
should be relatively easy, as each image will be very large.)
Resize each image using Word's "Format Picture" option. You'll need
to scale it to the proper size, which will depend on your
resolution. For example, if you created a print image at 300 ppi,
rescale the image at 32% (96/300); if you created a print image at
600 ppi, rescale the image at 16% (96/600).
Alternatively, you can insert each print image in Word only.
However, you'll need to place text such as "testlogo.png" in each
desired insertion point in RH, tag it with the conditional print
tag, search for each instance in Word, insert the image, set the
layout property to "inline with text," and then delete the text
from the document. This saves you the need to resize each image,
however, because Word understands that an image 675 pixels wide at
600 ppi should be 1.125 inches across (unlike RH, which believes
the same image should be more than 7 inches wide).
And finally: Why not use RH for Word to insert the image into
the topic? The answer: Because I tried it, and I was left with an
abomination that I couldn't satisfactorily edit in the WYIWYG
editor. So I don't suggest that at all.
I realize that this is a lengthy explanation, but I hope it
helps.
-Chet