You can optimize the display of images on mobile or other devices that differ from desktop proportions by setting a focal point.

A focal point is the place on the image that the browser will try to keep visible, no matter how the image is cropped due to the display size of the mobile device.

Assign a Focal Point to an Image

Focal points can be assigned to any responsive images in the CMS including hero images, ACM section images, thumbnails, calendar of events, and special offers.

Note
Focal points can only be applied to templates and images where the image size is responsive, i.e. it changes based on screen size. Images where dimensions are pre-set, such as those pasted within body copy, cannot have a focal point assigned.

The screenshots below show how you can define a focal point in hero images. The procedure is similar for other image placements.

1. Access the image you want to edit. Select Adjust Image to crop the photo and assign a Focal Point.

2. In the Adjust image page, first click the Focal Point button on the bottom-left.

   

3. Next, click the spot on the image where you want to place the focal point.

4. Click Update.
5. Now when the image is cropped, the browser will always try to keep the focal point portion of the image visible.

   

Note
Focal points cannot be defined for an image once and then reused throughout the website. You must  define the focal point for each image in each location.