You are here: Features > Pictures > About Pictures

About Pictures

You can insert a picture into a content file (e.g., topic, snippet) to help explain something. Flare supports the following types of raster and vector image files: BMP, EMF, EPS, EXPS, GIF, HDP, JPG, JPEG, PNG, PS, SVG, SWF, TIF, TIFF, WDP, WMF, XAML, XPS.

Raster Versus Vector Images

Flare supports common raster image formats such as BMP, GIF, JPG, and PNG. In addition, it supports vector image formats such as EPS, PS, and SVG.

A vector image is comprised of geometric elements such as lines, points, and curves, based on mathematical equations. On the other hand, raster graphics are made up of pixels. A vector image is ideal for print-based output because the clarity is maintained even when you reduce the size of the graphic. If you generate an online output type such as WebHelp or DotNet Help, all vector images are converted to PNG.

It is sometimes difficult to tell the difference between a vector and raster graphic when viewing it at 100%. But if you zoom in the difference becomes apparent. Following is an example of a PDF document with the same image in JPEG and SVG format.

The text in the SVG image is a little more readable. And if we zoom in, we can see why.

Here is what the JPEG image looks like when we zoom in at 300%. Notice that the pixels look blurry when enlarged.

And here is what the SVG image looks like. Notice that the text still looks as clear as it does at a much smaller size.

Tasks Associated with Pictures

You can accomplish the following with pictures.

Picture (insert) These steps show you how to insert an image file that already exists. See Inserting Pictures.
Screen capture (insert) Follow these steps if you have MadCap Capture installed on your computer and you want to capture an image from your screen and insert it into a topic at the same time. See Inserting Screen Capture Images into Topics.
Single-source image (create) If you are creating a project containing pictures and need to generate output for both online and printed output, chances are good that you require different image settings (e.g., file format, color depth, resolution) for those outputs. In the past, the easiest way to accomplish this task was to create one set of images for the online output and another set for the printed output. However, there is another alternative. If you have both MadCap Flare and MadCap Capture installed, you can single-source your images, producing only one set of images for all outputs. You can specify that the online images should have one group of settings, while the printed images have another group of settings. See Creating Single-Source Images.

You can also single-source images when resizing them. This can be done through the use of styles (applying the settings to many images at once) or local formatting (applying the settings to one image). When you generate online output, the image will be displayed in one size, and when you generate print-based output, the image will be displayed in another size. See Resizing Pictures.
Background (add) You can add background settings to an image. This includes the ability to specify a color, another image, and a repeating pattern for the background image. Normally you would not see an image's background, but if you give the image a certain amount of padding, you would see the background around the edges of it. See Adding Backgrounds to Pictures.
Background for topics (add) You can add a background image on topics by using the <body> style tag. See Setting a Background Image on Topics.
Borders (add) You can add borders around an image, specifying the border size, color, and type. See Adding Borders to Pictures.
Hyperlink (insert) After you insert a picture into a topic, you can turn that picture into a hyperlink, connecting it to another topic, a topic in an imported HTML Help file, an external file (such as a website), or an email. See Inserting Image Hyperlinks.
Image file (add) These steps show you how to add a picture to your project, without inserting it into a topic. See Adding Pictures to Projects.
Image file (delete) These steps show you how to remove an image file from a project. See Deleting Image Files from the Project.
Image frame (add) You can draw an image frame in a page layout. The picture you select is added to a frame of the same size, which you can place on the page as necessary. This allows you to place an image automatically on multiple pages in the output. You might use this feature, for example, if you want to place your company logo somewhere on each page. See Adding Pictures to Page Layout Frames.
List of pictures (create) You can use the list-of proxy to generate a list of various types of elements (e.g., tables, images) in your output, with links to the corresponding content. See Creating a List of Pictures.
MadCap Capture (launch) If you have MadCap Capture installed on your computer, you can launch it from within Flare. You can then use Capture to edit any pictures in your project. See Launching MadCap Capture.
Margins (add) You can adjust the margins around an image so that there is extra space above, below, to the right, or to the left of it. See Adding Margins to Pictures.
Microsoft Word output (embed) An option on the Advanced tab of the Target Editor lets you ensure that images are embedded in Microsoft Word output. This option is enabled by default. See Embedding Images in Microsoft Word Output.
Padding (add) You can add padding (i.e., extra space) between an image's border and the image itself. See Adding Padding to Pictures.
Picture (delete) These steps show you how to delete a picture that you have previously inserted into a topic. See Deleting Pictures from Topics.
Picture (edit) If you have MadCap Capture installed on your computer, you can open any image in your project. The image opens in Capture, where you can make changes to it. See Editing Pictures.
Picture (move) After you insert a picture or screen capture image into a topic, you can easily move that picture around. See Moving Pictures in Topics.
Picture (open) You can open a picture that you have added to your project. When you open the picture, it displays in the Image Viewer within Flare. See Opening Pictures.
Picture (position) You can use object positioning to precisely place an inserted picture anywhere you need it on a page. This includes the ability to wrap text around an image or float a picture outside the frame holding the regular flow of text. See About Object Positioning.
Picture (resize) You can resize images with various methods. See Resizing Pictures.
Thumbnails (show in output) When you insert images into Flare content, you can specify that the pictures should be displayed as thumbnails (i.e., much smaller versions of the image) in the output. This is a way to condense topics so that pictures are not taking up as much real estate. When you use this feature, you can specify ways that the user can enlarge the image to see its full size (e.g., by hovering over the thumbnail, by clicking the thumbnail). See Showing Images as Thumbnails in Output.
Thumbnails (show while editing) You can specify that thumbnail images should be shown while you are editing the content. This is simply a feature for you as the author, allowing you to scale all images down to 48 pixels high (if the original size is larger than that). This lets you see more content and less of your images as you edit topics. The images are only scaled for your editing purposes; they are not necessarily shown as thumbnails in the output. See Showing Images as Thumbnails While Editing.
Web images (show/hide in XML Editor) If you have many image tags that link to websites (e.g., <img src="http://www.madcapsoftware.com/images/home/company.png" />), rather than linking to images in the project, slow website response times may slow down your work in the Flare project. Therefore, you might want to disable the rendering of such images in the XML Editor. See Showing and Hiding Web Images in the XML Editor.

Note: When you insert a picture from outside your project into a topic, a copy of the image file is added to your project. The image file is stored in the Resources\Images folder of the Content Explorer, unless you specify another location.

Note: If you import Microsoft Word documents containing embedded pictures into a project, Flare places copies of those image files in subfolders within the Resources\Images folder. This is done in order to avoid naming conflicts with embedded images from other Word documents that you might import. The subfolders are named after the Word documents being imported.

Note: If you apply certain special effects or artwork (e.g., arrows) to images in Word and then import them into Flare, those effects will not be retained. For example, a rotated image will return to its straight, original state. However, there are some workarounds that may allow you to keep the effects or artwork. One solution is to apply another effect such as a shadow or 3-D to the image in Word (e.g., add a shadow to a rotated image that you want to keep). This forces Word to save the image as an entirely new image with the effects. Another possible solution is to save the Word document as a Web Page, manually copy that HTM file into the Flare folder, and then open it within Flare. As for text floating around images, this effect is not supported in Flare. When you import from Word, the text is added below the image.

Note: If you have used non–web-safe image formats (e.g., WMF, EMF, BMP, TIF, TIFF, XPS, EXPS) in your project and want those images to be converted to web-safe formats (e.g., GIF, JPEG, PNG) when you generate online output (e.g., DotNet Help, HTML Help, WebHelp, WebHelp Plus, WebHelp AIR, WebHelp Mobile), you can use an option on the Advanced tab of the Target Editor. For print-based output types (Adobe PDF, XHTML, Microsoft XPS, Microsoft Word, Adobe FrameMaker), the original image file formats will be used when you generate output.