Agencies
Services
Authoring Tips – Wednesday, June 25, 2025
Image Presets: Choosing One That Fits Just Right
Do you ever wonder what size image you should be using? Do you want to know how the WCM group does its image magic to get just the right size for each component?
The answer is in leveraging image presets for each component. This article discusses what image presets are and how they are used within your site to save you the trouble of guessing image sizes and manually creating different sized graphics for each components need.
Image Presets are related to Dynamic Media and affect how images are rendered to the user from various components. Each component is allowed a specific set of presets that aim to give the best experience possible for viewing when that specific component is used.
Dynamic Media Presets
Within components that support Dynamic Media, a Dynamic Media Settings tab exists within the Component Configuration Dialog. Some components offer multiple options, but most are set with their own lone, static settings. Note the behavior of each preset in terms of rendering size of content and which components utilize them:
Large data table content is loading...
| Dynamic Media Preset | Components | Resolution (WxH) | Note |
|---|
*Note, the Dynamic Media component has access to all Image Presets listed above and will display images/video based on the resolution specified for that preset.
Dynamic Media Presets:
Note that several Dynamic Media presets exist outside of our standard Image presets. These are special case:
- contentFragmentOpenDisplay - Used by Content Fragment Display
- contentFragmentList - Used by Content Fragment List
- Listv2Component - Used by List v2
Image Renditions
Users may view individual assets' renditions for each image preset type. This enables them to see how an image will view when rendered using a specific image preset. These renditions cannot be edited, but you may delete individual renditions using the Delete Renditions button on the top toolbar.
When hard-selecting an asset in the AEM DAM, users should select the "More Details" button underneath their asset details to load the Asset Details page.
Once on the Asset Details page, users may select "Renditions" from the left-most dropdown and click through individual renditions to see how images will render in various components that use Dynamic Media.
Rendered Image Sizes
Image Card v2
Many times authors just want to throw an image in to an Image Card and it just fits perfect no matter what without the additional need for Image Modifiers. Dynamic Media is meant for this purpose, however, many agencies prefer to know standard sizes that components render out these images, and these sizes will vary depending on the width the component is set to.
Take note, as Image Cards render images at different widths based on the width of the component, but the image area will always be a set width and height in size (IE: image will not auto-fit to area). Image cards are always 200px in rendered image height:
- 3-column wide image cards use image rendered area of 260 pixels x 200 pixels on LHN pages and 270 pixels x 200 pixels on Full Width pages.
- 4-column wide image cards use image rendered area of 370 pixels x 200 pixels.
- 6-column wide image cards use image rendered area of 570 pixels x 200 pixels.
- Mobile Image Cards use rendered area of 384 pixels x 200 pixels.
Teaser
Just like with the Image Card v2, authors utilize the Teaser component frequently and thus want to know definitive rendered dimensions for images when using different Teaser component configurations.
The Teaser component has 2 Presets: TeaseComponent (default) and TeaserStandardHeight.
The issue with the Teaser component comes in the form of bluriness with images. This tends to occur because images rendered will always "fit" to the rendered space the component is set to, so if the image is small and the Teaser is wider, the image will blur as it scales to fit. Take note the below are for "Image on Top" configuration of the Teaser:
- 4-column wide Teasers use image rendered area of 370 pixels wide.
- 5-column wide Teasers use image rendered area of 470 pixels wide.
- 6-column wide Teasers use image rendered area of 570 pixels wide.
- 12-column wide Teasers use image rendered area of 1170 pixels wide.
- Mobile Teasers use rendered area of 385 pixels wide.
For the "Image on Left/Right" configurations of the Teaser:
- 6-column wide Teasers use image rendered area of 270 pixels wide.
- 12-column wide Teasers use image rendered area of 570 pixels wide.
- Mobile Teasers use rendered area of 385 pixels wide.
Desktop & Mobile Image Considerations
Mobile and Desktop layouts often differ due to screen device sizes, resulting in rendering differences for images between the two device types. As such, some components use specific Desktop and Mobile presets (Image Card v2).
Because Mobile layouts are often different than desktop, users may need to specify image modifiers or alignment options so content is accessible on a mobile device. While it is possible to use the same image for Desktop and Mobile, Mobile devices should only load the smallest amount of data possible, so Mobile image variations may be needed.
Take a look at Adobe's Image Reference catalog for more details on how to alter image display at the component level. In a future update, we'll tackle some of those Image Modifers we keep speaking about and how to effectively use them.
If you don't know when you should be using an Image, Image Card, or a Teaser, try taking a look at our "When to Use..." page covering that topic.