You can insert images into
A vector image comprises 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.
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.
You can insert pages from PDFs as images. When you select a PDF file, you can choose the specific page from it to be inserted as an image.
PDF images are supported in all outputs. However, the way these files are treated depends on the output format:
PDF If you generate PDF output, the page you inserted is kept as a PDF. So it's sort of like a one-page PDF within a big PDF. You'll find that you can select text in that PDF image, just like you can in the larger PDF.
Also, any vector-based information is retained, therefore retaining the quality and clarity you expect. This is especially useful if you inserted a PDF that contains Microsoft Visio diagrams or vector drawings from CAD (computer-aided design) software.
All Other Outputs If you generate any output other than PDF, the PDF page you inserted is converted to a PNG file, even if it contains vector-based drawings. That's largely due to the fact that browser-based output types do not support vector images. Because the image displays in a raster format, you will find that it is not as crisp as its vector counterpart in PDF output.
You can accomplish the following with images.
- Image File (Add) These steps show you how to add an image to your project, without inserting it into a topic.
See Adding Images to Projects.
- Images (Insert) These steps show you how to insert an image file that already exists. See Inserting Images.
- Screen Capture (Add) Follow these steps if you have MadCap Capture installed on your computer and you want to capture an image from your screen and add it to the project, without inserting it into a topic at the same time. See Adding Screen Capture Files to Projects.
- 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.
- 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 Images.
- Borders (Add) You can add borders around an image, specifying the border size, color, and type. See Adding Borders to Images.
- Image (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 Images.
- Image (Move) After you insert a picture or screen capture image into a content file, you can easily move that image around. See Moving Images in Content Files.
- Image (Resize) You can resize images with various methods. See Resizing Images.
- 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 Images.
- Objects (Auto-size) If you have inserted MadCap Capture images that contain objects with text, you can auto-size those objects automatically when the output is generated. This can be done by selecting an option in the Advanced tab of the Target Editor. The original image file and its associated properties (.props) file remain unchanged. Only the output image is affected. See Auto-sizing Capture Image Objects to Fit Text.
- Padding (Add) You can add padding (i.e., extra space) between an image's border and the image itself. See Adding Padding to Images.
- Position You can position an image so that content wraps around it. See About Positioning Elements.
- Thumbnails (Preview) In the XML Editor, when you are viewing a topic or snippet that contains a thumbnail image, you can right-click on that thumbnail and select Preview Image from the context menu. This enlarges the thumbnail image within the editor so that you can more easily see it and read any callouts within it. You can then click on the full-size image to return it to a thumbnail. See Previewing Thumbnails.
- Thumbnails (Show in Output) When you insert images into Flare content, you can specify that the images 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 images 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
necessarilyshown 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.
- About Box in Skin (Select) You can select an image to be used for the "About box" in the output window. You can use this About box for any purpose you like. See Selecting an Image for the About Box.
- ALT Text (Add Empty) You can add an empty "alt" (alternate text) attribute to images that do not have one. The attribute gets added to the output when the target is generated. See Applying Empty Alt Text.
- Background for Topics/Watermark (Add) You can add a background image on topics by using the body style.
See Creating Watermarks.
- Delete These steps show you how to delete an image that you have previously inserted into a topic.
You can also remove an image file from a project.See Deleting Images from Content Files and Deleting Image Files from the Project.
- Group You can select images from groups of pinned images and recently used images. You can expand or collapse each group. Image groups are a way to quickly access the images that you use the most. See Using Image Groups.
- Hyperlink and Image Map (Insert) After you insert an image, 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. You can also create multiple hyperlinks for specific sections of the image, and even place conditions on those sections. This is called an "image map." See Creating Image Maps.
- Image Frame (Add) You can draw an image frame in a page layout. The image 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 Images to Page Layout Frames.
- Links for HTML Help (Patch) If you generate Microsoft HTML Help output, some topics may not look as intended when they are printed from the CHM file, due to stylesheet-related problems. You can use this feature to "patch" those problems, ensuring the printed topics will look as intended. Why would you not use this option? The only reason not to use this option is when you plan to rename the generated CHM file. If this option is enabled and you rename the CHM file, styles in the output are broken. This happens because, when the option is enabled, the file name of the CHM is hardcoded into the CHM itself. See Patching Stylesheets and Image Links for HTML Help.
- List of Images (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 Images.
- 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 images in your project. See Launching MadCap Capture.
- 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.
- Open You can open an image that you have added to your project. When you open the image , it displays in the Image Viewer within Flare. See Opening Images.
- Paste You can copy and paste an image from another program, such as Microsoft Word, into a
content file (e.g., topic, snippet). When you do this, a copy of the image file is added in PNG format to your project with a name that you provide. See Pasting Images from Other Programs.
- Pin You can pin your favorite images to the top of the list so you can easily find them again later. See Pinning Images.
- Regenerate If necessary, you can quickly regenerate (update) all of the images in your project. See Regenerating Images.
- Remove from Generated TOC If you have inserted images into the headings in your topics, you can make sure those images do not appear in the generated TOC of the printed output. See Removing Images from Headings in a Generated TOC.
- Resize Images with Low DPI Starting with Flare
10, images with a very low DPI are rendered more accurately in the XML Editor (WYSIWYG)and PDF output, usually resulting in slightly larger and more blurry images (as is consistent with their lower DPI). Therefore, if you upgrade from an older version to Flare 10or higher, you might notice images that looked a certain size before now look larger and more blurry (because their true DPI is being rendered more precisely). The best solution, and a long-term one, is to replace your lower-DPI images with higher-DPI images to be used in print output. But you also have the option to revert back to previous version behavior. If you want to use the more precise resizing from newer versions of the software, open the Options dialog (File > Options), select the General tab, and select Automatically resize low DPI images. If you want to use the behavior from older versions of the software, leave this option disabled.
- Resized Scaled Images (Generate) When you use Flare's resizing features to scale images, you can specify whether you want Flare to pre-compile the resized images.
You can do this for the online outputs (HTML5, Clean XHTML, DotNet Help, Eclipse Help, Microsoft HTML Help, WebHelp, WebHelp AIR, WebHelp Mobile, WebHelp Plus), as well as for Microsoft Word and Adobe FrameMaker output.What does this mean? It means that Flare will create new copies of images wherever you have specified resizing, rather than relying on the browser to render the new size from the original. This means better quality images, but it also means more image files in the output. It is recommended that you leave the default pre-compile setting as it is (enabled). However, if you want to disable it, you can open the Target Editor, select the Advanced tab, and select Generate resized copies of scaled images to remove the check mark. (For Adobe PDF, Microsoft XPS, and XHTML Book output, the resized images will always be pre-compiled, whether this option is enabled or not.)
- Resolution and Dimensions (View) When you click on an image file in the Content Explorer or File List window pane, its resolution and dimensions are displayed at the bottom. If you have set the online or print DPI for an image using MadCap Capture, these values are also shown.
- Select To select an image in the XML Editor, you can left-click on it. Another option is to right-click on it and choose Select from the context menu.
Single-Source Image (Create) If you are creating a project containing images 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. You can also single-source images when resizing. This can be done through 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 Images and Creating Single-Source Images.
- Web-Safe Images 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., HTML5, Clean XHTML, DotNet Help, Eclipse Help, Microsoft HTML Help, WebHelp, WebHelp AIR, WebHelp Mobile, WebHelp Plus—you can use an option on the Advanced tab of the Target Editor. For print-based output types (Adobe FrameMaker, Adobe PDF, Microsoft Word, Microsoft XPS, XHTML Book), the original image file formats will be used when you generate output. See Generating Web-Safe Images.
Tip: For print-based output, you should try to use images with a high DPI (dots per inch) quality (300 is typically recommended). The higher the DPI for an image, the more it shrinks in the output, so you should try to obtain as large as an image as possible to begin with. If that doesn't work, a lower DPI (e.g., 250, 200, 150) may produce acceptable results in print output. By contrast, online output is usually displayed at 72 or 96 DPI, so a lower DPI image is okay for those outputs. To produce the best possible images for both online and print-based outputs, you might consider using different images for those outputs and applying conditions to them. Another option is to use single-sourcing features with MadCap Capture, which lets you accomplish the same thing with only one image for both online and print outputs. See Creating Single-Source Images.
Note: When you insert an image 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: TIFF files are not supported in Microsoft HTML Help in Windows XP.
Note: If you import Microsoft Word documents containing embedded images 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., HTML5, Clean XHTML, DotNet Help, Eclipse Help, Microsoft HTML Help, WebHelp, WebHelp AIR, WebHelp Mobile, WebHelp Plus—you can use an option on the Advanced tab of the Target Editor. For print-based output types (Adobe FrameMaker, Adobe PDF, Microsoft Word, Microsoft XPS, XHTML Book), the original image file formats will be used when you generate output.