Dynamic Media - PNG image with transparent background - Served with white

[pradeepmoolemane]

Hello Team,

We are using dynamic media in our project. and we are exploring DM. I am facing one issue that is we have uploaded image with transparent background on AEM DAM. But when it served from DM, getting white background. 

I tried adding manually fmt=png-alpha to remove white background. But not sure how to get this dynamically append as query param for all png images. OR is there a better way to handle white background ?. Also not sure whether its an issue in the DM product where it converts transparent background image to white background image?

[arunpatidar]

Hi,

Is this in Safari or Chrome browser?

I have seen this issue with monochromatic image only in Safari.DM returns 403 instead of actual image.

[pradeepmoolemane]

Hi @arunpatidar this is happening all browsers, tested on chrome, safari, firefox.

[arunpatidar]

What response do you get from DM? Error or white image?

[pradeepmoolemane]

I am getting the image but with the white background 

[arunpatidar · Accepted solution]

Probably then you need to add this param along with bfc and fmt

fmt=png-alpha&bfc=on

You can update the existing component or use sling rewriter to get the images and update the url while generating url

e.g. https://github.com/arunpatidar02/aem63app-repo/blob/master/java/CustomLinkChecker.java  

[Bimmi_Soi]

Hi @pradeepmoolemane ,

Please go through below URL

https://blogs.perficient.com/2019/03/07/aem-6-4-challenges-with-dynamic-media-scene7-integration/

You can add format.

Hope this helps!!

Thanks

[Fanindra_Surat]

Hi @pradeepmoolemane - Good Job, you have rightly identified the solution to rendering the transparent images by using fmt=png-alpha. Now, there are multiple solutions to apply this formatting for all the pngs but the simplest could be to have a utility that detects the DAM image extension and renders a corresponding DM URL with the fmt option suffixed and use it in all the components leveraging DM images.

Let me know, if you have any other questions!

[pradeepmoolemane]

Resolved by extending image preset selection option to teaser component and preset setup configured with png-alpha.