Dernière mise à jour le
Quand vous pensez à un site Web, qu'en pensez-vous en premier? De quoi ça a l'air? Combien de ressources il utilise? Vidéos? Images? Quelques lecteurs nous ont demandé de rédiger un tutoriel sur le plugin WebP image WebP. Cet article décrira les bases de WebP, pourquoi il a été inventé et comment implémenter des images webp dans WordPress.
La recherche indique que vous ne donnez qu’une fraction de seconde pour décider si vous allez lire quelque chose sur le Web ou non. Les images jouent un rôle important pour attirer votre attention. Depuis la croissance d'Internet, nous prenons chaque jour des milliards d'images et de photos. Depuis mai 2017, Google a annoncé que plus de 1,2 milliard de photos seraient téléchargées sur le Google Photos Tous les jours, les images nécessitent beaucoup de bande passante lorsque vous les publiez en ligne, ce qui entraîne une expérience Web plus lente que d'habitude.
Vous connaissez les formats JPEG, PNG, GIF, non? Il y a un nouveau gamin dans le bloc. WebP! Oui c'est vrai. WebP est un format d'image de nouvelle génération développé par Google, la société que nous aimons tous pour leurs autres produits tels que Google Maps, YouTube et Google Search.
Qu'est-ce que WebP? Pourquoi WebP?
.webp est un format de fichier image développé par Google
WebP est un format de fichier image. Si vous ne savez pas ce qu'est un format de fichier, laissez-moi google pour vous. Chaque image que vous voyez sur le Web a un format de fichier. Les formats de fichier image les plus courants sont JPG, JPEG, GIF, PNG, BMP. Maintenant, il y en a un nouveau, WEBP. Ne soyez donc pas frustré si votre ami vous a envoyé une image au format .webp et que vous ne pouvez pas l’ouvrir, car vous n’avez pas le logiciel pour l’ouvrir.
Dans Google Pagespeed Insights, vous avez peut-être remarqué la recommandation suivante appelée "servir des images dans des formats de nouvelle génération".
Les formats d'image de nouvelle génération sont des formats de fichier qui incluent un algorithme de compression intégré au sein même du fichier. Cela permet aux navigateurs de charger ces images bien plus rapidement que d’autres formats de fichier image.
Les formats d'image tels que WebP offrent souvent une meilleure compression que les formats PNG ou JPEG, ce qui signifie des téléchargements plus rapides et une consommation de données inférieure. – Description de Google des formats d’image de nouvelle génération. (Vraiment utile, non?)
Si vous utilisez WordPress, il est fort probable que vous diffusiez toutes vos images, telles que les JPEG, les GIF et les PNG. Eh bien, maintenant vous pouvez les servir aussi .webp. Cela augmentera considérablement la vitesse de chargement de votre site Web.
Cependant, servir des images .webp ne signifie pas que vous devriez complètement vous éloigner de PNG ou de JPG. Parce que beaucoup de navigateurs, y compris Le navigateur Safari d’Apple, avec leur navigateur Safari iOS, tous les deux ne pas avoir le support WebP.
C’est dommage, non? Une grande partie de votre trafic pourrait utiliser Safari via iOS et macOS. Ainsi, si vous abandonnez complètement le support des formats d'image normaux, ils verront des images vierges.
En ce moment, Opera, Chrome, Firefox et Edge prennent en charge le format d'image moderne WebP. Firefox a annoncé support pour WebP images dans le futur, et il en est encore question dans ce fil. Safari et Internet Explorer vieillissant sont complètement laissés de côté.
Comparaison de la taille de l'image: WebP et JPEG
WebP utilise à la fois des méthodes de compression «avec perte» et «sans perte». Selon Données WebP de Google, Les images WebP sont plus petites que les fichiers d’image ordinaires.
- 25-34% plus petit de taille que des images JPEG comparables.
- 26% plus petit de taille par rapport aux PNG.
Nous avons effectué des tests de comparaison JPG à WebP. Nous avons découvert que nous pouvions réduire la taille des fichiers de plus ou moins 85%. C’est énorme lorsque vous servez beaucoup d’images.
| NOM DE FICHIER | JPG ORIGINAL | JPG COMPRESSÉ | FORMAT WEBP | DIFFERENCE DE TAILLE% |
|---|---|---|---|---|
| fichier1.jpg | 758 Ko | 685 Ko | 109 Ko | 86% |
| fichier2.jpg | 599 Ko | 529 Ko | 58,8 Ko | 90% |
| fichier3.jpg | 960 Ko | 881 Ko | 200 Ko | 79% |
| fichier4.jpg | 862 Ko | 791 Ko | 146 Ko | 83% |
| fichier5.jpg | 960 Ko | 877 Ko | 71,7 Ko | 93% |
J'ai été étonné de voir autant de différence. 85,87% est un nombre très impressionnant!
Note gentille: WordPress ne prend pas en charge le téléchargement direct d'images au format WebP via le Media Uploader. Ainsi, la meilleure approche consiste à télécharger des fichiers jpg / png et les formats de serveur WebP de ces images sur les périphériques pris en charge.
Ajouter le support WebP via .htaccess dans Apache Server
Votre serveur d'hébergement Web risque de ne pas connaître ce nouveau format de fichier jusqu'à ce que vous le déclariez dans le fichier .htaccess. Si vous utilisez cPanel (ou un serveur Apache) pour héberger votre site Web, vous pouvez ajouter des règles.
Ouvrez votre .htacccess fichier de public_html. Vous pouvez ajouter le type MIME suivant pour dans votre fichier .htaccess
# Servir les images avec le type de mime correct
AddType image / webp .webp
# Cache d'installation
Expires Actif sur
ExpiresByType image / webp A2592000Ajouter la prise en charge de WebP sur le serveur nginx
Si vous utilisez un serveur Nginx, vous pouvez ajouter le code suivant à votre fichier de configuration Nginx. Le fichier de configuration Nginx est généralement situé à /etc/nginx/nginx.conf . Si cela n’existe pas là-bas, c’est peut-être aussi /usr/local/nginx/conf/nginx.conf ou /usr/local/etc/nginx/nginx.conf .
emplacement ~ ^ (/ chemin / vers / vos / images. +) . (jpe? g | png) $ {
if ($ http_accept ~ * webp) {
set $ webp "A";
}
if ($ request_filename ~ (. +) . (png | jpe? g) $) {
set $ file_without_ext $ 1;
}
if (-f $ file_without_ext.webp) {
set $ webp "$ {webp} E";
}
si ($ webp = AE) {
add_header Vary Accepter;
réécrire ^ (. +) . (png | jpe? g) $ $ 1.webp break;
}
}Quels sont d'excellents plugins WebP WordPress?
Si vous recherchez un plugin image WebP pour WebP, vous êtes au bon endroit. Il existe de nombreux plugins qui vous aident à servir des images WebP dans WordPress.
1. Livraison d'images WebP via CacheEnabler et Optimus Image Optimizer
Vous pouvez utiliser deux plugins pour activer le support WebP. Cache Enabler est l'un des meilleurs plugins WebP pour WordPress.
Vous pouvez facilement servir des images WebP en utilisant quelques plugins. Le premier du lot est Cache Enabler. Cache Enabler est un plugin de cache radicalement simple pour WordPress. (Lire aussi: Top 8 des meilleurs plugins de mise en cache WordPress comparés)
Vous avez besoin d'un autre plugin pour convertir vos images existantes en WebP. Vous pouvez utiliser Optimus Image Optimizer plugin pour convertir vos images au WebP automatiquement. Le plugin créera automatiquement une version WebP de vos images et les enregistrera dans votre médiathèque WordPress.
Cache Enabler détermine de manière intelligente si le navigateur prend en charge WebP ou non. Ensuite, il fournit WebP aux navigateurs pris en charge. Si le périphérique n'est pas pris en charge, Cache Enabler envoie des fichiers JPEG et / ou PNG à ces périphériques. Il effectue toutes les vérifications de compatibilité et sert automatiquement pour vous.
2. Servir des images WebP avec WebP Express Plugin
Vous pouvez utiliser un autre plugin gratuit pour servir des images WebP, à savoir Plugin WebP Express,
Le plugin génère automatiquement des images WebP pour les navigateurs prenant en charge WebP. Ce que vous faisiez avec deux plugins peut être fait avec un. Le plug-in peut servir des fichiers JPEG / PNG aux utilisateurs de périphériques WebP Safari / non pris en charge. Cette option fonctionne sur toutes les images de votre site, y compris celles de la médiathèque, des galeries et des thèmes.
Une fois le plugin installé, vous pouvez facilement cliquer sur “Démarrer la conversion”Pour commencer à convertir vos images.
C'est un excellent plugin gratuit qui fait tout pour vous en quelques clics.
Emballer
WebP est un format de fichier très efficace pour les images, permettant d'économiser des centaines de pétaoctets de données. Google pousse agressivement avec WebP. Cependant, la résistance de Apple n’existe que pour autant. Apple propose son propre format HEIC, qui, selon eux, représente l'avenir du format de fichier image.
