Distinguer une animation figée d’une transparence disparue
Votre GIF bouge sur l’ordinateur mais reste immobile dans une page WordPress. Ou une illustration détourée affiche désormais un rectangle blanc ou sombre autour du sujet. Le résultat recherché est de conserver la propriété utile du fichier : ses images successives pour l’animation, ou ses zones transparentes pour la composition.
Ces défauts peuvent apparaître après insertion, redimensionnement, modification ou optimisation. Commencez par comparer le fichier original, le fichier réellement reçu par le navigateur et le fond de la page. Une extension de nom correcte ne prouve pas que la variante contient encore l’animation ou la transparence attendue.
Le présent parcours suppose que le fichier se charge. Si la requête renvoie une erreur 404, rétablissez d’abord son adresse ou sa présence. Si WordPress refuse le type à l’envoi, examinez les formats autorisés. Une image bloquée et une image transformée en visuel statique demandent des diagnostics différents.
Gardez l’original intact sur votre ordinateur et travaillez sur un brouillon ou une copie de page. Évitez le remplacement global du média partagé dès le premier essai. Une même image peut apparaître dans plusieurs contenus ; la correction doit préserver leurs références et permettre de revenir au choix précédent.
Comparer trois versions avant de toucher aux réglages
Ouvrez le fichier original dans un navigateur ou un lecteur qui gère son animation et sa transparence. Pour un GIF, attendez assez longtemps pour observer sa séquence ; une seule lecture courte peut être terminée lorsque vous le regardez. Pour une illustration transparente, vérifiez-la sur un fond contrasté plutôt que sur un blanc qui masque les contours.
Dans WordPress, ouvrez Médias → Bibliothèque, retrouvez le média et consultez son URL de fichier. Ouvrez cette adresse séparément. Comparez le mouvement et les bords avec l’original conservé. Si cette version est déjà figée ou aplatie, le problème précède son affichage dans la page.
Sur la page qui présente le défaut, ouvrez les outils de développement puis Réseau et rechargez. Relevez l’URL effectivement demandée, le statut et le type de contenu de la réponse. Le navigateur peut choisir une variante via srcset ; le seul nom aperçu dans l’éditeur ne suffit pas. currentSrc indique la candidate sélectionnée, pas sa réussite de chargement.
Consignez ces trois résultats. Une source animée, un fichier de médiathèque animé et une variante publique statique orientent vers le choix de variante ou sa transformation. Un fichier qui conserve ses zones transparentes mais semble blanc uniquement sur la page oriente vers le fond d’affichage. Ce relevé évite de convertir plusieurs fois un fichier qui était déjà correct.
Tenir compte du parcours de traitement et de la version WordPress
Les versions et les méthodes d’envoi peuvent produire des résultats différents. WordPress 7.1 active un traitement dans le navigateur lorsque les conditions techniques le permettent, avec repli sur le serveur sinon. Dans ce parcours navigateur, les variantes animées peuvent conserver leur mouvement ; une limite de ressources peut néanmoins conduire à une version statique. Le cœur côté serveur ne fournit pas le même redimensionnement animé.
Il serait donc imprécis de promettre que toute miniature GIF reste animée, ou d’affirmer que toutes sont forcément immobiles. Comparez les fichiers effectivement produits pour votre média, surtout s’il a été ajouté avant une mise à jour. Une nouvelle capacité ne transforme pas automatiquement tous les anciens dérivés déjà stockés.
Le lieu du traitement n’est pas non plus une preuve de la cause. Une extension, un service de distribution d’images ou une copie mise en cache peut intervenir après l’envoi. Notez les versions et les outils en place, mais ne les désactivez pas tous pour essayer de retrouver le mouvement.
Pour un premier dépannage, choisissez une action limitée : sélectionner une version animée existante, employer le basculement vidéo natif lorsqu’il convient, ou remettre un fichier qui possède réellement sa transparence. Ces parcours demandent surtout les droits d’édition et d’ajout de médias. Les réglages techniques du traitement relèvent du responsable du site lorsqu’ils sont personnalisés.
Approche 1 : sélectionner une version du GIF qui reste animée
Ce parcours convient lorsque le fichier principal de la médiathèque conserve l’animation et qu’une variante affichée dans le contenu l’a perdue. Il demande le droit d’éditer la page. Notez la résolution et le média actuels avant de modifier le bloc.
Ouvrez la page ou l’article, sélectionnez le bloc Image qui contient le GIF, puis son panneau Réglages. Dans Résolution, choisissez Taille originale ou Full Size si cette option est proposée et correspond au fichier animé vérifié. Prévisualisez ensuite la page et contrôlez la nouvelle requête. Ce choix ne prouve pas à lui seul qu’un service intermédiaire n’a pas transformé le fichier.
Vous pouvez adapter la largeur d’affichage sans demander une nouvelle transformation du GIF. Laissez la hauteur suivre les proportions lorsqu’aucune contrainte particulière ne l’exige. Ne recadrez pas ou ne réenregistrez pas l’animation dans un outil dont vous n’avez pas vérifié la conservation des images successives.
Le résultat attendu est un mouvement visible dans la page et une URL qui fournit la version voulue. Contrôlez aussi une largeur plus étroite, car une autre candidate peut être choisie. Pour annuler, remettez le média et la résolution précédents. Si le bloc appartient à une galerie ou à un composant de thème, utilisez ses propres réglages de source ; ceux d’un bloc Image indépendant ne se transmettent pas automatiquement à cet emplacement.
Approche 2 : essayer le basculement vidéo natif pour un GIF opaque
Sur une installation récente qui a préparé une vidéo associée au GIF, un bloc Image indépendant peut proposer Display as video dans sa barre d’outils. Ce parcours concerne un GIF sans transparence. Il ne doit pas servir à aplatir volontairement une animation détourée sur un fond dont elle doit rester indépendante.
Sélectionnez le bloc et utilisez ce contrôle seulement s’il apparaît. Le basculement est volontaire : WordPress ne remplace pas automatiquement tous les GIF du contenu. Le résultat est un bloc vidéo adapté à cette animation. Le média reste associé à son GIF, avec les fichiers compagnons nécessaires ; leur présence ne justifie pas une suppression manuelle dans le dossier des médias.
Prévisualisez l’animation dans la page et sur téléphone. Vérifiez que la lecture et la composition correspondent au besoin, puis enregistrez si vous retenez ce rendu. Le contrôle Display as GIF du bloc résultant permet de revenir à la représentation GIF. Si ces commandes sont absentes, conservez l’autre parcours : leur disponibilité dépend du traitement et du navigateur utilisés.
Ce basculement ne s’applique pas de la même façon aux GIF dans Galerie, Média & texte ou Bannière. Ne convertissez pas un ensemble de blocs pour faire apparaître le bouton. Une animation dont la transparence est indispensable doit conserver un format et un parcours qui la préservent.
Approche 3 : remettre un fichier qui possède réellement sa transparence
La transparence dépend de données du fichier, souvent décrites comme un canal alpha. Un JPEG ordinaire ne les contient pas. Un PNG peut les conserver, mais un fichier PNG peut également avoir été exporté avec un fond opaque. Son extension seule ne permet donc pas de conclure.
Si l’original possède encore ses zones transparentes, préparez une copie distincte dans un format approprié en conservant cette propriété lors de l’export. Pour une illustration fixe, un PNG avec transparence constitue un choix simple de contrôle. Ouvrez le résultat sur deux fonds contrastés avant l’envoi. Renommer un fichier JPEG en PNG ne change pas son contenu et ne recrée pas ce qui a été aplati.
Dans Médias → Ajouter un fichier média, envoyez cette copie sous un nom reconnaissable. Dans le contenu, sélectionnez le bloc concerné puis Remplacer → Médiathèque et choisissez le nouveau média. Prévisualisez sans supprimer l’ancienne ressource. Si le défaut concerne l’image mise en avant, changez cette affectation dans les réglages de l’article plutôt qu’un bloc situé dans son corps.
Vérifiez les bords et le fond dans la page. Pour revenir en arrière, réaffectez le média précédent et ses réglages conservés. Si vous ne possédez plus de source transparente, retrouvez le document de création ou demandez un nouvel export à son auteur. Un réglage WordPress ne peut pas restituer automatiquement les zones perdues dans un fichier déjà aplati.
Tester le fond du conteneur sans modifier le fichier
Une image transparente laisse apparaître ce qui se trouve derrière elle. Un fond blanc visible ne prouve donc pas que le fichier a perdu sa transparence. Le navigateur, le bloc ou son conteneur peut lui fournir cette couleur. À l’inverse, un damier dessiné dans le fichier n’est pas une transparence, même s’il ressemble à l’aperçu d’un logiciel graphique.
Sur une copie de page, sélectionnez le Groupe qui contient l’image à l’aide de la vue en liste. S’il n’existe pas encore de conteneur de contrôle, ajoutez un bloc Groupe avec l’outil d’insertion puis placez-y le média témoin. Gardez cette manipulation dans le brouillon de diagnostic.
Dans les réglages de ce Groupe, cherchez la couleur d’arrière-plan, située dans les réglages de fond des interfaces récentes. Essayez une couleur sombre puis claire en conservant la valeur initiale. Si les zones autour du sujet suivent ces changements, le fichier laisse bien passer le fond à cet endroit.
Si le rectangle reste indépendant, comparez le fichier servi et le fond propre de l’image avec l’inspecteur. Une ombre ou un fond sur le bloc peut aussi participer au rendu. Retirez seulement le réglage confirmé responsable, puis vérifiez la page. Pour terminer l’essai, restaurez la couleur et la structure initiales ou abandonnez le brouillon de contrôle ; ne modifiez pas le fond de tout le site pour examiner une seule image.
Repérer une conversion ou une optimisation qui change le résultat
Si l’original et le fichier de médiathèque sont corrects mais que la réponse publique diffère, cherchez le composant qui produit cette variante. Il peut s’agir du service d’images déjà configuré, d’une optimisation ou d’un format de sortie personnalisé. Comparez la requête, le type reçu et les dimensions avant de choisir une action.
Un fichier WebP n’est pas nécessairement statique ou opaque : ce format peut aussi conserver l’animation et la transparence. Le nom du format ne suffit donc pas à désigner le responsable. Il faut vérifier si cette transformation précise a gardé les propriétés attendues. WordPress peut également recevoir une configuration de conversion ; cela ne signifie pas que toute installation transforme automatiquement tous les PNG en JPEG.
Sur une copie, utilisez uniquement le réglage d’exclusion ciblée documenté pour l’outil déjà en place, lorsqu’il permet de conserver ce média ou son format. Notez la valeur initiale et purgez seulement la variante concernée après avoir confirmé que la source reste disponible. Ne désactivez pas toute l’optimisation du site pour ce premier essai.
Si vous ne trouvez pas ce contrôle, transmettez au responsable de l’intégration les deux réponses comparées et le résultat recherché. Vous disposez alors d’un défaut localisé, au lieu d’une demande générale de désactivation. Pour annuler un essai, remettez le réglage et la distribution d’origine ; retirer une extension ne restaure pas forcément les fichiers qu’elle a déjà remplacés.
Valider le rendu dans les usages réels
Après correction, ouvrez la page depuis une session déconnectée lorsque le contenu est public. Comparez ordinateur et téléphone, ainsi qu’une autre page utilisant le même média. Vérifiez le fichier reçu à chaque endroit : une galerie, une carte et un bloc Image peuvent choisir des variantes différentes.
Pour l’animation, observez plusieurs étapes et pas seulement sa première image. Vérifiez que le mouvement utile et la composition restent présents. Si une conversion vidéo a été retenue, contrôlez ce bloc comme une vidéo dans la page ; un poster immobile avant la lecture n’établit pas à lui seul la perte de la séquence.
Pour la transparence, examinez les bords sur les fonds réellement prévus par le site. Les contours peuvent conserver un halo provenant d’un ancien fond dans le fichier. Remettre un canal transparent ne retire pas automatiquement cette couleur déjà présente sur les pixels du sujet. Retrouvez un export adapté si le défaut fait partie de l’image.
Conservez les médias précédents jusqu’à la fin du contrôle. Ne supprimez ensuite que les fichiers d’essai identifiés et inutilisés. Notez la correction retenue, son périmètre et le retour arrière : résolution de bloc, affectation d’un nouveau média, basculement GIF/vidéo ou réglage du service de transformation. Ces opérations n’ont pas les mêmes effets et ne s’annulent pas toutes par le même bouton.
Conserver un original exploitable et une version de secours
Gardez hors de WordPress le fichier source, son export animé ou transparent vérifié et la version finalement utilisée. Donnez-leur des noms qui distinguent leur fonction. Un poster statique peut être utile comme aperçu, mais il ne doit pas être confondu avec le fichier qui porte toute l’animation.
Si le mouvement transmet une explication indispensable, prévoyez aussi un texte ou des étapes fixes qui en restituent le sens. Une première image seule peut ne montrer ni l’action ni son résultat. Le texte alternatif du visuel et le texte voisin doivent rester cohérents avec la version effectivement affichée, surtout après un basculement entre image et vidéo.
Lors d’un prochain envoi, commencez par un brouillon représentatif et vérifiez l’URL obtenue avant de remplacer les médias de plusieurs pages. Notez le navigateur et le parcours employés si vous cherchez à comparer des traitements : une génération dans le navigateur et une reprise côté serveur ne sont pas forcément équivalentes. Ne multipliez pas les copies identiques dans la bibliothèque pour contourner un réglage qui n’a pas été identifié.
Sur une plateforme gérée ou un réseau multisite, l’éditeur peut ne pas disposer des options de transformation. Il peut néanmoins relever les trois fichiers comparés, corriger le bloc dans son périmètre et transmettre un cas précis au responsable. Demandez alors la conservation de l’animation ou de la transparence pour ce média, avec sa source intacte, plutôt qu’une modification générale de tous les formats du site.
Comparer le GIF d’origine à une miniature sur la même page
Sur une copie, choisissez un GIF dont le mouvement est facile à reconnaître. Un fichier de démonstration qui alterne trois aplats de couleur suffit. Ajoutez-le dans la médiathèque, puis insérez-le dans une page d’essai. Sélectionnez une petite résolution lorsqu’elle est proposée. Dans le navigateur, ouvrez l’inspecteur, sélectionnez l’élément image et lisez sa propriété currentSrc. Elle donne l’adresse réellement choisie par le navigateur, y compris lorsqu’un attribut srcset propose plusieurs tailles. Vous pouvez retrouver cette adresse dans l’onglet Réseau après rechargement.
Ouvrez l’URL obtenue dans un onglet séparé et comparez-la au fichier de la médiathèque. Lors de la recette avec le moteur serveur GD, le GIF d’origine mesurait 320 × 240 et contenait trois images successives. Le dérivé 128 × 96 servi sur la page n’en contenait qu’une. Les deux réponses étaient des GIF. Le type du fichier était donc insuffisant pour diagnostiquer la perte de mouvement. Passez le bloc à la taille originale, puis relisez l’adresse chargée. Revenir à la résolution initiale doit rétablir l’ancienne adresse. Cette recette ne reproduit pas le traitement du GIF par l’éditeur dans le navigateur.
Vérifier la transparence avec un fond témoin
Ajoutez la même illustration transparente à deux groupes sur la copie. Donnez à l’un un fond bleu foncé et à l’autre un fond clair. Placez à côté un export aplati de la même illustration, par exemple un JPEG avec fond blanc. Comparez le même coin de chaque image. Dans l’essai, le coin du PNG prenait la couleur du groupe. Le JPEG gardait un coin presque blanc sur le fond sombre. Le fichier aplati réagissait autrement alors que le sujet principal était identique.
Si la version servie laisse bien passer les deux fonds, revenez aux réglages de la page où elle semble opaque et recherchez le fond ou le calque qui produit cet effet. Si le fichier servi montre déjà son propre rectangle sur les deux fonds, vérifiez l’original ou un export transparent de remplacement. Gardez l’ancienne affectation jusqu’à ce que la nouvelle soit confirmée. Le retour arrière consiste à rétablir ce média ou la couleur précise enregistrée avant l’essai.
Refaire le contrôle aux largeurs où le problème apparaît
Répétez la comparaison à deux largeurs, par exemple celle d’un téléphone et celle d’un ordinateur. Notez l’adresse réellement chargée à chaque fois ainsi que le fond utilisé. Si une galerie reste figée alors que le bloc Image isolé s’anime, comparez leurs fichiers servis et leurs réglages. Évitez de refaire toute la médiathèque pour une seule variante ou un seul composant.
Si le média peut être utilisé dans plusieurs pages, relevez celles qui emploient la même source et conservez une page témoin avant d’étendre la correction. Quand le mouvement est nécessaire à la compréhension, vérifiez aussi que la description ou le texte voisin donne les étapes essentielles. Les mesures de la recette concernent les fichiers et les pixels d’une copie locale. Votre thème ou votre système d’optimisation peut fournir d’autres variantes.
