Plugins WordPress essentiels pour travailler avec des GIF animés
Autrefois limités à des bannières collantes et clignotantes avec des couleurs néon et des dessins animés qui flottaient dans les pop-ups et les en-têtes d’e-mails, les GIF ont changé pour le mieux. Avec ce changement, ils sont là pour rester, en particulier pour les utilisateurs et les développeurs de WordPress. Conçus spécifiquement pour le Web, les fichiers GIF sont généralement de petite taille, ce qui les rend parfaits pour ajouter une touche de mouvement à une publication. En fait, les GIF animés peuvent apporter une touche de vie rafraîchissante à un article ou à un sujet autrement statique.
Cependant, les GIF animés viennent avec leur juste part de problèmes et de frustrations. Étant donné que les GIF animés sont composés de nombreuses images, ils peuvent rapidement passer de petits fichiers discrets à certains des graphiques les plus encombrants de votre serveur. Les GIF sont connus pour ralentir les temps de chargement sur les pages où ils sont utilisés, ce qui en fait un obstacle au trafic répété et un problème pour les webmasters qui comprennent l’importance de la vitesse à une époque d’impatience.
Ensuite, il y a tous les problèmes spécifiques à WordPress. WordPress n’a pas été créé avec des GIF animés à l’esprit, et leur résurgence a donné des maux de tête aux développeurs. Alors que WordPress redimensionne généralement les images automatiquement, ce processus casse les animations en n’affichant que la première image. De plus, les GIF animés peuvent être difficiles à utiliser comme images vedettes sur WordPress. Ils peuvent perturber les flux RSS, les campagnes par e-mail, les affichages en première page et les vignettes.
Dans la plupart des cas, les avantages l’emportent toujours sur les inconvénients. Cependant, pour faire des GIF une partie réussie de votre publication WordPress, vous devrez peut-être essayer de nouvelles techniques. Découvrez ci-dessous quelques plugins et techniques indispensables pour travailler avec des GIF animés.
Basique : rendez votre site WordPress plus rapide
L’un des principaux problèmes liés à l’utilisation de GIF animés dans WordPress est le problème du temps de chargement. Maintenir les temps de chargement aussi rapides que possible est essentiel pour garder vos visiteurs heureux et rendre votre site Web aussi efficace que possible.
Selon KISSmetrics, le temps de chargement est un facteur majeur contribuant à l’abandon de page. Avec un temps de chargement de seulement 4 secondes, le taux d’abandon de page grimpe à 25 % et se rapproche de 50 % lorsque ce temps approche les 10 secondes. De plus, un délai d’une seconde dans la réponse de la page peut entraîner une réduction de 7 % des conversions.
Cela signifie que si un site rapporte 100 000 $ par jour – un site de commerce électronique ou un autre détaillant en ligne – un retard d’une seconde page pourrait représenter 2,5 millions de dollars de ventes perdues chaque année. Cela affecte également directement la satisfaction des clients. Un retard de 1 seconde diminue la satisfaction client de 16%. Vos clients veulent que votre site fonctionne avec peu ou pas de retard.
Parce que les GIF peuvent être utilisés pour augmenter la satisfaction des utilisateurs, cela devient encore plus problématique. Peut-être utilisez-vous un GIF animé pour illustrer le fonctionnement d’un produit, comme c’est le cas avec ce piège à animaux ci-dessous. Le GIF est tout simplement le moyen le plus rapide et le plus simple d’expliquer le mécanisme de réglage et de déclenchement du piège.
Même en dehors des sites de commerce électronique, les GIF peuvent être utilisés pour illustrer des points spécifiques, ajouter de l’humour à un sujet autrement sec ou augmenter le sentiment d’interaction de l’utilisateur. Ils peuvent être un excellent moyen de lier un concept inconnu à un concept familier, en utilisant la culture pop comme lien. Par exemple, les blogs WebpageFX pour un public de propriétaires d’entreprise, qui peuvent ou non être familiers avec des termes tels que "méta-mots-clés" et "bourrage de mots-clés". Ces pratiques sont obsolètes et totalement inefficaces – mais au lieu de dire cela, elles ont montré à quel point ce serait (in)efficace avec un GIF animé.
De toute évidence, les GIF sont parfaits pour augmenter la compréhension ou simplement faire sourire le lecteur – mais cela crée un dilemme direct. Malgré leurs avantages inhérents, ces fichiers peuvent être assez volumineux et des temps de chargement lents peuvent entraîner des pertes de bénéfices et une baisse des niveaux de trafic au fil du temps. Si les GIF sont importants pour vous et pour votre blog, il est essentiel d’éliminer les problèmes qui entraînent des retards et des temps de chargement lents. Les plugins ci-dessous peuvent aider à réduire la taille des fichiers et à améliorer les expériences de chargement, sans sacrifier vos animations ou leur qualité.
WP Smush.it
Largement utilisé et disponible pour les développeurs à tous les niveaux de compétence, WP Smush.it est livré avec les fonctionnalités nécessaires pour optimiser les images de manière à réduire les temps de chargement et à satisfaire les utilisateurs finaux. Le plug-in est conçu pour :
- Optimiser la compression JPEG
- Convertir certains GIF statiques en PNG indexés
- Supprimer les couleurs inutilisées des images indexées
- Supprimer les métadonnées inutiles des images
- Rendre les GIF animés plus efficaces en supprimant les pixels qui restent les mêmes d’une image à l’autre
Contrairement à certains autres plugins de compression d’image, qui cassent les GIF animés de la même manière que WordPress lui-même, WP Smush.it inclut spécifiquement des techniques d’optimisation pour les GIF animés.
Les images ajoutées aux pages par les utilisateurs du backend et les administrateurs sont automatiquement exécutées via le plug-in lors du téléchargement. Cela signifie que vous n’avez pas du tout besoin de modifier votre processus pour améliorer l’expérience utilisateur. Il n’y a pas mieux que ça! Les utilisateurs préoccupés par la façon dont les images existantes affectent les temps de chargement peuvent également utiliser le plugin pour analyser le contenu existant. WP Smush.it est simple à installer et simple à utiliser.
Tout plugin de chargement paresseux
Une autre option pour optimiser les temps de chargement tout en incorporant des GIF consiste à utiliser un plugin de chargement paresseux. Ces plugins sont conçus pour les utilisateurs. Au lieu d’attendre qu’une page entière se charge – ce qui ralentit les délais et entraîne de la frustration – les plugins de chargement paresseux ne chargent que le contenu actuellement visible sur l’écran du visiteur. Le chargement paresseux accélère les sites contenant beaucoup d’images et peut être un moyen efficace de satisfaire vos visiteurs.
Il existe de nombreuses options gratuites qui simplifient le chargement paresseux. Ils incluent – mais ne sont pas limités à :
- Lazy Load – Lazy Load utilise jQUery.sonar pour charger uniquement les images visibles. Il a été écrit par l’équipe WordPress VIP et reçoit des classements constamment élevés de la part des utilisateurs.
- Image Lazy Load – Conçu comme une version allégée du Lazy Load original, Image Lazy Load (Unveil.js) prend en charge les images haute résolution sur les appareils dotés d’écrans Retina.
- BJ Lazy Load – BJ Lazy Load remplace les images de publication intégrées par des espaces réservés et charge le contenu juste avant qu’il ne devienne visible pour les utilisateurs finaux lors du défilement.
- Rocket Lazy Load – Rocket Lazy Load est conçu comme un petit script (moins de 2 Ko) qui affiche toutes les images de la page – widgets, intégrations, vignettes, avatars et plus encore, tout en faisant défiler. Il est surtout connu pour sa petite taille.
Intermédiaire : installez des plugins d’animation pratiques
Une fois que vous avez maîtrisé les temps de chargement et la vitesse, il est temps de passer à quelque chose d’un peu plus avancé, mais toujours faisable pour la plupart des utilisateurs généraux de WordPress. Ces plugins d’animation rendent les GIF existants plus conviviaux et encore plus attrayants. Les plugins d’animation pratiques répertoriés ci-dessous améliorent la capacité de WordPress à afficher des GIF.
Redimensionnement du GIF animé
Le redimensionnement du GIF animé corrige la fonction de redimensionnement automatique de WordPress afin que vous puissiez redimensionner les GIF animés sans casser l’animation. Cela élimine le problème fréquemment rencontré de WordPress affichant la première image d’un GIF animé sans rien d’autre.
Giphypress
Quiconque a fréquemment travaillé avec des GIF animés connaît probablement Giphy, une archive GIF animée qui permet aux utilisateurs de rechercher par balise et de trouver des GIF pertinents pour à peu près n’importe quel sujet. Giphypress facilite l’intégration de fichiers Giphy sur votre site – utilisez simplement le bouton ajouté par le plugin pour rechercher l’image parfaite et cliquez sur "Intégrer dans la publication".
Aperçu de l’animation GIF
GIF Animation Preview recherche et trouve tous les endroits où vous avez utilisé un GIF animé sur votre site WordPress et les remplace par des images d’aperçu. Quelle que soit l’origine du GIF (les sources d’images sur site ou hors site fonctionnent toutes les deux), le plug-in utilise la première image de l’animation pour générer un aperçu. Ensuite, les visiteurs du site ont la possibilité de cliquer sur lecture pour voir le reste de l’animation ou de continuer sans voir l’animation.
C’est un excellent moyen de réduire les temps de chargement des pages de votre site, en particulier si vous avez choisi de ne pas utiliser de plugin de chargement paresseux – au lieu d’avoir à charger chaque image de chaque GIF animé sur la page, les visiteurs n’ont qu’à charger le premier cadre. Ce type de fonctionnalité est utilisé par de grands sites Web comme BuzzFeed, en particulier pour les visiteurs mobiles, qui ont plus de raisons d’être sélectifs quant aux données qu’ils choisissent de télécharger.
Avancé : faites des choses plus cool avec des GIF animés
Ces plugins et techniques sont un peu plus difficiles à mettre en place, mais ils sont assez puissants. Continuez à lire pour savoir comment définir un GIF comme image vedette (quelque chose que nous voyons de plus en plus sur des sites comme BuzzFeed, Mashable et TechCrunch) et comment transformer une série de fichiers image séparés en une séquence animée directement sur votre site.
Définition d’un GIF animé en tant qu’image sélectionnée
Pour la plupart, les concepteurs et développeurs Web ont été limités – en particulier dans WordPress – lorsqu’ils tentaient de définir un GIF animé en tant qu’image en vedette. Étant donné que WordPress crée automatiquement une image miniature à partir de l’image sélectionnée que vous fournissez, cassant les GIF animés, cela peut être très difficile à réaliser. Cela ne signifie pas pour autant que c’est impossible.
Une façon de contourner le blocage consiste à insérer l’URL de l’image dans la zone d’image sélectionnée, au lieu de télécharger et de télécharger un graphique depuis votre ordinateur ou quelque part sur le Web. C’est aléatoire.
Une autre option – peut-être moins qu’idéale, mais toujours réalisable pour ceux qui connaissent bien le développement WordPress – consiste à changer le format de l’image en vedette de "en vedette" à "complet" à l’intérieur du fichier d’index du thème. Cela permet à l’image sélectionnée d’extraire des gifs animés originaux et non déformés. Cela nécessite une volonté de faire un peu de codage, et présente l’inconvénient qu’il s’applique à toutes vos images en vedette – vous devrez donc commencer à les dimensionner manuellement à la largeur et à la hauteur appropriées.
Cela ne doit pas être compliqué. En fait, il existe également des plugins pour faciliter le processus. Autoset Featured Image et Automatic Featured Image Posts sont deux plugins (choisissez-en un) qui définissent automatiquement la première image – quel que soit son format – comme image en vedette. Cela signifie que si votre première image affichée dans une publication est un GIF animé, elle deviendra l’image sélectionnée. Cependant, cette solution de contournement présente d’autres inconvénients, à savoir que vous devrez toujours faire preuve de discernement quant à l’image que vous placez le plus haut dans vos publications !
Images animées automatiquement
Le plugin Auto Animate Image permet aux utilisateurs d’intégrer des animations créées à partir d’une série de fichiers séparés, au lieu d’un GIF animé standard. Il peut être utilisé pour contourner le maximum de 256 couleurs de GIF animés, permettant une sensation plus naturelle et fluide. En revanche, il est facile de créer quelque chose qui ralentit énormément votre site, donc l’utilisation de ce plugin demande une certaine finesse.
Le plugin affiche non seulement plusieurs images – sinon des images immobiles – en continu, comme une animation, il prend également en charge les noms de fichiers arbitraires, aucune norme requise. Cela signifie que GIF, PNG, JPEG, JPEG XR – et d’autres options HD Photo – BMP, TIFF, WebP et SVG peuvent tous être utilisés de manière interchangeable pour créer quelque chose de nouveau et de complètement original. Les animations créées avec Auto Animate Image peuvent être définies sur le retard, la répétition, le rembobinage, la pause et même le blanc, ce qui conduit à plus d’options qu’un GIF standard. Il élimine le besoin d’écrire du JavaScript, mais peut être contrôlé avec lui si vous le souhaitez. Le plugin prend en charge la plupart des navigateurs, vous n’avez donc pas à vous soucier des différentes expériences de l’utilisateur final.
Il s’agit de rendre vos visiteurs heureux
Les GIF sont de retour. Beaucoup diront qu’ils sont revenus d’entre les morts. Cependant, au lieu des anciennes animations collantes qu’elles étaient, elles font désormais partie intégrante de conceptions Web propres, solides et efficaces. Cependant, lorsque vous travaillez dans WordPress, ils peuvent être plus qu’un peu problématiques.
Commencez par le début – au niveau de base. Prenez le temps de regarder dans les plugins pour augmenter la vitesse de chargement, trouvez ce avec quoi vous êtes à l’aise et testez comment les temps diminuent. À partir de là, travaillez sur des plugins d’animation plus avancés. Ensuite, soyez créatif. Sortez de l’ornière du GIF animé "standard" en créant vos propres animations à partir d’images statiques et en vous assurant que vos GIF animés peuvent être définis comme des images en vedette.
Un GIF animé n’a pas à causer de la frustration, de la négativité ou des heures redoutées devant l’écran d’ordinateur, en essayant d’accélérer le chargement de vos pages ou de les afficher correctement. Ils sont censés être amusants, et les plugins et options décrits ci-dessus les maintiennent ainsi.