Dynamic Media PNG assets show gray overlay when image preset is applied
This article explains why PNG assets rendered through a Dynamic Media image preset display a gray overlay or background, and provides steps to resolve the transparency issue.
Description description
Environment
- Adobe Experience Manager Dynamic Media / Scene7 (all versions)
- Image preset with output format set to JPEG
- Additional URL modifier:
fmt=webp-alpha
Symptoms
- When applying an image preset to PNG assets, the resulting images display a gray overlay or background, instead of preserving the original transparency.
- This issue occurs only with PNG source assets; JPEG source assets are rendered correctly.
Cause
When a PNG asset with transparency is processed through a Dynamic Media image preset configured to output JPEG, the transparency is lost and replaced with a solid color (such as gray or white), since JPEG doesn’t support transparency. Using the correct output format (PNG or WebP with alpha) is necessary to preserve transparency.
Resolution resolution
Follow the steps below to resolve the issue:
- Check if the image preset output format is set to JPEG. If so, note that JPEG doesn’t support transparency and will render transparent areas as a solid color.
- If using the
fmt=webp-alphaURL modifier, ensure the preset or URL isn’t forcing a conversion to JPEG before applying the WebP format, as this will flatten transparency. - Modify the image preset to output as PNG instead of JPEG, and test if transparency is preserved. For example, change the output format in the preset settings, or use
fmt=png-alphain the URL. - If the issue persists, inspect the front-end code for any CSS or styling that could be applying a background color to the image container or thumbnails.
- Load the PNG asset directly in the browser and compare it to the version rendered with the preset to confirm if the overlay is introduced by the preset or by application styling.
recommendation-more-help
experience-cloud-kcs-help-kbarticles