aem-core-wcm-components icon indicating copy to clipboard operation
aem-core-wcm-components copied to clipboard

Transparent backgrounds on PNG images lost in dynamic media URLs

Open HitmanInWis opened this issue 5 months ago • 4 comments

When a user selects a PNG image with a transparent background via the standard Image component, the dynamic media image URL rendered transforms the transparent background to white instead. This creates an undesired white block around the image when used on a colored background.

The issue is that by default Scene7 DM renders PNGs with white background, and you have to pass a fmt=png-alpha argument to DM in order to preserve the transparent background.

Yes, an author can technically add fmt=png-alpha to the provided "Image Modifiers" field, but preserving the transparent background should really be the default, especially since using the image in lower environments potetnially w/o Dynamic Media and thus using the image directly from the AEM DAM will preserve the transparency.

HitmanInWis avatar Jul 15 '25 22:07 HitmanInWis

In practice making all PNGs as png-alpha greatly increases file sizes served from Dynamic Media, which can incur a very large performance hit for larger images. So maybe setting that as a default is not a great idea. But is there a better solution for the overall problem of preserving PNG transparency in Dynamic Media that isnt so costly (or only applies when an image has transparency)?

HitmanInWis avatar Aug 08 '25 14:08 HitmanInWis

Proposed Solution: Conditional PNG Transparency Detection

Rather than applying fmt=png-alpha to all PNGs (which would cause significant performance issues), we can automatically detect which PNGs actually have transparency using existing DAM metadata.

Key Insight: dam:Bitsperpixel metadata reliably indicates PNG transparency:

  • 32 bits = PNG with alpha channel (transparent) → Add fmt=png-alpha
  • 24 bits = RGB PNG (opaque) → No format modifier needed
  • 8 bits = Indexed PNG (opaque) → No format modifier needed

Implementation: Modify the Dynamic Media URL building logic in ImageImpl.java to automatically prepend fmt=png-alpha only when dam:Bitsperpixel = 32 for PNG assets.

Benefits:

  • ✅ Preserves transparency automatically for transparent PNGs
  • ✅ Maintains optimal performance for non-transparent PNGs
  • ✅ Zero breaking changes - existing manual configurations still work
  • ✅ Can be policy-controlled via autoPreservePngTransparency setting

This approach solves the transparency issue while completely avoiding the performance penalty since fmt=png-alpha is only applied when transparency actually exists.

khanmaroof avatar Aug 22 '25 19:08 khanmaroof

nice, love the approach assuming it works!

HitmanInWis avatar Aug 22 '25 19:08 HitmanInWis

@HitmanInWis Here is the PR https://github.com/adobe/aem-core-wcm-components/pull/2978.

khanmaroof avatar Aug 30 '25 23:08 khanmaroof