Sharper, Smaller, Smarter: Optimizing Image Delivery with AEM Dynamic Media

[#1]

I’m part of the AEM Dynamic Media team. We collaborate with customers and partners to promote the adoption of Dynamic Media and share the best practices. Occasionally, we notice customer concerns regarding blurry or dull images delivered through Dynamic Media. Upon investigating these cases, I’ve identified three common reasons that can be effectively resolved by applying a few straightforward best practices. In this article, I’ll outline these practices and demonstrate how Dynamic Media can transform a high-resolution 26 MB TIFF file into a sharp, vibrant 35.6 KB AVIF image.

Three Reasons Behind Blurry Images

Ingesting low quality images

We’ve observed that customers often use JPEG files as input for Dynamic Media. However, since JPEG is a lossy compression format, image details are often lost early in the workflow—before the files are even ingested into Dynamic Media. As a result, these images may already exhibit issues such as banding or compression artifacts.

Overlooking Image Sharpening

When you host an image on your website, it often gets resized, leading to downsampling and a noticeable drop in image quality. To counteract this degradation, Dynamic Media provides three sharpening modifiers: Simple Sharpening, Resample Mode, and Unsharp Mask. While these are commonly included in image presets, users frequently forget to apply the presets when generating Dynamic Media URLs—resulting in unsharpened, lower-quality images.

Neglecting Image Presets

You may upload a high-quality image and carefully configure sharpening parameters. However, if these settings aren’t applied correctly, the effort is wasted. Often, users define optimal sharpening and format settings within image presets but fail to include those presets in the final Dynamic Media URLs—leading to subpar image delivery.

Getting the best out of AEM Dynamic Media

AEM Dynamic Media delivers stunningly sharp, vibrant images—at remarkably small file sizes—helping boost your website’s Core Web Vitals.

Let’s look at a real-world example. I uploaded a high-resolution TIFF image into Dynamic Media—measuring 3500 x 2636 pixels and weighing in at 26 MB. TIFF, being a lossless format, preserves every detail without introducing compression artifacts or banding. By starting with such a high-quality source, I ensure exceptional clarity even at high zoom levels—ideal for use cases like product zoom on retail sites. Below is a screenshot of the image as seen in AEM Assets.

Screenshot of source image(26 MB TIFF) in AEM Assets

Let’s walk through how AEM Dynamic Media optimizes image delivery and review output quality and final image delivery size at each stage. By default, if no format modifier (-fmt) is specified in the URL, Dynamic Media delivers the image as a JPEG. Below is a URL for example:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1

This image, originally a 26 MB TIFF at 3500 x 2636 pixels, is now just 95 KB. You can verify this by opening the above URL in a browser, navigating to Developer Tools > Network, selecting the image, and checking the response headers:

content-length: 95 KB
content-type: image/jpeg

Thanks to the high-quality source, the image retains excellent visual fidelity even after compression.

Resizing and Sharpening

Now, let’s simulate how the image might be repurposed on a website—for example, resized to a thumbnail:

Resized Image (480px wide) (17.3 KB):

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?wid=480

content-length: 17.3 KB
content-type: image/jpeg

Notice the slight blur introduced due to downsampling. To enhance clarity, we can apply a basic sharpening effect and increase JPEG quality:

Sharpened + Higher Quality JPEG (20.3 KB):

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?wid=480&op_sharpen=1&qlt=85

content-length: 20.3 KB
content-type: image/jpeg

For more refined control, consider using the Unsharp Mask modifier to fine-tune sharpening- please see this guide for more information.

Switching to Dynamic Media Smart Imaging for Maximum Efficiency

Let’s now invoke Smart Imaging and instruct Dynamic Media to deliver a Next Generation Web Optimized format. I used “bfc=on” modifier to invoke Smart imaging to demonstrate the effect.  For this image, Dynamic Media delivers an AVIF:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?wid=480&op_sharpen=1&qlt=85...

Sharpened AVIF:(13.5 KB)

content-length: 13.5 KB
content-type: image/avif

Despite the smaller size, there’s no noticeable loss in visual quality. Learn more about Smart Imaging here. Our customers across industries are loving Smart Imaging: in last twelve months, collectively, they saved 116 Million GB of image bandwidth.

Transforming via PNG, Delivering as AVIF

Even if we specify PNG as the format, Dynamic Media can still deliver AVIF when bfc=on is used. It first transforms the 26 MB TIFF to a lossless PNG and then let Smart Imaging deliver the best format, which is still AVIF for this image:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?wid=480&op_sharpen=1&fmt=pn...

PNG Transformed to AVIF (14.7 KB):

content-length: 14.7 KB
content-type: image/avif

Since PNG is a lossless format, you don’t need to worry about the qlt modifier as you would with JPEG and PNG may often give better quality output.

Delivering the Full-Size image as AVIF

Finally, here’s the image delivered in AVIF format without resizing:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?bfc=on

Full-Size AVIF (35.6 KB! (down from 26 MB))

content-length: 35.6 KB
content-type: image/avif

Optimizing Image Quality and Performance with AEM Dynamic Media: A 3-Step Best Practice Guide

To ensure your images are both visually stunning and performance-optimized, follow this three-step process:

Source Right: Start with High-Quality, Lossless Source Images

Begin by uploading high-resolution images in lossless formats such as TIFF, PNG, or PSD. Ensure the dimensions of your source images match the largest size they’ll be displayed at—for example, the estimated size of image in a zoomable product viewer on a shopping cart page.

Process for Quality: Plan, Create and Apply Image Presets for Each Use Case

Think of all the image categories your website will support such as—thumbnails, product landing page and product detail pages, define appropriate dimensions, format & image sharpening modifiers for each and bundle those modifiers inside image presets dedicated for each category.

To maintain clarity during resizing, experiment with Dynamic Media’s sharpening modifiers:

• op_sharpen
• op_usm
• resmode

 Helpful Resources:

• Best Practices for Image Sharpening

If you're using -fmt=JPEG, be sure to review Adobe’s recommendations for optimizing JPEG quality.

Here are a few examples of image presets and sharpening:

PresetThumbnail

Aggressive sharpening given the small size:

resmode=bisharp&printres=72&fmt=png,rgb&wid=180&op_usm=1.2,0.5,0,0&layer=COMP 

Sample image URL:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?$PresetThumbnail$&bfc=on

You can use this modifier “req=resolve” to look inside a preset. This will expand the preset and show the modifiers inside.

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?$PresetThumbnail$&bfc=on&re...

PresetPLP

Moderate sharpening:

resmode=bisharp&printres=72&fmt=png,rgb&wid=480&op_usm=0.8,0.5,5,0&bfc=on&layer=COMP 

Sample image URL:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?$PresetPLP$&bfc=on

PresetPDP

Minimal sharpening

resmode=bisharp&printres=72&fmt=png,rgb&wid=960&op_usm=0.5,0.6,10,0&bfc=on&layer=COMP 

Sample image URL:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?$PresetPDP$&bfc=on

Important

If a URL does not include a preset, image quality may suffer due to lack of sharpening or resizing logic:

No Preset Applied – Prone to Blur:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?wid=320

Incorrect Preset Usage – Not Applied:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1

OR

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?wid=180&PresetThumbnail

Intended URL:

https://s7g2.scene7.com/is/image/genaibeta/dynamic-media-image-quality-1?wid=180&$PresetThumbnail$

Further Reading: Fundamentals of creating image presets to render assets

Before going live, always audit your Dynamic Media URLs to ensure the correct presets are applied.

Deliver Smart: Enable Smart Imaging for Format Optimization

Activate Smart Imaging in Dynamic Media to automatically deliver the most efficient format (e.g., WebP or AVIF) based on the user’s browser capabilities. Our customers, who enable Smart Imaging, do not get flagged in Google’s Page speed tests for these checks: "Serve images in next-gen formats" & "Properly size images".

In the examples above, the parameter bfc=on was used to invoke Smart Imaging on demand. You need not necessarily follow this approach. For consistency and scalability, consider enabling Smart Imaging at the domain level. If you opt to enable with bfc=on, please consider encapsulating bfc=on inside image presets which ensures better standardization and consistency.

Final Thoughts

By following these best practices of AEM Dynamic Media, you can transform large, high-resolution source files into lightweight, high-quality images—delivered in the most efficient format. This not only enhances visual appeal but also improves site performance and Core Web Vitals.

[#2]

@RahulAdobe 

This is a fantastic deep dive, Rahul. Really appreciate how you broke down the “why” behind blurry images and then tied it to practical best practices with Dynamic Media. The real-world TIFF → AVIF example was especially eye-opening in showing how dramatically file sizes can shrink without compromising clarity.

One thing I was curious about: when we define sharpening levels within presets (say for thumbnails vs. PDP images), is there any guidance or rule of thumb on how aggressive we should be depending on the image dimensions? For example, do smaller images (like thumbnails) always benefit from stronger sharpening, or are there scenarios where this can backfire and create artifacts?

Would love to hear your perspective on that, thanks again for sharing such a comprehensive write-up!

[#3]

Thanks @kautuk_sahni for reviewing the blog. Finding the best USM setting is more an art than science. For each category(output size) of image, we need to experiment with various USM parameters and identify the best setting that works. The examples given in the blog may be used as starting point.