Image Resolution In Word Output

[kwag_myers]

It seems to be the week for image issues. Well, here's mine:

Note the difference in clarity of the text in this image:

imageRez.png

The only difference I can see is the top image resolution is 96dpi and the bottom is 100dpi. I've tried making them both the same with no improvement. Here's what the syntax looks like:

Code: Select all

<img src="../Resources/Images/Dashboard Details/03000002_1.png" MadCap:mediastyle="@media print { width: 234px;height: 205px; }" />
<img src="../Resources/Images/Dashboard Details/03000003.png" MadCap:mediastyle="@media print { width: 651px;height: 251px; }" />

I've also tried playing with the Print Size, but these are the actual file sizes I've posted. The only setting in my style sheet for img is some padding I tried to add (which apparently is unsupported so I had to add borders to the actual images).

Here's the real head-scratcher: When I generate a PDF from the Word output (CutePDF Writer) the resolution between images is more consistent. Unfortunately, my client needs a Word deliverable. Any ideas, no matter how obscure, are appreciated.

[SteveS]

Are you forcing the image to be resized when you set width and height?

Resizing images, particularly those with fine lines (such as text) can cause issues. The resizing program has to decide to go up or down on parts of pixels.

HTH

[kwag_myers]

I'm setting the Print Size to the exact size of the image. Any resizing is done in Snagit or Photoshop, but the images in my example are both 100%. In Snagit, I'm using the Canvas Size as my reference for Print Size and my Capture Resolution is set at 100dpi.

Leaving Print Size to default causes all my images to be fuzzy in all my output types (I will eventually be using this doc set for webhelp). My current settings result in clear images in webhelp, with some distortion in resized images, and consistent resolution in PDF output.

I should also mention that I'm adding an 8px white border to the top, bottom, and right to add some padding. Although I don't really think this is a factor since all images have this.

[LTinker68]

It's hard to tell from the image, but is there sufficient space to display all the images next to each other at 100%? Or could it be the tag containing all those images isn't large enough for all of them to fit in at 100%, so it's automatically resizing them to fit the available space, instead of adjusting the space to fit the images? Don't forget you have to account for the "box" model of the img tag and the "box" model around the other images in the same container tag, and the "box" model of the container tag. It could look fine in the WYSIWYG editor, but when all the margins and padding and borders of all elements are taken into account, it could be there's just not enough room for everything.

If you place the image somewhere else, away from all other images and with lots of space around, does it appear the same way, or is it clearer?

[SteveS]

If you select an image in word and open the picture tools format tab, then click the size dialog box launcher you can access the images advanced properties. Under scale properties there is a percentage figure. Ideally it should be 100%. I'd be checking there to make sure the image is being displayed at it best.

If it is being displayed at 100% it means some work is needed on the image, if not (especially if the images are being scaled differently) it will give you a start point for tracking what's going wrong.

HTH

[kwag_myers]

It's really difficult for me to post much more than I have already. I'm working in a highly confidential environment and this is stuff currently under development.

...Don't forget you have to account for the "box" model of the img tag and the "box" model around the other images in the same container tag, and the "box" model of the container tag.

You lost me. I'm not sure what the box model is, or how to go about compensating for it.

If you place the image somewhere else, away from all other images and with lots of space around, does it appear the same way, or is it clearer?

Most of my images are either on a line by themselves (following a <br />) or separate paragraph, so there's no text wrapping.

If you select an image in word and open the picture tools format tab, then click the size dialog box launcher you can access the images advanced properties. Under scale properties there is a percentage figure. Ideally it should be 100%.

Word shows the images at 100%.

[LTinker68]

...Don't forget you have to account for the "box" model of the img tag and the "box" model around the other images in the same container tag, and the "box" model of the container tag.

You lost me. I'm not sure what the box model is, or how to go about compensating for it.

See the explanation on w3schools at http://www.w3schools.com/css/css_boxmodel.asp. Since it's an image, you might not have any padding, margin, borders set, but you also wouldn't be able to tell easily if you did have padding or margins set. In addition to the box model around each img tag, there would be the box model (padding especially) for the tag containing the images (paragraph, div, table cell, etc.). It's probably not the issue, but it's something else to eliminate.

One other way to test would be to look at the output on another computer. Perhaps even build the output on another computer, if you can. Those two steps would help narrow down the problem to Flare and not some setting on your computer.

[Terence]

Hi, I have an issue that may be related so I thought I'd post it here.

I'm trying to display a background image in a box in Flare, and I'm noticing a decline in image quality between what's displayed in the Flare interface and what's displayed in the PDF output. Can someone please help? I've been dealing with this for hours and can't figure it out.

I read over this thread and took screenshots of multiple versions of this image for comparison. It's a transparent PNG image that is saved in Photoshop at 300 dpi. I checked the image compression settings in the target and while downscaling is not selected, image compression only has the choices "auto" and "JPEG", so it's currently set to "auto" (selecting JPEG destroys the transparency).

Here's the photoshop version:

photoshop_ver.png

Here's how the box looks in the Flare interface. I added the same image outside the box in a paragraph tag to see if there was any distortion that came from the image automatically resizing due to the box size:

flare_ver.png

Here's how it looks in Flare PDF output. Notice how the image looks fuzzier (and also bigger):

flare_pdf_ver.png

For comparison, here's how it looks in Word:

word_ver.png

And here's how it looks in a PDF generated from Word:

word_pdf_ver.png

I can't have someone else generate it for me at the moment, but I can provide a version from a separate computer after the weekend if you'd like.

Thanks for any help in advance.