The best way to maximize quality for responsive images is to use images that are larger than the intended display size and scale them with the responsive percentage settings. This is particularly important if you are targeting high-resolution devices and monitors, and it also produces better results for zooming and printing in PDF and DOCX documents. The images then have plenty of "reserve resolution" that allows them to display at acceptable sizes on high-resolution displays without being upscaled, which would result in fuzzy or jaggy images.

The setting you use for this is Display Size in the Insert Image dialog. There are corresponding settings for making images responsive in the image toggle and video dialogs as well, where they control the responsive behavior of the clickable/tappable preview images.

Tip: Use image styles for responsive images

You can set the same responsive width for an entire class of images with image styles.

Use an image style instead of setting the same dimensions for every image

If you define an image style, you can set the same absolute or relative width for all the images in a class. This ensures they will all be displayed with the same width on the page, and you no longer have to set the dimensions for every image. You just select the style.

The Display Size setting controls the display size of the image on the page and can make it either static or responsive.

Most browsers handle responsive SVG vector graphics correctly. There are two exceptions: Older versions of Microsoft Internet Explorer and the Microsoft HTML Help/CHM help format. Actually, this is just one exception, because the CHM viewer in Windows uses an older mode of Internet Explorer to render the HTML pages, and Internet Explorer is the problem.

Older versions of Internet Explorer and the CHM help viewer only scale responsive SVG graphics correctly if their internal <svg> tag contains correctly configured width/height attributes followed by a correctly configured viewBox attribute that also contains the default width and height of the graphic. If these three attributes are not all present and correctly configured, the SVG image will remain static and will not scale with the window, even if you insert it with responsive settings.

See SVG Graphics for detailed instructions.

Enabling SVG export in CHM

By default, Help+Manual converts SVG images to PNG in CHM export, for maximum compatibility. If you want vector SVG images in your CHM you need to turn off PNG conversion in Configuration > Publishing Options > HTML Help > HTML Export Options.

In PDF and DOCX responsive images don't adjust dynamically on viewing, because the page width is always static. The user can zoom the pages on the screen, but that simply adjusting the display of the entire page. The layout does not "reflow" as it does in dynamic formats like WebHelp or CHM.

When you export responsive images to PDF and DOCX, the responsive part happens during the actual publishing operation. Help+Manual adjusts the images to the page width during this process in exactly the same way as the dynamic adjustment that happens when the user adjusts the window width in a web browser. However, since the resulting page width is static, the adjustment is also static and final.

It is still a good idea to insert larger images in PDF and DOCX, however. This gives you better image quality on high-resolution devices and for zooming and printing. In both formats, Help+Manual exports the full original image with a scaling command for its final display. If you use a larger image it will have "reserve capacity" that can be used for better display at different resolutions and printing.

If you set the Display Size in the image dialog to % of page width or scaled to full page width, the zoom value you enter is relative to the container of the image. This is the page width if the image is inserted directly on the page or the table cell containing the image if the image is in a table.

In HTML output formats this makes the images responsive. This means that the images will automatically scale with the size of the window.

Use image styles for sizing images

Defining an image style allows you to set an absolute or relative width (% of page width) for all images in a class. This ensures that all the images will be displayed with the same width on the page without you having to apply individual settings to each image. You just need to select the style for the image.

Preventing excessive scaling

If the width is defined as any percentage less than 100% (i.e. up to 99.90%), the image will only expand up to its full native width but will not zoom further to prevent excessive scaling. Setting a width of 100% turns this off and allows unlimited scaling. The % of page width and scaled to full page width options do this for you automatically. The first sets the width to 99.90%, the second sets it to 100%.

Putting responsive images side by side

If you set the image widths to add up to less than 100% you can put multiple responsive images on the same line and they will display side by side. The only exception to this are images with captions: These must be put in tables if you want to display them side by side, because otherwise the caption container will create a new paragraph after every image, even if the images fit on the page side by side.

Responsive images in table cells

Note that when responsive images are in table cells their width is relative to the table cell, not to the page. So you could have three images in a table side by side in three cells, each with a width of 80%, for example. Each image will then be 80% of the width of the cell containing it, leaving 10% space on either side.

Responsive images with captions side by side

When images have captions they have an invisible container around the image that encloses the caption and keeps it with the image. This container always creates a new paragraph in HTML output. To put responsive images with captions side by side you must put them in a table. Otherwise each image will be in a separate paragraph, even if they would actually fit side by side.