Utiliser des images WebP dans WordPress

Publié: 2021-03-30

Comme vous le savez probablement déjà, lorsqu'il s'agit de sites Web, la vitesse compte ! L'une des meilleures choses que vous pouvez faire pour accélérer votre site Web est de réduire la taille de la page. Plus il est petit, moins il y a de données à télécharger. Moins il y a de données, plus la page se chargera rapidement (dans des limites raisonnables !).

Les images représentent une partie importante de la taille du fichier d'une page Web (parfois bien plus de 50 % des données de la page sont des images). Cela fait des images la cible numéro un pour suivre un régime dans votre quête de tailles de page plus petites ! Traditionnellement, la plupart des images utilisées sur les sites Web sont au format JPEG ou PNG. Les deux sont d'excellents types de fichiers qui fonctionnent bien sur les sites Web. Ils peuvent cependant avoir un problème de taille. Bien qu'il soit recommandé d'utiliser un outil comme TinyPNG (et qu'il puisse avoir un impact considérable sur la taille des images que vous ajoutez à votre site), que se passerait-il s'il existait un format d'image plus petit « dès la sortie de la boîte ». Eh bien, il y en a et ça s'appelle WebP.

Dans cet article, nous allons examiner plus en détail les images WebP pour savoir ce qu'elles sont et comment vous pouvez les utiliser sur votre site Web WordPress. Donc, si vous avez toujours voulu alléger votre site Web, allez prendre un café et un gâteau (personne n'a dit que nous devions faire un régime en plus de notre site Web !) Et puis allons-y !

Que sont les images WebP ?

Alors, quelles sont ces images WebP dont vous avez probablement entendu parler ? Eh bien, il n'y a rien de trop complexe ou mystérieux à ce sujet. Fondamentalement, c'est juste un autre type de fichier. Au lieu d'enregistrer les images au format JPEG ou PNG, elles sont enregistrées au format WebP. WebP a en fait été développé par Google. Ils décrivent WebP comme "un format d'image moderne qui fournit une compression supérieure sans perte et avec perte pour les images sur le Web". Grâce à WebP, les webmasters et les développeurs Web peuvent créer des images plus petites et plus riches qui rendent le Web plus rapide.'

Google aime les sites Web rapides, il est donc logique qu'ils montrent la voie en fournissant un format d'image qui aidera les sites Web à fonctionner plus rapidement. Les fichiers WebP sont généralement de 25% à 34% supérieurs à un JPEG équivalent (selon la propre étude de Google). Étant donné que les images peuvent constituer la majeure partie des données d'une page Web, il s'agit d'une économie importante.

Et ne craignez pas de perdre la qualité de vos images - l'objectif de WebP est de pouvoir enregistrer des images dans un format qui reste à la fois de haute qualité d'un point de vue visuel tout en étant enregistré dans un petit format de fichier. Un gagnant-gagnant.

Ainsi, si les images WebP sont de petite taille tout en offrant une excellente expérience visuelle à vos utilisateurs, vous vous demandez peut-être pourquoi elles ne sont pas plus largement utilisées. Il y a deux raisons principales à cela.

Convivialité : Actuellement, les images WebP ne sont pas prises en charge par la majorité des logiciels de conception graphique tels que Photoshop ou Illustrator. Quiconque travaille dans ces programmes aura l'habitude d'ouvrir des fichiers d'images (de toutes les descriptions, JPEG, GIF, PNG, etc.) et de "se mettre à jour" avec l'édition selon les besoins. De plus, lorsqu'il s'agit d'enregistrer ces fichiers, vous pouvez généralement exporter dans n'importe quel format d'image courant. Avec WebP, ce n'est pas possible de le faire directement. Au lieu de cela, vous devrez probablement télécharger un plug-in à partir du WebPShop afin d'utiliser votre logiciel de retouche d'image "normal". Jusqu'à ce que les images WebP deviennent aussi omniprésentes que les JPEG et d'autres formats, il y aura toujours une réticence à "trop compliquer" les choses et de nombreux concepteurs de sites Web continueront à utiliser des formats d'image plus traditionnels.
Compatibilité du navigateur : WebP n'est PAS universellement pris en charge par tous les navigateurs. Cela signifie que, même si la majorité de vos visiteurs qui utilisent des navigateurs à jour comme Chrome ou Mozilla n'auront aucun problème à visualiser ces images, vous aurez toujours une minorité non négligeable qui ne pourra pas voir les images de sites Web enregistrées. comme WebP, qui inclut notamment Safari qui n'offre qu'un support partiel selon la version utilisée (au moment de la rédaction). Vous aurez besoin d'une solution de contournement (dont nous parlerons ci-dessous) pour vous assurer que tous vos visiteurs peuvent voir votre site Web tel que vous le souhaitez.

Donc, la question doit être "devrais-je utiliser WebP?". Eh bien, il semble certainement que les gens commencent à prêter davantage attention à ce qui est un format de fichier incroyablement innovant. Et, si la vitesse compte vraiment pour vous et que vous disposez des ressources nécessaires pour créer un site Web à l'aide d'images WebP, pourquoi ne le feriez-vous pas ? Comme avec toutes les nouvelles technologies, le départ peut parfois être lent, mais il vaut mieux être en avance sur la courbe que de courir pour rattraper vos concurrents ! Dans cet esprit, examinons comment utiliser les images WebP sur un site Web WordPress.

Comment utiliser les images WebP avec WordPress

Quiconque a plongé directement et essayé de télécharger des fichiers WebP sur son site Web WordPress avant juillet 2021 aurait été un peu déçu. Vous vous attendriez probablement à ce que toutes les images WebP téléchargées via le Media Center soient enregistrées normalement. Au lieu de cela, vous avez peut-être vu un écran comme celui-ci :

Heureusement, depuis la sortie de WordPress 5.8, vous pouvez désormais télécharger des images WebP directement sur WordPress, ce qui rend ce grand format d'image aussi facile à utiliser que les formats JPEG, PNG et GIF. Ce sont des améliorations cohérentes comme celle-ci qui sont l'une des principales raisons pour lesquelles il est logique de mettre à niveau votre noyau WordPress vers la dernière version. Bien sûr, si vous utilisez un hébergeur WordPress géré comme Pressidium, nous nous en occupons pour vous, en vous assurant que vous utilisez toujours la dernière et la meilleure version de WordPress.

Avant la sortie de WordPress 5.8, l'un des moyens les plus simples d'utiliser les images WebP consistait à installer un plug-in qui convertissait les formats d'image pris en charge (par exemple, PNG) en fichiers WebP, puis les affichait sur votre site. Il y a quelques mises en garde à l'utilisation des images WebP (nous les énumérons ci-dessus) et l'utilisation d'un plugin approprié tel que Shortpixel peut éliminer ces inconvénients et peut donc toujours être une solution à considérer. Poursuivez votre lecture pour en savoir plus!

Pixel court

Shortpixel est un plugin génial et qui vaut la peine d'être utilisé, que vous choisissiez ou non d'utiliser des images WebP. Shortpixel est un service d'optimisation d'image bien établi. Il exécute toutes les images que vous téléchargez via leur excellent service de compression d'image, comprimant souvent la taille de l'image de 50 % ou plus sans perte de qualité d'image. Cela signifie automatiquement que vous n'avez pas à penser à compresser vos images avant de les télécharger sur votre site Web.

Pour vraiment tirer le meilleur parti de Shortpixel, vous devrez payer un forfait avec eux. Ils facturent sur une base "images optimisées/mois" avec 5 000 images par mois pour seulement 3,99 $/mois. Pour de nombreux sites Web, ce plan sera plus que suffisant et, compte tenu des avantages en termes de performances associés à un site Web optimisé, il est bon marché pour le prix.

Shortpixel optimise une large gamme de formats d'image, notamment JPEG et PNG. Alors, vous vous demandez peut-être comment cela m'aide à ajouter des images WebP à mon site Web WordPress ?

Si vous vous souvenez, tous les navigateurs Web ne prennent pas en charge le format WebP avec une prise en charge partielle de WebP dans Safari, selon la version utilisée (au moment de la rédaction) et aucune prise en charge offerte par Internet Explorer. Ce n'est tout simplement pas une option viable pour créer un site Web qui ne s'adresse pas à ces visiteurs, même si ceux qui utilisent un navigateur obsolète ou non pris en charge peuvent être minoritaires.

Vous vous souviendrez peut-être également que de nombreux logiciels d'édition d'images ne prennent pas non plus en charge les fichiers WebP directement. Donc, nous avons une bataille sur deux fronts… non seulement nous devons sauter à travers des cerceaux pour créer ou travailler avec des fichiers WebP en premier lieu, mais nous devons également trouver un moyen de a) les ajouter à notre site Web WordPress et b) créer une image de secours pour ceux qui visitent notre site à l'aide d'un navigateur non compatible WebP.

Shortpixel à la rescousse

Shortpixel a une approche soignée de l'utilisation des images WebP sur les sites Web WordPress. En cochant une seule case à partir de leur plugin, vous pouvez lui dire de créer des versions WebP de toutes les images que vous téléchargez. Vous pouvez ensuite demander au plug-in Shortpixel d'afficher ces images WebP sur les navigateurs prenant en charge WebP.

Si le navigateur des visiteurs du site Web ne peut pas afficher les images WebP, un autre format d'image sera automatiquement affiché. Cela vous donne le meilleur de tous les mondes… la vitesse qui va avec un site Web qui utilise des images de petite taille grâce à WebP pour les navigateurs qui peuvent les gérer ou une alternative bien optimisée pour ceux qui ne le peuvent pas.

WebP est maintenant un format d'image largement adopté. Que vous choisissiez d'utiliser la fonction de téléchargement native maintenant disponible dans WordPress ou de les générer via un plugin comme ShortPixel, il est tout à fait logique d'envisager de passer les images de votre site Web aux variantes WebP afin que votre site puisse profiter de la taille de fichier réduite qui devrait, à son tour, se traduit par un site Web à chargement plus rapide.