Images for Print, Online, CHM (newbie question)

[98plustwo]

Hey folks,

I recently joined the Flare community and have been using Flare for about a month now. To be honest I don't find it as intuitive as I thought it would be, but that might be due to a lack of CSS skills and bad workflow habits. Anyway, I actually have a couple of questions but the two most pressing ones have to do with images. At my former job I didn't have to care about single-sourcing at all (or rather that's what my boss and I thought) and I was completely happy using Snagit and just inserting images at will. Now things are different and I am faced with beginner issues I probably should have solved years ago.

Image sizes/DPI for different outputs

What I want to do is pretty simple and most of you will roll their eyes in disgust and not bother to help. But please, help me

The facts:
- I produce a lot of screenshots, at the moment I take these screenshots at 700x400 pixels.
- I produce CHM and HTML output as well as PDF for print
- In the stylesheet I have defined a max size of 350x200 (half of the original size) for the Default output (CHM and Online)

Then the trouble begins:

From my understanding I don't need to set a max size for PDF output because the DPI (set at 200 or 300, not sure yet) will take care of that, but will it? Because as of now it doesn't work. Also I don't know what I'm doing. What is the workflow for making the individual settings in Flare/Capture? I've been through all the CSS options, tried the Profiles in Capture but I must be doing something wrong. Maybe someone could give me a best practice example or something? I know this is kind of a broad question. Sorry.

Captions

My goal is to have one to three images (the number varies) floating right, stacked on top of each other, each one including a small caption. I did some research and found the <div> example by Paul Pehrson which doesn't really work. The text appears beside the image in the <div> and the images do not stack. I could even do without the stacking and be perfectly ok with images just sitting beside each other, but I need those captions!

So there you have it. I appreciate your help, really.

[roboHAL]

Hello 98plustwo. Welcome to the forum.

I personally do not use images all that much in my documentation because I'm documenting software. Screens have a tendency to change, certain data needs to be obfuscated, masked, etc. which means image editing, increased disk file size and so forth. Nevertheless, I do recognize the need for images, however, and only mention this because you mention that you produce a lot of screenshots. You may want to consider limiting that if practical.

On to your concerns, it seems to me dpi resolution is totally independent of width and height dimension. So the fact that your PDF output is set to a particular dpi, this doesn't mean you have addressed your maximum size concern. When you insert the image in Flare, the Image Properties dialog allows you to input a minimum and maximum size value, and I believe this is where that information would be specified. You cannot (to my knowledge) control the resolution (dpi) of the image within Flare.

As for captions and the fact that you want images stacked, I have little doubt there is some html trickery (such as the div's you mentioned) that can achieve what you're looking for. However, in my experience I've found that more often than not using a table of how ever many rows and columns allows one to achieve the greatest control over positioning.

Hope my response helps you in some way.

[98plustwo]

Hi roboHAL.

thanks for the reply and for welcoming me to the forum!

I'm documenting software too and we need a lot of screenshots.

Concerning DPI, what I was trying to say is that DPI affects the general size of the images in the PDF. Maximum size is of course something completely different.

As for the captions, I think I've used the wrong word (I'm not a native English speaker). I didn't mean to say "stacking", just vertically above each other (if that makes any sense), like in a table column. So yes, I could use tables but I'd prefer not to. If there's any other way I would be happy to learn how that could work.

[ChoccieMuffin]

Another welcome from me. And I've found that with Flare there is no such thing as a silly question!

Here's a suggestion for you, which is how I do it. Others may have better suggestions.

When I insert a screenshot, it is usually in its own paragraph, so I'll have an introductory paragraph to which I apply a generic class to keep it with the next paragraph (I use this class elsewhere which is why it's a generic), then the paragraph that contains the image to which I apply the "graphic" class (this has a "page-break-before:avoid;" attribute and a bit of extra margin above and below), and I also apply a class to the image that I insert, which limits its width. I have eight different image classes which I apply, depending on the size of the screenshot. My screenshots can be all sorts of sizes and shapes, so I adjust them by max width rather than height, which suits me and allows me to adjust sizes.

So the code looks something like this:

<p>regular paragraph, with assorted text.>/p>
<p class="KeepWithNext">Paragraph that introduces the graphic, which needs to stay "attached" to the screenshot</p>
<p class="graphic"><img src="Images/[imagename].png" class="Size_8" /></p>

Hope that helps.

Edit: There was an excellent webinar last week on CSS and getting captions and stuff after graphics. I've just had a quick look and it hasn't been made available yet as a recording, but there are some brilliant webinars here that I recommend looking at:

http://www.madcapsoftware.com/resources ... aspx#flare

[matt_lorenzi]

Hope it is not too late to reply on this thread, rather than start a new one.

My question may address something the OP might find useful as well.

I am also trying to single source - particularly images. I build most of my images in Illustrator on a 5" wide artboard. When I save out, I preserve the outboard width and export as JPEG at 300dpi.
The reason for the high DPI is that if used them in print I will get a high resolution output. Is 300dpi too high? Perhaps, but it is what I have been using for years. A 5" 300dpi image for print is not overkill.

Back to my point; so these images are to serve double-duty for print and web. For PDF the size is perfect, it fits within my content column and all is well. When used for online output the image can appear huge (in Flare) depending on the Medium being used. I have my CSS set at max-width 100%, 90%, 80% depending on which @media query being used. So the image resizes in the browser quite nicely.

Now for my question:
Is there anything wrong with doing it this way? The only potential downside I see is that my original image in the browser comes in at 1500dpi (5x300=1500). This is only made apparent when right-clicking "view image in new tab" and then you see the huge image. Should I be saving two images: one for print and one for web? Seems a bit of a pain, if the CSS seems to be handling the interpolation. My only concern is the project might get bloated and prone to long loading times given the large images. Keep in mind they are black and white JPEGs with lots of white space, so most are are well under 300k in size.

This is another one of those "best practices" questions which I find is hard to nail down with Flare.