File name:

The image file you want to insert. You can select a file from the directory above with the mouse or type the filename here. You can also use wildcard characters (? and *) to filter the directory. For example typing *.jpg will only display the JPG files in the current folder and ???.gif will only display GIF files with 3-character names.

Files of type:

This drop-down list filters all the graphics file formats supported by Help+Manual. You can display all the supported files or only files of specific types.

Caption:

Text displayed as a caption beneath the graphic. This text is always centered and automatically uses the standard style Image Caption. You can format it manually by selecting the graphic in the editor window and then selecting text formatting options.

Picture ID:

Text you add here is inserted in the <img> tag as an ID attribute in HTML-based output formats. This is only relevant if you want to manipulate your HTML code manually and need to reference your images with ID attributes.

Add to Table of Figures:

Include the image in the table of figures feature for DOCX and PDF output.

Tooltip:

Text you enter here is added to the <img> tag as the ALT attribute in HTML-based output formats so that it will be displayed as a tooltip when the user positions the mouse over the image.

Note:        If you leave this field blank the image filename will be exported as the tooltip unless you turn this off in Configuration > Publishing Options > WebHelp / HTML Help > HTML Export Options.

Image Style:

Apply an image style that you have defined to set the width and a border for a class of images.

HTML Class:

Allows you to enter one or more HTML class names (separated by spaces) to be added to the class="" attribute of the <img> tag in HTML-based output. This is only needed if you plan to provide additional formatting for images with your own CSS code. Use with care – this can easily interfere with things like responsive images!

Alignment:

These options define how the graphic will be aligned in your output. This works in all output formats (including PDF) and

With text
The default setting. Treats the graphic as though it is a character in the text. It flows with the text without any wrapping.

Left of text
Positions the graphic to the left of the text and wraps the text around it to the right.

Right of text
Positions the graphic to the right of the text and wraps the text around it to the left.

Note that the left/right of text formatting is not displayed in the editor. It is only shown in the output.

Left/right of text is an electronic help format feature. It is not supported in PDF or Word DOCX. Use tables to position graphics in these formats.

Margins:

This defines an invisible margin around the edge of the graphic, between the graphic and text and any other objects on the page. Enter a value in pixels or click on to set individual values for the sides of the image.

You can also enter individual values for each side of the image manually:

Display size:

This setting allows you to resize graphics precisely by percent. Images are not physically resized. The original files are exported with scaling information that controls their display size in the output format.

Use % of page width settings for responsive images:

The % of page width settings ensure that images adjust for the current window size in HTML and when exporting to PDF and Word. This prevents breaking your layout on mobile devices.

Opens the Hotspot Editor, with which you can add clickable areas with hyperlinks to your graphics.