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:
- Asset Gallery
- Captioned image (adds grey shaded background and has specific formatting for caption)
- Four Button
- Image with Crop
- Text and image (only a single image can be added to this component)
- 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:
- News Article Page
- Publication Detail Page
- 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.
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.
PNG is a better format for graphic photos, especially graphic photos with text.
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
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)