AEM Dynamic Media: Transparent PNG images display with white background
This article explains how to resolve issues where transparent PNG images in Adobe Experience Manager Dynamic Media display with a white background instead of preserving transparency.
Description description
Environment
Adobe Experience Manager (AEM) Dynamic Media (all versions)
Symptoms
When uploading transparent PNG images to Dynamic Media and viewing them in the AEM Assets UI or on web pages, the images appear with a white background instead of showing transparency. This issue occurs when accessing the image via a Scene7 delivery URL with the fmt=png-alpha parameter. In some browsers or editors, transparency appears as a light gray tint or as a white background, depending on how the image is rendered. No error messages are shown, but the expected transparent background isn’t visible in the output image.
Cause
Browsers and some editors display transparent images with a white or gray background by default. The fmt=png-alpha parameter in the Scene7 delivery URL is required to preserve transparency in the output image.
Resolution resolution
Follow the steps below to resolve the issue:
- Verify that the image delivery URL includes the
fmt=png-alphaparameter to preserve transparency. - Create a basic HTML file, and embed the image using the delivery URL to confirm that transparency is present.
- Open the HTML file in a browser, and check if the image background is transparent.
- Some browsers display transparent images with a default white or gray background. To verify true transparency, use a browser extension that checks for transparent backgrounds.
- When editing images in AEM or other tools, ensure the editor supports transparency and doesn’t flatten the image onto a white background.
- Verify that the original PNG file has transparency before uploading to AEM.