Poor image quality in Webhelp

[Sreekanth_S]

Hi

I am using FM11-RH10 as part of TCS4.

I have images referenced in FrameMaker book. These images are clear and are of good quality (no blurry text or pixelated graphics).

Now, when I import the FM book into RH, the image clarity is slightly affected (text in the image gets blurry), but still are of acceptable quality. However, when I publish it as Webhelp, the text is hardly readable.

I browsed through these forurms and found that selecting/ deselecting the Adobe Distiller option in Settings file gives better output. I tried that but it did not help.

Any other workarounds?

Thanks in advance.

Sreekanth

[RickNoll]

Can you give any information on the pictures being used? File type (jpg, gif, bmp, png, tiff, etc.), file size, resolution (dpi)?

Does the format size of your pictures change after importing, like say from a wide format (16x9) to a square format (9x9)?

Are you viewing in a compiled format or still in the editing mode? My settings are most likely different from your own since I use TC3 but I use Photoshop with a 300dpi setting to edit and then save at max for the web. Sometimes the format changes and I have to go and change the pixel ratio. In quickview of a page containing pictures, often times the resolution is terrible, but after compiling file, the resolution comes back in full glory.

[Sreekanth_S]

The images are in both PNG and JPG formats.

The size and dpi of the original image does change. For example, an image that is originally 830 x 406 pixels with 96 dpi, changes to 606 x 502 pixels, with 150 dpi on importing to RH.

I am viewing it in the compiled format in FireFox, IE, and Chrome.

Sreekanth

[RickNoll]

The only reason to use png formats is when there are layers in the file and you want to edit those later on. I would not use them in your final output. If the layers are for moving animations, then gifs would be the better format. 96dpi seems pretty low res to me. Like I said I always start with 300 dpi and then let photoshop down res them. Up ressing, like what your responce seems to indicate is not a good tactic to use. If viewing these in a browser, another important question than is what is the viewing screen resolution set at? I don't know if your TCS has Photoshop in it or not, if it doesn't I would get a photo editor where you can change the pixel ratios, resolution and formats.So right now I would recommend:

Input picture resolution is 300 dpi

Final picture output format is jpg

Pixel ratio is square

[Sreekanth_S]

Hi Rick

I am not a media designer, but I somehow managed to change the settings of an image to 300 dpi and JPG format in Adobe Illustrator. The resulting image was of 2594 x 1269 dimension. I added that to FM and imported the book to RH.

Here again, the image in RH is acceptable quality as earlier, and the WebHelp output is of unacceptable quality.

Sreekanth

[RickNoll]

Sounds like it is more a browser issue.

Browser>Tools>Internet Options>Advanced...

Check these settings in your browser...

and these.

[RickNoll]

Why not use the windows snipping tool, post it here to show a before and after example image if you can.

[Sreekanth_S]

Unfortunately I cannot do that as the data is confidential.

Sreekanth

[RickNoll]

I understand.

[Sreekanth_S]

I will check if inserting some other image gets me the same kind of result and share it here.

Sreekanth

[Sreekanth_S]

Hope this will give an idea.

Original image: 2719 x 1125, 300 dpi.

Image in RH Editor: 664 x 304, 150 dpi.

Image in WebHelp output:

Sreekanth

[RickNoll]

When you click for a larger view does the image clean up. I didn't know you were using two images with code in the final output.

[Sreekanth_S]

Sorry, I did not understand your question.

Sreekanth

[RickNoll · Accepted solution]

usually there is some HTML code on the first image to use it only as a kind of low rez placeholder, since clicking on it will link to the full sized image. Inside the source for the page you might be able to change some of the code associated with the image placeholder so that it is bigger and with better rez. Do you know how to view the source code and edit it?

[RickNoll]

I usually use a text link and a DHTML popup for a good image I want to show. The small image for me does very little but take up space. For the DHTML popup I limit the size so that it is in it's own separate child window ontop of the original page. It gives the reader more real estate. I will never resize an image in RH or anyother program by dragging the picture frame handles. If the image doesn't look good, I start over in Photoshop. What you are displaying looks like an oversized icon that has been dragged out to fill a space thought appropriate there.

[RickNoll]

I take it that the picture shown and the one linked to it are using two different names and reside in baggage files in RH, correct?

[RickNoll]

Here is an example screen shot of a DHTML popup in one of my projects:

The code looks like this:

<table cellspacing="0" width="100%">

<col style="width: 100%;" />

<tr>

  <td><p style="margin-top: 3pt; margin-bottom: 3pt; font-size: 18pt;

     margin-left: 0px;">What at first appears to be a quick

   and easy fit can make SA operate slower and slower with each iteration,

   unless the user refines or optimizes the process before pressing

   the start button. The further apart relationships are at the start,

   the harder and longer the computer must work. At the very least,

   the user and drag an instrument close to its real location in

   a model before starting more intensive alignments. The user needs

   to evaluate and set relevant options accordingly for:</p>

  <ul type="disc">

   <li style="font-size: 18pt;"><p style="margin-left: 12px; font-size: 18pt;">The

    <span style="font-weight: bold; font-style: italic;"><a href="javascript:BSSCPopup('../../SubSampling.jpg',421,139);"

    id="a4">number of points</a></span> in the fit (here there

    are 1,195). Even on a 64 bit machine, good video card and

    8 <?rh-ignored text="gigabites" ?>gigabites of Ram memory,

    this one relationship can grind a computer to a halt. Choosing

    <span style="font-weight: bold;">i=10</span> will only use

    every 10th point, still providing enough even coverage over

    the part surface to fit it adequately, or at least to get

    the two closer together, providing that the measurements were

    made to utilize this feature.</p></li>

Of course it wont work for you if you tried to dispaly this in a browser because you don't have the pictures or file structure of where they are stored.

Here are the settings used:

Notice the size... quite small yet very readable.

[Sreekanth_S]

No Rick. It is a single file.

I changed the dimension in RH as you suggested and it looks better now.

However, is there a way I can get it by default? I have about 100 images that are messed up this way. And, being a part of team which creates the Settings file and other guidelines for importing FM into RH, I need to offer guidane to make my team's life easier (without having to do any post-import task). Can you please offer any tips on this?

Sreekanth

[RickNoll]

I use a trick:

Notice my page has a paper look to it, it is not just white. This was an RH template file. Well I stitched together this smaller file to make a huge jpg file of it and called it "Template". This file is 4x larger than any page I am working with, at least 16x larger than any image I am working with. When I want an image to fit in my project I copy and paste it from the screen I am working on, on to this template image as a layer, then crop and erase as required, then save for web in photoshop as a jpg file. Adobe elements could be used as well to do this reduction. Using the same screen to copy from that I am viewing the project on gives me the correct size when I copy. I never cut and paste directly into RH or FM... only onto this large template file. After cropping the image I save it with a different name and import it as a baggage file in RH unless I have to do some editing like this (some erasing):

This is the same procedure I use if I take pictures and want to insert them...

The same is true for animated gifs (unfortunately the gifs don't seem to work in here):

[Sreekanth_S]

Interesting, I may do this. But I am not sure, if others will be ready to go through this process for so many images.

But, thanks for all the help you provided. I am working out combinations of 300 dpi and deselecting Acrobat distiller settings as a workaround. I will update my findings here.

Sreekanth

[Sreekanth_S]

Captiv8r Rick, glad you pitched in with the lighthearted comment. Breaking my head over this at 2 a.m., I certainly welcome that.

Sreekanth

[RickNoll]

I am extremely organized with the pictures, importing them as baggage files, and then linking them. This allows me to just double click on them if I need to edit them later on on a page view in RH. This opens them in photoshop, or any editing program you want to link to. Edit away in the program and then just close it and the baggage file and page is updated with the edit automatically. You can multi-select image files to import in the baggage folder if you want. File naming is very important to keep discriptive enough to find again. I stated a few months collecting and organizing image files before I started the RH project. I write my text directly in RH but occasionally will bring in word and pdf files.

Here is where I import the baggage files:

You should be able to just click on any of these images I am posting to see them full sized.

[Sreekanth_S]

Most of my team-mates are new to RH. So, I have to keep the post-import tasks to minimum or even nil. Any deviation might even result in the team not adopting this approach altogether. So, while I understand the benefits of your solution, I cannot use it atleast for now.

Sreekanth

[Sreekanth_S]

Well, it is not over yet.

I  was assuming that when I use referenced images in FM, RH picks up the original image when the FM is imported. But that doesn't seem to happen. My image size in FM is 5.341" x 4.077" (300 dpi image after resizing). When this image is imported to RH, it is 528px x 399px, which is almost same as image in FM book. (Original image size is 2747px x 2097px).

Sreekanth

[RickNoll]

I am not understanding the size of your images I guess. Here is an example from one of my projects and the image specs. The actual file size is 180KB:

Do any of these posts look of lesser quality than yours? Remember to click on them to see full size.