AEM Dynamic Media : la transparence PNG s’affiche en arrière-plan blanc

Cet article décrit comment résoudre les problèmes en raison desquels les images PNG avec arrière-plans transparents s’affichent avec un arrière-plan blanc au lieu de la transparence dans Adobe Experience Manager Dynamic Media.

Description description

Environnement

Adobe Experience Manager (AEM) Dynamic Media (toutes les versions)

Symptômes

  • Les images PNG avec arrière-plans transparents sont chargées dans la gestion des ressources numériques et apparaissent transparentes dans les aperçus des ressources.
  • Lorsque ces images sont utilisées sur des pages web ou accessibles via des URL de diffusion directe, la transparence est remplacée par un arrière-plan blanc.
  • L’utilisation du paramètre fmt=png-alpha dans l’URL de diffusion ne résout pas le problème dans certains cas.
  • Aucun message d’erreur ne s’affiche ; le problème concerne le rendu des images.

Cause

Par défaut, Dynamic Media renvoie les images avec un arrière-plan opaque, sauf si la transparence est explicitement demandée à l’aide de fmt=png-alpha. Si ce paramètre est manquant ou n’est pas correctement configuré, l’arrière-plan s’affiche en blanc.

Résolution resolution

Suivez les étapes ci-dessous pour résoudre le problème :

  1. Vérifiez que l’URL de diffusion d’images inclut le paramètre fmt=png-alpha pour demander explicitement un fichier PNG avec transparence alpha.
  2. Si vous utilisez un paramètre d’image prédéfini, vérifiez que ce paramètre est configuré pour générer un fichier PNG avec transparence alpha. Mettez à jour le paramètre prédéfini, si nécessaire, pour inclure des fmt=png-alpha.
  3. Après la mise à jour des URL ou des préréglages, effacez le cache du navigateur et tout cache du réseau CDN pour vous assurer que la dernière image est diffusée.
  4. Incorporez l’image dans une page HTML de base pour vérifier que la transparence s’affiche correctement en dehors de l’interface utilisateur d’AEM. Si la transparence s’affiche correctement ici, le problème peut être lié aux paramètres CSS ou d’arrière-plan de la page.
  5. Vérifiez les paramètres du serveur d’images. Par défaut, si la transparence n’est pas explicitement demandée, ImageServer renvoie les images avec une couleur d’arrière-plan opaque (la valeur par défaut est le blanc). Mettez à jour la requête ou le paramètre prédéfini pour vous assurer que la transparence est toujours demandée pour les ressources qui le nécessitent.

Après avoir suivi ces étapes, vérifiez que la transparence PNG s’affiche correctement sur vos pages web.

recommendation-more-help
experience-cloud-kcs-help-kbarticles