J'ai un jour trouvé le GIF parfait pour rendre un article plus attrayant, mais il s'est transformé en une image statique et immobile immédiatement après le téléchargement. C'était incroyablement ennuyeux de voir l'animation disparaître juste au moment où je voulais engager mes lecteurs.
Cela se produit car lorsque WordPress crée automatiquement des tailles d'image plus petites (comme les miniatures), il n'utilise que la première image de l'animation. Le reste des données d'animation n'est pas inclus dans ces tailles générées.
Heureusement, la solution est simple une fois que vous savez quel réglage modifier. J'ai utilisé cette méthode spécifique sur mes propres sites pour que les animations soient fluides sans aucun code.
Voici comment ajouter des GIF animés dans WordPress de la bonne manière.
Pourquoi les GIF WordPress ne fonctionnent-ils pas correctement ?
Chaque fois que vous téléchargez une image dans la médiathèque, WordPress crée automatiquement plusieurs copies de cette image dans différentes tailles.
Il existe 3 tailles d'image WordPress par défaut qui sont générées automatiquement : miniature, moyenne et grande. WordPress conserve également votre téléchargement d'origine, appelé « Taille réelle ».
Le problème est que lors de la création de ces nouvelles tailles d'image pour les GIF animés, WordPress ne capture que la première image de l'animation.
Par conséquent, lorsque vous ajoutez l'une de ces tailles d'image générées à votre article ou à votre page, elles seront des images statiques et le GIF WordPress ne fonctionnera pas.
Maintenant, examinons la bonne façon d'ajouter des GIF animés dans WordPress afin qu'ils conservent leur animation.
Ajout correct de GIF animés dans WordPress
Tout d'abord, vous devez modifier ou créer un nouvel article ou une nouvelle page WordPress dans l'éditeur Gutenberg de WordPress pour ajouter le GIF animé.
Une fois dans l'éditeur de contenu WordPress, cliquez sur le bouton '+' et ajoutez un bloc d'image.
Ensuite, vous trouverez plusieurs façons de télécharger votre GIF animé dans le bloc d'image.
Pour commencer, cliquez simplement sur le bouton 'Télécharger' et sélectionnez votre GIF animé sur votre ordinateur. Ou vous pouvez cliquer sur le bouton 'Bibliothèque de médias' et ajouter des fichiers multimédias qui ont déjà été téléchargés dans votre bibliothèque de médias.
Il existe également une option pour entrer le lien de votre GIF en cliquant sur le bouton 'Insérer depuis l'URL', mais nous ne recommandons pas cela car cela ne télécharge pas l'image sur votre site Web.
Une fois que vous avez téléchargé votre GIF, l'éditeur de blocs l'insérera dans votre contenu, et vous pourrez le personnaliser.
Après avoir ajouté le GIF, vous devrez sélectionner l'option 'Taille complète' sous 'Taille de l'image' dans le menu de droite.
Il est important de sélectionner « Taille réelle » car cela indique à WordPress d'utiliser le GIF animé original et intact que vous avez téléchargé.
Les autres tailles (comme « Miniature », « Moyenne » ou même « Grande ») sont des copies statiques que WordPress a générées en utilisant uniquement la première image. En choisissant « Taille réelle », vous vous assurez que l'animation est lue correctement. 👍
Vous pourrez voir l'animation immédiatement dans l'éditeur de contenu.
Allez-y et publiez ou mettez à jour votre article de blog pour voir les GIF animés en action.
Remarque : N'oubliez pas d'ajouter un texte Alt descriptif à votre GIF dans les paramètres du bloc. Les GIF transmettant souvent une réaction ou un sentiment, la description de l'animation aide les utilisateurs de lecteurs d'écran à comprendre votre contenu.
Conseils bonus pour utiliser des GIF animés dans WordPress
Les images GIF animées sont généralement plus volumineuses que les autres fichiers image. C'est parce qu'elles contiennent plusieurs images compressées utilisées comme images pour créer l'animation.
L'utilisation de gros GIF ou l'ajout de trop d'images GIF sur une page WordPress peut ralentir votre site Web et nuire à votre optimisation pour les moteurs de recherche (SEO). Consultez notre guide ultime sur la façon d'améliorer la vitesse et les performances de WordPress pour plus de détails.
Si vous utilisez Giphy.com pour trouver des GIF animés, le plugin GIF Master pourrait vous être très utile. Il vous permet de rechercher dans la base de données Giphy depuis votre tableau de bord WordPress et d'ajouter des GIF sans quitter votre site WordPress.
Si vous avez un lien vers un GIF de Giphy, vous pouvez également simplement coller l'URL directement dans l'éditeur WordPress sur sa propre ligne. WordPress intégrera automatiquement le GIF animé pour vous, aucun plugin requis.
Foire aux questions sur les GIF dans WordPress
Voici les réponses à certaines des questions les plus fréquentes que nous recevons concernant l'utilisation de GIF animés dans WordPress.
Pourquoi les GIF animés sont-ils si volumineux ?
Les GIF animés sont essentiellement une série d'images statiques, ou d'images, regroupées dans un seul fichier. Plus un GIF a d'images et de couleurs, plus sa taille de fichier sera importante.
C'est pourquoi ils sont souvent beaucoup plus volumineux que les images JPG ou PNG standard.
Comment puis-je optimiser les GIF pour les rendre plus petits ?
Vous pouvez utiliser des outils en ligne gratuits comme EZgif ou GIMP pour optimiser vos GIF animés. Ces outils peuvent réduire la taille du fichier en supprimant les images supplémentaires ou en diminuant le nombre de couleurs.
Astuce de pro : Pour les animations plus longues, envisagez de convertir votre GIF en un fichier vidéo MP4. Les vidéos sont beaucoup plus petites en taille de fichier et se chargent plus rapidement. Vous pouvez les ajouter en utilisant le bloc Vidéo et le régler sur « Lecture automatique » et « Boucle » pour imiter un GIF.
Est-il mauvais d'utiliser beaucoup de GIF sur une seule page ?
Oui, ajouter trop de gros fichiers GIF sur une seule page peut considérablement ralentir le temps de chargement de votre site Web. Cela peut créer une mauvaise expérience utilisateur et nuire à votre classement SEO.
Il est préférable de les utiliser avec parcimonie pour mettre en évidence des points clés ou ajouter un intérêt visuel là où cela compte le plus.
Ressources supplémentaires pour la gestion de vos médias
Nous espérons que ce guide vous a aidé à ajouter correctement des GIF animés à votre site WordPress. Maintenant que vous maîtrisez les GIF, vous trouverez peut-être ces autres articles sur la gestion des médias utiles.
- Excellents plugins WordPress pour la gestion des images – Découvrez des outils qui peuvent vous aider à organiser, optimiser et afficher vos images plus efficacement.
- Why You Should Never Upload a Video to WordPress – Learn why hosting your own videos can hurt your site’s performance and what you should do instead.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Derick Melander
Thanks, I was losing my mind.
Support WPBeginner
Glad our guide was helpful!
Admin
Dana
Thanks for this. Super helpful and easy to follow.
Support WPBeginner
You’re welcome
Admin
Mike
Is it better to embed some code or insert the gif as you describe above for site speed? Or does it not really impact anything?
Support WPBeginner
As long as the gif is optimized then there shouldn’t be a major impact having the gif uploaded on your site instead of embedding it.
Admin
Evans Mary
So grateful for this knowledge. Thankyou so much for sharing.
Support WPBeginner
De rien, heureux que vous ayez trouvé notre article utile !
Admin
Lise
Ce billet de blog était très utile.
J'ai téléchargé des gifs sur giphy, mais ils sont devenus flous sur ma page.
Cependant, j'ai maintenant des gifs de haute qualité.
Support WPBeginner
Nous sommes heureux que vous ayez trouvé notre guide utile !
Admin
Karl Heinz Burkhardt
C'était très utile. Merci beaucoup.
Support WPBeginner
Heureux que notre guide vous ait été utile !
Admin
Melissa
Merci – vous me sauvez la vie !
Support WPBeginner
You’re welcome, glad our guide could be helpful
Admin
Alexandre
Doesn’t work for me?
Support WPBeginner
Vous voudrez peut-être vous assurer que vous n'avez pas de plugin d'optimisation d'image qui tente de modifier le GIF
Admin
Giron
Comment faire démarrer et arrêter une animation gif en cliquant avec la souris ?
Support WPBeginner
Bien que nous n'ayons pas de méthode recommandée pour le moment, nous examinerons certainement la possibilité d'ajouter cela à cet article.
Admin
Joie
Merci les gars. Cela a vraiment aidé.
ed
existe-t-il des plugins de commentaires d'utilisateurs qui permettent aux utilisateurs d'ajouter des gifs ?
Brian
Une idée de comment ajouter facilement un post avec une Live Photo iOS ? Merci !
Christophe
Bonjour,
J'ai ajouté un gif animé sur mon site WordPress en suivant votre exemple. Cela a fonctionné, mais maintenant le .gif a complètement disparu, même de ma médiathèque.
Any idea where this could be coming from?
Many thanks
Christopher Eldridge
Bonjour, dans mon cas, l'outil d'importation de médias n'offre pas la possibilité de changer la taille du fichier. Est-ce parce que j'utilise la version gratuite de Wordpress ? Si oui, quelle version dois-je acheter pour pouvoir modifier la taille du fichier et avoir une animation GIF fonctionnelle ?
Merci ! Chris
Johnson
J'ai un site de blog automatique sur lequel je publie sur mes réseaux sociaux. Je n'écris pas de publications, je télécharge uniquement des images et j'utilise les plugins Auto Image Post et Draft Scheduler pour les automatiser.
Admin, s'il vous plaît, comment faire pour que tous mes GIF téléchargés s'animent automatiquement ? J'ai essayé plusieurs plugins mais aucun n'a fonctionné. J'apprécierais grandement votre aide.
Merci.
John Mauldin
Excellent article et EXCELLENT timing ! Je viens de regarder et de télécharger un GIF animé que je dois mettre sur un site WP. Merci beaucoup pour cette information, wpbeginner.com !
Rakesh kumar
Merci beaucoup !! C'était très simple et pourtant très efficace. La plupart d'entre nous manqueront cette astuce.
Donna Merrill
À ma connaissance, j'ai toujours entendu dire que l'ajout d'un GIF ralentirait mon blog. C'est pourquoi je ne l'ai pas encore utilisé. Cependant, j'ai quelques sites de niche où cela pourrait ne pas poser de problème. Merci pour cette clarification.
-Donna