---
title: "Dynamic Media Handling Guideline V2"
path: https://www.eonshowroom.eon.com/en/aem-basics/Dynamic-Media-Handling-Guideline-V2.html
lastModified: 2026-06-09T06:29:03.797Z
---
# Dynamic Media Handling Guideline V2
# Configuration Examples for Images served via Dynamic Media
See how different configurations impact your page. This guide showcases best practices for **WebP transparency**, sharpening for text-heavy images, and finding the "sweet spot" for image quality. For fundamental rules, please refer to our **Showroom Image Handling Guideline** linked below.
### Configuration Examples
In this guide you will learn about:
- Background Transparency
- Image Quality
- Image Sharpening
### Overview
### Headline editing in a nutshell
Main configuration options of the Headline component
- Smart Crop Ratiost:Select predefined Ratios (e.g. 16:9, 1:1); AI automatically centers the focal point.
- Responsive Viewports: Use "Different Images" to set specific ratios for Tablet and Mobile
- Image Processing: Adjust Quality (Default 65) and Sharpening for high-impact Hero images.
- Transparency Mode: Add for extra context via tooltip or modal.
- Global References: Check "Is Referenced" before re-cropping to avoid unintended changes on other pages.
### In this guide
Quick jump to the most relevant how to topics
- Background Transparency
- Image Quality
- Image Sharpening
### Backgorund Tranparency
#### Card Teaser Examples
Depending on the customized **Image processing options** in your card teaser configuration, the output may vary.
##### Whe to Use What?
- When using the *default* **Desired Format: WebP**, any transparency in the original PNG is removed. As a result, the configured background image for the card teaser will not be visible.
- To keep background transparency and ensure your background image displays correctly, choose one of the following: WebP with Transparency *(recommended)* or PNG. Both options preserve transparency and ensure the card teaser background image appears as expected.
## Example with an transparent .PNG image as original and default settings
The background transparent .PNG file will be served differently when using the DM default settings only.
## Example with an transparent .PNG image as original and WebP with Transparency
The background transparent .PNG file will be served differently when using WebP with Transparency as desired format.
## Example with an transparent .PNG image as original and PNG
The background transparent .PNG file will be served differently when using PNG as desired format.
## Does, Don'ts and Grid Usage
### What you should do
- **Preserve Transparency:** Select **"WebP with Transparency"** or **"PNG"** if your image (like a product cut-out) has a transparent background.
- **Sharpen for Detail:** Use **"Normal"** or **"High" Sharpening** for images with **Text**, **Maps**, or fine technical patterns.
- **Stick to the Defaults for Speed:** For 90% of your content, you don't need to change anything here. Our global **Default Quality** of **75%** and the automated **WebP Format** delivery ensure your page passes **Core Web Vitals** (Google's speed test) with flying colors.
- **Check Viewports:** Always verify the **Mobile Ratio** in the dialog to ensure the **AI** hasn't cut off your subject.
### What you shouldn't do
- **Don't ignore Formats:** Avoid "Default" for transparent images; it will remove the transparency and hide your background color.
- **Don't upload WebP to the DAM:** Upload **JPEG** or **PNG** instead so the **AI Smart Crops** can process the file correctly.
- **Don't skip Smart Crops:** Use original files only if required by **Licensing Policies**; they significantly slow down page delivery.
- **Don't re-crop Shared Assets:** Check the **"Is Referenced"** status before editing to avoid changing the image on other live pages.
### Image Quality
#### Balance image delivery and image quality
In order to reduce the image delivery via smaller files you may reduce the **Image Quality** as a customized**Image processing** option.
For large teasers a higher quality with up to 90% as maximum is recommented.
### Image Sharpening
#### Images with Text e.g. maps
If the image includes fine details or additional text elements it's recommendet to use customized**Image processing** options in your image configuration for the **Image Sharpening** parameter
## Example without Image Sharpening
## Example with Normal Image Sharpening
## Example with High Image Sharpening
### Attention
#### When Not to Use Dynamic Media Smart Crops
There might be rare examples when cropped images are not allowed e.g. due to image licensing policies. In this case you may adjust the DAM folder options to avoid a DM handling and configure the original image for use.
**Key Rule:** In any further case the use of Smart Crops and renditions shall be recommendet in order to speed up the image delivery.