AEM Authoring and Asset Renditions

[tinsel26]

Is there a way to use Asset Renditions ( mobile, tablet or custom) in Image component  AEM Authoring( instead of uploading assets for each breakpoint in the component)

Trying to optimize the authoring process here. Please share best practice.

[SantoshSai]

Hi @tinsel26,

Short answer: yes - don’t upload separate “mobile/tablet/desktop” assets. Use the Core Image component’s responsive widths (srcset/sizes) and, if you need different crops per breakpoint, layer in Dynamic Media Smart Crop. That gives authors a single image to pick while AEM delivers the right rendition automatically.

What to use (and when)

1) One asset → many widths (most common)

• In your page template’s Image component policy, set Allowed widths (e.g., 320, 640, 960, 1280, 1920) and a sensible sizes string (e.g., (min-width: 1024px) 50vw, 100vw).

• The Core Image component will emit srcset/sizes and AEM will serve optimally resized images (on-the-fly and cached), so you only author once. 

2) One asset → different crops for mobile/tablet/desktop (only if you truly need different framing)

• Enable Dynamic Media and configure Smart Crop (or presets) via Image Profiles on your DAM folders.

• Authors still select a single asset; the component can use the smart-cropped renditions behind the scenes. 

3) Organization-wide custom renditions (less common)

• If you require very specific, reusable outputs (say fixed 3:2 cards, AVIF/WebP variants, or watermarked thumbnails), create Processing Profiles so assets generate those renditions automatically on upload. Your components can reference them, but prefer #1 unless you really need fixed, named renditions. 

Authoring flow (what your authors do)

1. Drop the Image core component.

2. Pick one DAM asset.

3. (Optional) If Dynamic Media is enabled, choose a Smart Crop preset; otherwise do nothing—the policy drives responsive output.

Best-practice tips

• Avoid manual device buckets (“mobile.png, tablet.png, desktop.png”). Width-based srcset is simpler, lighter, and browser-native. 

• Keep your width list short and purposeful (5–7 steps usually cover phones → large desktop). Oversized lists bloat HTML with little benefit. 

• Use lazy loading in the policy; it’s supported OOTB by the Core Image component.

• If you must support radically different art direction, prefer Smart Crop over uploading multiple assets; it’s designed for that use case.

References: https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/i...

https://www.aemcomponents.dev/content/core-components-examples/library/core-content/image.html

https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/images/smar...

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/assets/administer/processin...

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/i...

[AmitVishwakarma]

Hi @tinsel26 ,

You don’t need to upload many versions of the same image for different screen sizes in AEM. Instead, you can use Asset Renditions to make your images fit well on all devices.

How It Works
1. Responsive Images (One Image, Many Sizes)
Usually, you pick one image. AEM automatically creates different sizes (like small, medium, large) so it looks good on phones, tablets, and desktops. This saves time and storage.

2. Dynamic Media with Smart Crop
If you want the image to look different on different devices (like focusing on a different area of the photo), Dynamic Media lets you set up "smart crops." This means the image changes how it is shown depending on the screen size.

3. Custom Renditions for Special Needs
For fixed styles like watermarked images or specific size cards, you can create custom rules. AEM will make these versions automatically when you upload the image.

How Authors Work with Images

• Just drag the Image component into your page
• Pick one image from your asset library
• If Dynamic Media is set up, choose a crop style if needed
• Save, and AEM handles the rest by showing the right image for the right device.

Best Practices:

• Use only a few image widths (like 320, 640, 960, etc.) to keep things simple.
• Turn on lazy loading so images only load when needed.
• Use alternative text for accessibility by filling metadata in your images.
• For vector images (SVG), use them carefully because they don’t change size automatically but are great for logos and icons.

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/i...

https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/dm-with-aem...

[tinsel26]

Thanks for the detailed Insights @AmitVishwakarma  and @SantoshSai