Sommaire
La vitesse est l’un des principaux facteurs de réussite d’un site web. Les images nécessitent beaucoup de bande passante pour être chargées, surtout si elles sont animées. Comme de nombreux créateurs utilisent des GIF dans la conception de leurs sites web, une façon plus efficace de les montrer est peut-être idéale.
Bien qu’il existe de nombreux moyens d’accélérer un site WordPress, une fonction de téléchargement des GIF en un clic aide à améliorer les performances. Après tout, vous voulez que les visiteurs aient la meilleure expérience possible.
Dans ce tutoriel, je vais vous montrer comment ajouter une fonction de “click-to-load” aux GIF WordPress.
Utilisation de WP GIF Player
Aujourd’hui, je fais une démonstration du plugin WP GIF Player pour WordPress. Il ajoute une fonction à l’écran de l’éditeur qui permet d’ajouter facilement des animations tout en fournissant un nouveau raccourci à utiliser dans les pages et les messages.
Installez et activez le plugin “WP GIF Player”. Vous pouvez le trouver facilement en tapant le nom dans le champ de recherche sur la droite.
Paramètres du lecteur WP GIF
Tout d’abord, jetons un coup d’œil rapide aux paramètres du lecteur WP GIF.
Allez dans la zone des paramètres et cliquez sur “WP GIF Player”.
Actuellement, vous n’avez qu’une seule option qui est modifiable. Vous pouvez choisir de définir le premier cadre du GIF comme sa vignette, d’utiliser un GIF comme vignette ou d’éviter de définir une vignette de poste avec le GIF tout court.
Pour l’instant, nous allons juste laisser cette option par défaut pour “Ne pas mettre de vignette”. C’est parce que j’utilise “Featured Image” comme vignette de message à la place. À bien des égards, c’est simplement un moyen plus facile de promouvoir un article dans WordPress.
Si vous apportez des modifications, cliquez sur le bouton “Enregistrer les modifications” pour valider votre choix.
Utilisation de WP GIF Player dans les articles et les pages
Maintenant, ajoutons un GIF animé à un post que nous sommes en train de créer. Allez à la rubrique Articles et cliquez sur la fonction “Ajouter nouveau”.
Je vais supposer que vous avez un GIF prêt à être placé sur votre site web. Si vous n’en avez pas, vous pouvez toujours en chercher un dans Google. Internet regorge d’endroits où vous pouvez télécharger et utiliser des GIF animés gratuits.
Dans l’éditeur du poste, vous verrez un nouveau bouton en haut. Placez votre curseur à l’endroit du contenu où vous voulez que votre image apparaisse. Dans cet exemple, je le place avant tout le texte.
Cliquez sur le bouton “Ajouter un GIF” à côté de l’outil média.
Téléchargez le fichier GIF comme vous le feriez pour n’importe quelle autre image.
Une fois votre image téléchargée, vous verrez plutôt un shortcode. Il s’agit du lecteur WP GIF qui prend le contrôle de l’image. Par coïncidence, vous pouvez copier ce shortcode et l’utiliser à d’autres endroits de votre site web au lieu de cliquer sur le bouton “Ajouter GIF”.
Cliquez sur le bouton “Update” ou “Publish” pour rendre l’article en ligne.
NOTE : WP GIF Player entre une image sur toute la largeur de l’article dans certains thèmes. Je ne peux pas en modifier la taille, même dans le shortcode lui-même. Comme WordPress est naturellement réactif, cela n’affectera pas beaucoup les visiteurs mobiles. Cependant, cela dégradera la qualité de l’image si elle est naturellement petite.
Dans le cas présent, j’utilise un GIF de 245 pixels de large qui s’étend à 600. Comme vous pouvez le voir, la qualité est réduite.
Remarquez qu’il y a un “GIF” au centre de l’image. Cela indique au visiteur qu’il doit cliquer dessus pour charger l’animation. Lorsque le visiteur clique sur le GIF, l’animation est chargée et jouée.
Utilisation de WP GIF Player dans un widget
Et si vous souhaitez ajouter un GIF animé à votre encadré ? C’est à ce moment que l’utilisation d’un widget entre en jeu. Malheureusement, le plugin WP GIF Player n’est pas livré avec un support de bouton pour les widgets. Cependant, vous pouvez facilement utiliser le raccourci du message ci-dessus pour ajouter le GIF à la barre latérale.
Copiez le shortcode dans un endroit sûr. Par exemple, je le mets simplement dans un fichier Notepad pour pouvoir le copier et le coller plus tard.
Allez à Apparence et cliquez sur la fonction “Widgets”.
Faites défiler l’écran jusqu’au widget “Texte”. Ceux-ci seront classés par ordre alphabétique, vous le trouverez donc en bas de la liste.
Glissez et déposez le widget dans votre barre latérale. Vous aurez une mise en page différente de la mienne selon le thème que vous utilisez. Tous les thèmes n’auront pas les mêmes barres latérales et les mêmes fonctions.
Collez le shortcode dans l’éditeur du widget.
Cliquez sur le bouton “Enregistrer” en bas à droite. Le widget sera alors immédiatement enregistré sur votre site web.
Comme vous pouvez le voir, WP GIF Player et WordPress s’adapteront à la taille réduite de la barre latérale. Cela signifie que vous n’avez pas à vous soucier d’essayer de faire correspondre la largeur de la barre latérale pour que le graphique apparaisse bien sur votre site.
Le chargement paresseux est-il une bonne alternative ?
Le chargement paresseux des images est un très bon moyen de maintenir la vitesse d’un site optimale. Cependant, les GIF animés sont toujours beaucoup plus grands que les autres types d’images. Lorsqu’une personne fait défiler le site, le GIF aura encore besoin de temps pour télécharger les informations de l’animation. Cela ne favorise pas une bonne expérience du visiteur.
Quel type d’amélioration de l’image avez-vous apporté à votre site WordPress ? À quelle fréquence utilisez-vous des GIF pour accentuer votre contenu ?
