Skip to Content

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:  800 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 size ratio is 1000px by 750 px.

For Profile images, the best size ratio is 768 px by 900 px.

Image Formats: When to use JPEG and when to use PNG

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

File Formet: JPEG; Image Size: 1000 px by 750 px; Transform Quality: Extra Big, 4:3 Aspect

PNG is a better format for graphic photos, especially graphic photos with text. 

File Format: PNG; Image Size 1000 px by 750 px; Transform Quality: Extra Big, Any Aspect

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

 

 

 

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)