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.
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)
Drop the Image core component.
Pick one DAM asset.
(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/image
https://www.aemcomponents.dev/content/core-components-examples/library/core-content/image.html
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.