AEM Dynamic Media Using image presets, Smart Imaging and web-optimized image delivery so that the main image appears early
On 73 percent of mobile pages, the largest visible element is an image (HTTP Archive Web Almanac 2024). Image delivery therefore decides Largest Contentful Paint on most pages. Adobe Experience Manager offers Dynamic Media, the Core Components image component and, in AEM as a Cloud Service, web-optimized image delivery. Each of these delivers suitable formats and sizes, and each can be built in so that the main image still arrives late.
In the AEM Core Web Vitals Benchmark 2026, server response time is in the good range for 19.7 percent of AEM websites whose main content loads too slowly, so the cause lies in the frontend: images, fonts or scripts. For the others, the work starts with the Dispatcher cache, because a late response delays every image as well.
1.9 percent of the AEM websites examined show the typical image pattern on smartphones: the first content appears quickly, while the main content misses the threshold. Between the two, they lose 1,643 milliseconds at the median.
Dynamic Media and image presets: one master file, variants per URL
Dynamic Media, formerly Scene7, stores one master file and generates variants at delivery time. Width, crop, sharpening and quality are commands in the image URL. Recurring combinations are bundled as image presets, which in Dynamic Media Scene7 mode need no separate publishing (Adobe: Managing image presets). Three points matter for performance:
- Preset widths follow the layout breakpoints, not the size of the master file.
- Only one dimension is specified, so the aspect ratio is preserved.
- Quality is set deliberately. With Dynamic Media with OpenAPI, a maximum quality of 85 applies if none is given (Adobe).
Smart Imaging: format, pixel density and bandwidth per request
Smart Imaging picks the most efficient format the browser supports on every request, meaning AVIF or WebP. Without Smart Imaging, the requested format stays, usually JPEG. It requires the CDN bundled by Adobe (Adobe: Smart Imaging). Two further switches control size:
- Pixel density: with
dpr=on, Dynamic Media adapts resolution to high-density screens. The page has to determine the value in the browser. - Bandwidth: with
network=on, quality follows the actual connection. The default isoff; on poor connections, Smart Imaging turns off the pixel density adjustment.
A hard-coded format such as fmt=webp overrides the negotiation. Such URLs often come from older components and prevent AVIF even where the browser could handle it.
Core Components and web-optimized image delivery in AEM as a Cloud Service
The Core Components image component has supported Dynamic Media assets since version 2.13.0, with image presets, Smart Crop and image modifiers (Adobe: Image Component). Without Dynamic Media, AEM as a Cloud Service offers web-optimized image delivery: an option in the image component policy delivers WebP, about 25 percent smaller on average according to Adobe, while browsers without WebP receive JPEG or PNG (Adobe: Web-Optimized Image Delivery). The service only covers images under /content/dam, does not run in the local SDK and computes from a rendition no wider than 2,048 pixels.
| Option | Formats and sizes | Prerequisite | Limit |
|---|---|---|---|
| Dynamic Media with Smart Imaging | AVIF or WebP per browser, width per preset | Dynamic Media with Adobe CDN | hard-coded format overrides negotiation |
| Dynamic Media with OpenAPI | width and quality per parameter | AEM as a Cloud Service | advanced modifiers not yet available according to Adobe |
| Web-optimized image delivery | WebP, otherwise JPEG or PNG, widths from the policy | AEM as a Cloud Service, images in the DAM | base no wider than 2,048 pixels |
| Edge Delivery Services | sizes optimized automatically | Edge Delivery Services | LCP candidate is the first image on the page |
Common faults in AEM projects: lazy LCP image, missing priority and missing dimensions
Good formats help little if the browser requests the main image late. Five patterns recur:
- LCP image lazy-loaded: 16 percent of mobile pages lazy-load their LCP image (Web Almanac 2024). The image component offers the policy option Disable lazy loading; a separate policy for hero and lead images makes sense.
- Missing priority:
fetchpriority="high"on the LCP image improved LCP from 2.6 to 1.9 seconds in a web.dev example (web.dev). The attribute belongs on exactly one image. - Missing dimensions: without width and height in the markup, the layout jumps during loading and raises Cumulative Layout Shift. Version 3 of the image component sets both.
- Oversized variants: a preset with a fixed width or a missing
srcsetsends desktop-sized images to smartphones. - Image via JavaScript: if a script or viewer sets the image URL only after loading, the browser learns about the image late. If Dynamic Media delivers from a separate host, connection setup adds to that.
Edge Delivery Services: the first image in the eager phase
With AEM Edge Delivery Services, the first loading phase loads the first section with priority for its first image as LCP candidate. If a hero has separate images for mobile and desktop, the unneeded one should be removed from the DOM (aem.live). According to Adobe, the platform optimizes image sizes automatically (aem.live FAQ).
Acceptance criteria for images on AEM: LCP image, format and dimensions
- The LCP element of each page type is named; if it is an image, it loads without lazy loading and with
fetchpriority="high". - The content type of delivered images shows AVIF or WebP wherever the browser supports it.
- Every image carries width and height; the delivered width matches the displayed width.
- Real User Monitoring reports load delay and load duration of the LCP image per page type.
How the CDN shortens load duration and which other causes affect AEM platforms is covered on the pages on CDNs and on Adobe Experience Manager Performance.
Book a free performance analysis
30 minutes via video call. You see whether your main image is held back by format, size or load start.
Frequently asked questions about AEM Dynamic Media
Does Dynamic Media deliver AVIF and WebP automatically?
With Smart Imaging, yes: Dynamic Media picks the most efficient format the browser supports on every request. It requires the CDN bundled by Adobe. A hard-coded format in the image URL, such as fmt=webp, overrides this negotiation and should therefore be checked.
Should the LCP image be loaded with fetchpriority?
Yes, but only that one image. With fetchpriority="high", the browser requests it ahead of other images. If many images get high priority, the attribute loses its effect. Lazy loading and high priority on the same image contradict each other.
Why is an image too large despite Dynamic Media?
Usually because of an image preset with a fixed width, a missing srcset or a pixel density adjustment without an upper limit. Dynamic Media delivers what the URL asks for. Whether the delivered width matches the displayed width shows in a browser comparison per page type and device.
Does Dynamic Media help with slow server response time?
No. Dynamic Media shortens the image load duration; the response time of the HTML stays unaffected. If it exceeds 800 milliseconds, the work starts with the Dispatcher cache, because every image is only requested after the document.