Dynamic Media PNG transparency lost or replaced with a white or black background due to output format configuration

Transparent PNG images delivered through Adobe Dynamic Media can appear with a white or black background instead of preserving transparency. This happens because Dynamic Media defaults to non-alpha output formats such as JPEG, AVIF, or WebP without alpha, and Smart Imaging can auto-convert assets to those formats unless an alpha-capable format is explicitly requested. To fix the issue, request an alpha-compatible format such as fmt=png-alpha, fmt=webp-alpha, or fmt=avif-alpha in the delivery URL or image preset, and confirm the source asset actually contains an alpha channel.

Description description

Environment

  • Adobe Experience Manager as a Cloud Service
  • AEM Managed Services
  • AEM Dynamic Media

Issue/Symptoms

  • A transparent PNG delivered through Dynamic Media shows a white background instead of transparency.
  • A transparent PNG rendered through Dynamic Media appears with a black background.
  • The Dynamic Media URL automatically converts the PNG to AVIF without alpha.
  • Image preset delivery produces whitespace or a background fill where the PNG should be transparent.

Root cause

Dynamic Media defaults to non-transparent output formats (JPEG, AVIF, or WebP without alpha) unless transparency is explicitly requested. JPEG does not support transparency, and AVIF and WebP require alpha-specific variants. If fmt=png-alpha, fmt=webp-alpha, or fmt=avif-alpha is not included in the URL or preset configuration, Dynamic Media replaces transparent areas with a white or black background. Smart Imaging can additionally auto-convert formats unless alpha is explicitly enforced.

Steps to reproduce

  1. Open the Dynamic Media delivery URL of the affected PNG. The image renders with a white or black background even though the source PNG is transparent.
  2. Download the source PNG from the AEM Assets UI and inspect it in an image editor. Transparent areas appear as a checkerboard pattern.
  3. If the source PNG has no alpha channel, Dynamic Media cannot generate transparency, and the asset itself must be corrected.

Resolution resolution

To fix the issue:

  1. Confirm whether the issue occurs on a direct Dynamic Media URL or through an image preset.
  2. Test manual delivery by appending an alpha-capable format to the delivery URL: ?fmt=png-alpha, ?fmt=webp-alpha, or ?fmt=avif-alpha. Reload the URL; the background should disappear and transparency should appear.
  3. Validate that the source PNG contains an alpha channel by downloading the asset from AEM Assets and inspecting it in an image editor. If transparency is missing, upload a correct PNG with alpha, because Dynamic Media cannot generate alpha from a non-transparent source.
  4. Update or create an image preset to enforce alpha-compatible delivery. Go to Tools > Assets > Image Presets, edit the preset used for PNG delivery, and set it to use png-alpha or add fmt=png-alpha to the preset request. Re-test delivery with your preset to confirm transparency is preserved.
  5. Apply the updated alpha-enabled preset to components or content policies. In the AEM page editor, select the Image component and add fmt=png-alpha or fmt=webp-alpha in the Image Modifier field. Publish the page and reload the published URL.
  6. If Smart Imaging is enabled, test using fmt=png-alpha&bfc=off so that Smart Imaging respects the alpha-compatible format. Reload the URL; the white or black background should be gone.
  7. Validate the fix: reload the Dynamic Media delivery URL and confirm transparent regions show the underlying page background. When using presets, verify multiple assets, and test in both staging and production to confirm the CDN cache is updated.
recommendation-more-help
experience-cloud-kcs-help-kbarticles