Skip to Content

Search: {{$root.lsaSearchQuery.q}}, Page {{$}}

Working with Images

AEM is a design-friendly program, but that means it requires more exploration of all the many different components to see what looks best on the page, which can be easily configured into two, three, or four columns using the "responsive column" component. 

There are six different image-related components in AEM:

  1. Asset Gallery
  2. Captioned image (adds grey shaded background and has specific formatting for caption)
  3. Four Button
  4. Image with Crop
  5. Text and image (only a single image can be added to this component)
  6. Text (allows the placement of multiple images within text, though fyi, spacing can be challenging)

AEM also has template pages where images can have a prominent place:

  1. News Article Page
  2. Publication Detail Page
  3. Profile Page

To ensure that you have the best quality images for either a component or a template page, read on to learn about Image Sizes and Formats.

Image Sizes 

For optimal images in AEM, editors should follow these dimensions:

  • Width:  900 px (minimum) – 1000 px (Maximum)
  • Height: 600 px (minimum) – 750 px (maximum)
  • File size should not exceed 5 MB for images

For the Slideshow, the best image dimensions are 1000px by 750 px.

For Profile images, the best image dimensions are 600 px by 900 px.

Image Formats: Always use JPEG

JPEG is the format that you will use for the images on your site – photos of students, faculty, etc.

Use images with little or no compression. When saving as JPG/JPEG from Photoshop, use the maximum quality setting of 12.

File Formet: JPEG; Image Size: 1000 px wide; Transform Quality: XL

Some things to be aware of when working with images in AEM

The Transform / Quality drop down appears when using the Image with Crop component and the Inline Text Editor component (adapted by Web Services Developers to accept multiple images).

Your choice in this field should roughly correlate to the size of the image you are using in the component, as the system manages the resolution of the image based upon what you select.

Little = thumbnail size image

Regular = standard 4x3 image ("Free Crop" choice for this and the following sizes should be used when you have cropped the image)

Big = 3/4 column-size image

Extra Big = full column-size image

ABOVE: Dialogue for Image With Crop Component




Text and Image Component

ABOVE: Text & Image Component Dialogue

The Screen Size drop down appears under the "Advanced Image Properties" tab in the Text & Image component as well as the Text component.

It allows you to change the size of the image within the component (to align best with the text to left or right) using the following choices:

large (=3/4 column)

medium (=1/2 column)

small (=1/3 column)

1000px Wide

Text and Image Component. Image is sized to 1000px wide. Transform Quality is set to XL.