<aside> 💡

To upload the right type of image into AEM we need to consider:

• Cropping them to the correct dimensions
• Using the recommended size of less than 600 KB
• Adding alternative text once we bring them to our page

⚡️ For a visual version of this guide, and to get started with the right dimensions you can see this Figma guide.

</aside>

Cropping images to the correct dimensions

Depending on the location and image you want to upload or update in AEM, dimensions will vary. Please follow these guidelines based on type of images.

1. Top banner image

• Appears on: top of all pages, usually inside the “background image” component.
• Recommended dimensions: 1440 x 480 px
• Important: the background image component can be set to different heights which will affect what areas of the image are shown. See below for AEM examples:

60% height

30% height

Depending on the image, you might want to pay attention to the safe area so that anything you deem important is not cropped oddly. See this Figma page for reference.

2. Horizontal image

• Appears on:

  • Below the top banner, in the text+image area on most introductory sections of pages
  • Program cards under the Undergraduate or Graduate programs sections of most homepages

• Recommended dimensions: 1000 x 600 px

• AEM example:

  

3. Vertical image

• Appears on:
  • Cards that use image+text where there is a three column layout
• Recommended dimensions: 700 x 930 px