Poor image quality in Webhelp

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.

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

Sounds like it is more a browser issue.

Browser>Tools>Internet Options>Advanced...

Check these settings in your browser...

and these.

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

I understand.

Can you create some dummy lorsum text and images to demonstrate?

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.

Folks, please take this as intended. A simple humorous observation.

I mean no ill will whatsoever. I'm sure many folks have perfectly valid reasons for confidentiality. But I'm just slack jawed amazed at the number of times we helpers need to see a screen capture or have a closer look at an issue in order to try and help resolve it and we are met with the "I can't show you any part of it because of NDA" or some other similar reasoning.

The part that strikes my funny bone (and admittedly I do have a very odd funny bone) is that what we are talking about is usually a help system. Unless the help system has the formula for creating a planet destroying device, I'm flabbergasted to think of any way a simple screen capture would be harmful.

But that's just me. Perhaps I've been away from the corporate world for far too long.

Carry on... Rick

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?

Looks the same to me

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.

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?

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.

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):

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.

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.

You might want to take this thread and show your group.

I think I saw somewhere in the thread that there was an issue getting the images back to a size where they looked okay dimensionally? Have you tried right-clicking the images? If so, you should see an option to Reset Size.

Also, I know 300 DPI is common (or at least I think it is) for things headed to print. For the web, I believe the DPI is MUCH lower. I believe 72 DPI is the norm.

I know RoboHelp offers an abilty to tag content so that only one version of something is included in the output. I'm wondering here if you might be able to have one image at 300 DPI for your print stuff and a second one at 72 DPI for the RoboHelp/Web use.

Not only is the 300 DPI a higher quality image, but it will also consume a larger amount of disk space and take a lot longer to load up when the page is presented.

Cheers... Rick

The only image resize reset I can find is for pixels in photoshop:

I use 300 dpi only for editing. If you look at the picture I posted with the photoshop info in it, notice that it says it is 72 dpi. This image is actually in my project. This is what saving for web will do for you. All of the pictures I use start at 300 dpi but the final product only has 72 dpi images in it.

You cannot have the same named file, in RH at least. It will create a big problem and may corrupt your project if it accepts it. You do want to keep the names as close as possible so that sorting to find them easily can be accomplished quickly.

I have used the tagging for output but do not think it works with output. I suppose you could link to an outside source to retrieve something with the same name, because the address would be different. Maybe making a folder in the baggage bin would accomplish this. I find it easier to keep them together and just suffix them, or use the DHTML code from the menu.

Look at the info on the image above again. When photoshop saves for the web, it downsizes everything, but the resolution is still very nice for the application. Editing at 300 dpi allows finer control of the pixels, kind of like using a finer brush when painting. Editing at 72 dpi would litterally destroy the image before you even got to use it.

I'm referring to the ability in RoboHelp to right-click an image and choose the option to reset.

Cheers... Rick

Just tried it out. Looks like it resets to the last project file save time but not the image file save time. The image remains the same if resized in RH and then opened in photoshop, to that of the last time the image was file saved in photoshop. I resized an image in RH by dragging the handles and then right mouse clicked on the image and got the context menu you posted. If I were to save the page after resizing this way I don't know if the resize would still work. Will have to try that.

I think what Rick is recalling in Post 32 is something I found with importing Word documents. What happens there is that if the Word document has images that have been scaled down from 100%, then when Word saves the document as an HTML file so that Rh can import it, the image gets converted from a PNG to a JPG and depending on the amount of scaling, the quality suffers.

The trick there is to set all images to 100% before importing.

Your docs are Fm but maybe this will lead you to another area to investigate.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

I understand about the comment on FM and RH here.

1, RH has the baggage, image and multimedia folders. I have noticed that there are some items that must be placed in these in order to work with RH, and some that don't need to be in here for some reason. I also noticed that sometimes RH gets confused if links are made before the resource has been properly imported and placed in these. I am assuming that has to do with vestigal addressing. I do not use the RH "Manage Linked Resources" which might fix all of the inconsistencies I have encountered.

2. Yes RH does resize, depending on the selected output I guess. You want some outputs to be scalable for mobile use. The web only needs 72 dpi but you need to start higher, especially if RH uprez things to 150 dpi. I haven't noticed in TCS3 this resolution change to 96 dpi though... in fact mine are all at 72 dpi in the final project save.

3. I have not noticed any of the RH outputs changing images to lessor resolutions (72 dpi), making them less quality. This leads me to think that either the image source is being changed (address?) before RH works them. The Design view is not WYSIWYG until you use the View Selected Item in the output format from Design view.

4. I have never experienced better quality when using RH resizing, versus a real image editor, like PS. I do use RH to limit the image size on a page though. This is always going from large to smaller though.

5. Question: Are any of these images you are using in RH or FM inside of a table cell? I have noticed that these cells sometimes prevent outside influences when editing things around them on the same page. I see the default resolution options available in FM for importing: