Comment servir des images WebP au lieu de JPG ou PNG avec WordPress

Google se situe au sommet de la chaîne alimentaire Internet. L'entreprise influence (ou dicte) une grande partie de ce qui se passe en ligne. Et leur nouveau format d'image, WebP, poursuit cette tendance. La vitesse de chargement des pages étant de plus en plus importante (principalement à cause du classement des pages Google), les développeurs et les concepteurs considèrent la compression d'images comme le moyen le plus simple de réduire les temps de chargement. Les images WebP de Google sont environ 30 % plus petites que les images JPG ou PNG classiques et conservent une qualité équivalente. Et le meilleur de tous, vous n'avez pas à vous soucier de convertir manuellement vos images en WebP.

Dans cet article, nous allons vous montrer comment utiliser ce nouveau format d'image avec WordPress, même s'il n'est pas encore pris en charge par défaut.

Allons-y.

Abonnez-vous à notre chaîne Youtube

Utiliser Optimole pour servir WebP sur WordPress

WebP, en tant que format d'image, n'est pas pris en charge par défaut dans WordPress. Vous pouvez télécharger une image .webp, mais tout comme un fichier SVG, vous vous retrouverez à recevoir des messages d'erreur. Et encore une fois, comme l'utilisation de fichiers SVG avec WordPress, il existe une solution de contournement simple via un plugin pour que votre site WP zoome correctement.

Parmi les services WebP que nous avons essayés, notre préféré est Optimole. Nous avons eu la meilleure chance de le faire fonctionner avec un minimum de réglages, nous voulons donc vous expliquer comment le configurer et rendre votre installation WordPress compatible WebP aussi facilement que possible.

Tout d'abord, évidemment, vous allez vouloir télécharger et installer le plugin lui-même. C'est sur le dépôt WP.org, et c'est totalement gratuit. Tout comme le service basé sur l'API qui l'alimente (jusqu'à un certain point). Bien qu'il soit possible de convertir des images traditionnelles en WebP à la volée à l'aide de PHP, tous les hébergeurs ne donnent pas cette autorisation à votre serveur. Si vous disposez de cette autorisation, vous pouvez également consulter le plugin WebP Express . Vous obtenez beaucoup de contrôle avec, mais c'est celui qui nécessite plus de réglages pour fonctionner en douceur.

Une fois que vous avez installé et activé Optimole sur votre site Web WordPress, vous trouverez une nouvelle option de menu sur Media – Optimole .

Votre clé API Optimole

Avant de pouvoir accéder à des paramètres ou des configurations, vous devez disposer d'un compte Optimole. Si vous en avez déjà configuré un, vous pouvez cliquer sur le bouton J'ai déjà une clé API . Sinon, inscrivez-vous et envoyez la clé API par e-mail . Le compte de base pour une clé API est gratuit et vous obtenez environ 5 000 visites sur ce niveau. Si vous avez besoin de plus que cela, des niveaux de prix sont disponibles.

Optimole définit une visite comme « toute personne qui visite votre site une fois [. . .] Chaque utilisateur n'est compté qu'une seule fois. Peu importe ce qu'ils font sur votre site, le nombre d'images qu'ils téléchargent ou le nombre de pages qu'ils visitent ; c'est juste un utilisateur. S'ils quittent votre site et reviennent le même jour, ils ne sont toujours qu'un seul utilisateur. "

Une fois que vous n'avez plus de visites mesurées, seules les images WebP cessent d'être diffusées. Vos images elles-mêmes ne le font pas. Vous trouverez la clé API dans votre tableau de bord Optimole tout en haut.

Collez-le simplement sur votre tableau de bord WordPress et vous serez prêt à commencer à diffuser des images WebP avec WordPress.

Vos tableaux de bord WordPress Optimole

Dans votre tableau de bord WordPress, vous obtenez des informations de base sur votre optimisation WebP. Cela vous permet de dépanner et d'évaluer le succès réel de l'accélération. De cette façon, vous pouvez entrer et modifier divers paramètres.

Tout d'abord, vous voyez le compte attaché à l'API, et en bas de l'écran, le plugin affiche les images les plus récemment optimisées. Vous pouvez voir à quel point les images WebP qui ont été servies sont plus petites que celles d'origine que vous avez téléchargées sur WordPress.

Ensuite, il y a l'onglet Problèmes possibles tout en haut. Personne n'aime voir l'onglet en surbrillance, mais nous devons également tous voir quels conflits pourraient survenir.

Le principal problème auquel nous avons été confrontés concerne les autres plugins de compression et de livraison d'images. Comme vous pouvez le voir dans l'image ci-dessus, le plugin Jetpack fonctionne de manière similaire à Optimole via l'APIT Photon, afin qu'ils puissent se cogner la tête. Pour nous, cela s'est manifesté par l'absence d'image délivrée au visiteur. Nous n'avons eu aucun problème avec d'autres services de compression comme TinyPNG ou Smush.

Utilisation des tableaux de bord

Si vous souhaitez des informations plus détaillées sur la façon dont votre site fonctionne avec WebP, le tableau de bord externe Optimole a ces informations pour vous.

Au lieu de simplement 9,5 fois plus petit, vous pouvez voir la taille réelle des fichiers qui ont été servis. Ainsi que les fichiers eux-mêmes sur une période de 30 jours.

Vous pouvez également définir des filigranes dans le tableau de bord Optimole (ou WP) afin que lorsque quelqu'un reçoit un WebP de votre site WordPress, votre logo soit automatiquement affiché. C'est un processus simple, et vous contrôlez l'opacité, l'emplacement, etc.

Vous pouvez essentiellement faire les mêmes choses à partir des deux tableaux de bord. Soit sous l'onglet Paramètres dans WordPress, soit en visitant le tableau de bord externe sur Optimole. Cela dépend entièrement de ce avec quoi vous êtes le plus à l'aise, ainsi que du niveau de données dont vous avez besoin à un moment donné.

De plus, vous pourrez contrôler le niveau de compression, le chargement paresseux et quand/si certaines images sont servies en tant que WebP en fonction des noms de fichiers. Vous trouverez tout cela sous l'onglet Paramètres de Media – Optimole .

Emballer

La meilleure partie de l'utilisation de WebP avec les sites Web WordPress est que vous n'avez pas à travailler manuellement avec les fichiers. Pas de téléchargements supplémentaires, pas de temps de compression supplémentaire, rien. En raison du fonctionnement des API, tous les calculs et processus sont exécutés à la volée en temps réel. Google a vraiment rendu Internet plus rapide en utilisant WebP plutôt que JPG ou PNG. Le plus grand avantage, cependant, est que les images conservent la même qualité, même si leur taille est considérablement réduite. Il peut être égoïste de la part de Google de vous amener à utiliser leur format pour accélérer votre site afin qu'ils puissent vous classer plus haut, l'expérience de l'utilisateur final est également meilleure. Et c'est ce qui compte au final.

Que pensez-vous de la diffusion d'images WebP aux visiteurs de votre site Web ?

Article présenté en image par vladwel / shutterstock.com