Level 2

Solved

Looking for transparent PNG support in AEM

5 replies
1154 views
Translate All

Why are my uploaded transparent PNG assets being published to the CDN with a white background?

Community Advisor

I know that such problem happens when you use Dynamic Media. Any transparent images (PNG) become not transparent in WEBP or JPEG format.

There are 2 options how to get image with transparent background:

1) If you use Image component: configure "Image Modifiers" in the Image component: fmt=png-alpha&bfc=on

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/image#configure-dialog

2) If you use asset URL: add fmt=png-alpha&bfc=on request parameters

To make it global, I would suggest to configure Image Preset.

- Leave Height and Width empty to enabled responsiveness feature

- Format: PNG with Alpha

Details: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/dynamicmedia/managing-image-presets#creating-image-presets

Best regards,

Kostiantyn Diachenko.

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

A

Anil_Chennapragada

Level 4

hi @sverdoor ,

Can you please check the below link if it helps

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamic-media-png-image-with-transparent-background-served-with/m-p/454339

Thanks,

Anil

Translate

S

SverdoorAuthor

Level 2

Does this function need DEV access? I'm not a developer. Also note that we're using AEM Assets Cloud version. I'm sort of confused as to why this is not an out of the box feature. If a PNG includes transparency, it should just be displayed that way in the CDN.

Translate

konstantyn_diachenko

Accepted solution

Community Advisor

Hi @sverdoor ,

I know that such problem happens when you use Dynamic Media. Any transparent images (PNG) become not transparent in WEBP or JPEG format.

There are 2 options how to get image with transparent background:

1) If you use Image component: configure "Image Modifiers" in the Image component: fmt=png-alpha&bfc=on

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/image#configure-dialog

2) If you use asset URL: add fmt=png-alpha&bfc=on request parameters

To make it global, I would suggest to configure Image Preset.

- Leave Height and Width empty to enabled responsiveness feature

- Format: PNG with Alpha

Details: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/dynamicmedia/managing-image-presets#creating-image-presets

Best regards,

Kostiantyn Diachenko.

Translate

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

BrianKasingli

Adobe Champion and Community Advisor

Can you please share an example of the asset URL, it might be a dynamic media problem, rather than the CDN itself.

Translate

kautuk_sahni

Adobe Employee

@sverdoor Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

Translate

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO