AEM Dynamic Media: PNG transparency displays as white background
This article describes how to address issues where PNG images with transparent backgrounds appear with a white background instead of transparency in Adobe Experience Manager Dynamic Media.
Description description
Environment
Adobe Experience Manager (AEM) Dynamic Media (all versions)
Symptoms
- PNG images with transparent backgrounds are uploaded to the DAM and appear transparent in asset previews.
- When these images are used on web pages or accessed via direct delivery URLs, the transparency is replaced with a white background.
- Using the
fmt=png-alphaparameter in the delivery URL doesn’t resolve the issue in some cases. - No error messages are shown; the issue is with image rendering.
Cause
By default, Dynamic Media returns images with an opaque background unless transparency is explicitly requested using fmt=png-alpha. If this parameter is missing or not properly configured, the background will appear white.
Resolution resolution
Follow the steps below to resolve the issue:
- Verify that the image delivery URL includes the
fmt=png-alphaparameter to explicitly request PNG with alpha transparency. - If using an Image Preset, confirm that the preset is configured to output PNG with alpha transparency. Update the preset, if necessary, to include
fmt=png-alpha. - After updating URLs or presets, clear browser cache and any CDN cache to ensure the latest image is served.
- Embed the image in a basic HTML page to confirm that transparency is rendered correctly outside of the AEM UI. If transparency displays correctly here, the issue may be with the page’s CSS or background settings.
- Review ImageServer settings. By default, if transparency isn’t explicitly requested, the ImageServer returns images with an opaque background color (The default is white.). Update the request or preset to ensure transparency is always requested for assets that require it.
After completing these steps, verify that PNG transparency displays correctly on your web pages.
recommendation-more-help
experience-cloud-kcs-help-kbarticles