Responsive images

<< Click to Display Table of Contents >>

Navigation:  Basic Working Procedures > Using Graphics >

Responsive images

Graphics are often a problem in responsive layouts designed to adapt automatically to different device sizes – from desktop monitors to hand-held smartphones. Traditionally, graphics have fixed dimensions that break responsive layouts on screens that are smaller than the graphic.

To solve this problem you need to set the width of your graphics in percent relative to the page dimensions. Then the graphic can never be wider than the page. Length is not a problem, because pages can always scroll vertically. However, you never want the page to have to scroll horizontally on mobile devices with fluid layouts.

Maximizing quality for responsive images

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.

Click to expand/collapseMaking images responsive with the Display Size setting
Click to expand/collapseResponsive images in PDF and DOCX
Click to expand/collapseResponsive images: relative to page or table cell width