Although responsive and adaptive images are sometimes used as synonyms, the Ektron CMS handles images differently depending on if they are referenced with adaptive images or responsive design.

Similarities between responsive and adaptive images

Both responsive and adaptive images leverage the same physical files that are generated by breakpoints set within the workarea. You create, enable, and manage the breakpoints within the workarea > settings > configuration > mobile settings > adaptive image settings section. When an image is added to the CMS, it also creates an image within the appropriate physical folder on the server hosting the site for all applicable breakpoints enabled in this section. Below is a screen capture of these settings and their default values. The CMS by default does not generate these images until a break point is activated in these settings.

Differences between responsive and adaptive images

Responsive Images

The size of the image being displayed for responsive images is determined by the server, based on the size of the browser displaying the content. If the browser is resized to a smaller window, the page automatically uses a different-sized image based on the breakpoint that is met by the browser.

An image can be made responsive within a piece of content by using Aloha editor inspector. When in edit mode on a piece of content, click review > inspector to open it. After clicking the image to set the inspector's focus, click advanced and check the Responsive field. You can then further configure this instance of the image, including the use of different images at different breakpoints.

Adaptive Images

The size of an adaptive image is determined at page load time, based on the breakpoint that the page meets. If the window is resized, the site does not serve a different-sized image.