Image Quality

[seamanp4764]

Just started using Flare a few weeks ago. Very cool package, but I'm having image quality issues when viewing the output. The project I'm working on is loaded with screenshots. I'm using SnagIt to create and modify the images. I've been bringing them down to a width of 800 pixels and they look clean in SnagIt. They also look clean if I bring them into Word. Can't seem to get real good quality once I bring them into Flare, publish the output, then view. I've tried numerous formats (png, gif, jpg, etc.) with no luck. I'm sure there has to be a method to create really clean screenshots in the output, but I'm having trouble finding it! Any help would be appreciated.

[techwriter31]

What output type are you generating (PDF, online help, etc.)?

I'm not sure if this will help your situation, but here are a few things I've found through trial and error:
- PNGs work well for both PDF and online outputs.
- I often use Illustrator for line drawings and export them as PNGs at a pretty high DPI. When I insert them into Flare topics, I size them the same as the original Illustrator artboard that I exported.
- If generating an online output (WebHelp, HTML5, etc.) I check the "Generate resized copies of scaled images" (I believe this is enabled by default) and the image quality looks great on screen.

If generating online output and using screenshots of a user interface or similar, you could consider using the "thumbnails" option so that the graphics are displayed as thumbnails until the user hovers over/clicks them and you can keep the original image size. But this would most likely require modifications to your style sheet and the use of mediums if single-sourcing your content. (I don't use this option myself, so I'm not sure what the pitfalls may be with this method.)
http://webhelp.madcapsoftware.com/flare ... thumbnails

[SteveS]

Resizing of images will always cause some loss of image quality as the resizing process tries to make (for example) 4 pixels display properly in 3. Imagine if the pixels were 1 red, 1 blue, then 2 red; forcing that to display in 3 pixels is bound to look odd!

For that reason I try to set up screen shots so they will not have to be resized. Most of my work is for print, so I try to set up a screen shot that is 550 pixels wide. If you are using screenshots for print don't try to set resolution to anything greater than the default, all that does is display the 96 pixels per inch at the new resolution (ie 300 dpi), making the image smaller.

If I have to resize an image I will resize it in snagit (or other graphics program). It is better using percentages and trying to stick to 'easy' values; ie 60, 70, 75, 80, 90 percent. Check the resampling options for the resize operation and select the best. If you are going to print at 300 dpi, print the test images at 300 dpi, don't trust screen previews for print.

After resizing I will use an unsharp mask (sharpening or whatever your graphics program calls it). If you over sharpen you will get image degredation, particularly around text and other complex lines, so it is a matter of trial and error.

Oh, and I've found snaggits curled paper edge resets resolution to 72 dpi, causing a loss of quality when added to a document. If you see an unexpected loss of image quality, check any filters you've used haven't changed the output resolution...

HTH

[DocuWil]

I always use MadCap Capture to capture images and I never have problems. My pictures look nice in WebHelp as well as PDF or Word outputs.
I always use PNG as output and leave the Color Depth and Print DPI to default.
In the topics I set the Width to my needs and the Height to Automatic or vice versa.
In fact I use a whole bunch of settings in the image style (img) which I can use very quickly and convenient:

Code: Select all

img._h65mm
{
	height: 65mm;
	width: auto;
}

img._h70mm
{
	width: auto;
	height: 70mm;
}

img._h80mm
{
	width: auto;
	height: 80mm;
}

img._h60mm
{
	width: auto;
	height: 60mm;
}

img._w100mm
{
	width: 100mm;
	height: auto;
}

img._w110mm
{
	height: auto;
	width: 110mm;
}

img._w120mm
{
	height: auto;
	width: 120mm;
}

img._w130mm
{
	height: auto;
	width: 130mm;
}

img._w140mm
{
	height: auto;
	width: 140mm;
}

img._w150mm
{
	height: auto;
	width: 150mm;
}

img._w160mm
{
	height: auto;
	width: 160mm;
}

img._w170mm
{
	height: auto;
	width: 170mm;
}

img._w180mm
{
	height: auto;
	width: 180mm;
}

img._w090mm
{
	height: auto;
	width: 90mm;
}

img._w080mm
{
	height: auto;
	width: 80mm;
}

img._w070mm
{
	height: auto;
	width: 70mm;
}

img._w060mm
{
	height: auto;
	width: 60mm;
}

img._w050mm
{
	height: auto;
	width: 50mm;
}

[seamanp4764]

Thanks to all for the insight! I used to code this stuff manually a few years ago and never had issues with image quality. I only concerned with online viewing for now. I'll browse through the replies and see what I can come up with!