Cependant, la livraison d'images via WebP n'est pas facile. Cela dépend du serveur Web de votre serveur, du cdn sélectionné, du thème, des plugins de mise en cache, etc.
Ce guide vous aidera à fournir des images WebP à WordPress de trois manières.
Qu'est-ce que WebP ?
Nouveau format d'image pour le Web
par Google
WebP est un format d'image (comme png et jpg) développé par Google. Les images WebP (.webp) ont tendance à être beaucoup plus petites, ce qui accélère les sites Web et utilise moins de bande passante.
Selon l'image, vous pouvez réduire la taille de 25% à 70%.
JPEG, PNG, GIF, etc. ont leurs avantages et leurs inconvénients. Le tableau ci-dessous vous donnera une idée :
| JPG | GIF | PNG | SVG | |
| Vecteur | ❌ | ❌ | ❌ | ✅ |
| Trame | ✅ | ✅ | ✅ | ❌ |
| Transparence | ❌ | ✅ | ✅ | ✅ |
| Animation | ❌ | ✅ | ✅ | ✅ |
| Perdu | ✅ | ❌ | ❌ | ❌ |
WebP a presque toutes les fonctionnalités mentionnées ci-dessus ! Alors pourquoi ne pouvons-nous pas utiliser WebP partout ?
Pourquoi ne pas utiliser WebP partout ?
Comme vous pouvez le constater, seuls 80 % des appareils ne prennent en charge que WebP. Non seulement les navigateurs hérités, Safari/iOS Safari ne prend toujours pas en charge WebP.
Pourquoi est-il si difficile de servir WebP ?
Comme vous l'avez remarqué, nous livrons des images en fonction du navigateur. Si le navigateur ne prend pas en charge WebP, nous devons leur fournir l'image originale (jpg/png/gif).
Il existe deux manières principales de servir WebP :
Utilisation de la balise d'image
On peut utiliserimagetag pour dire au navigateur que nous avons un format WebP. Si le navigateur le prend en charge, l'image standard/de secours sera chargée.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Par réponse différente
Dans une réponse différente, comme d'habitude, vous avez un fichier. Exactement:
<img src="img.jpg" />Une URL d'image prend en charge la livraison de fichiers jpg et webp. C'est ce que fait le serveur.
Même s'il s'agit d'une extension de fichier .jpg, si le navigateur prend en charge WebP, la réponse sera WebP. Aussi appelé "réponse diversifiée".
Balise d'image vs réponse diverse
Chacun a ses avantages et ses inconvénients. Voici un tableau comparatif :
| balise d'image | Réponse diversifiée | |
|---|---|---|
| Fonctionne avec des images d'arrière-plan | ❌ | ✅ |
| Compatible CDN | ✅ | ✅ (juste quelques-uns) |
| Le serveur doit être configuré | ❌ | ✅ (nginx) |
| Fonctionne avec le chargement paresseux | ✅ | ✅ |
Comment servir des images en WebP dans WordPress ?
Méthode #1 - Utiliser CDN uniquement avec la conversion fly WebP
C'est probablement la solution la plus simple. Certains fournisseurs de CDN prennent actuellement en charge la conversion d'image en WebP à la volée ainsi que l'optimisation d'image.
Voici quelques-uns:
- LapinCDN
- Cloudflare avec polonais (plan Pro)
- Cloudinaire
- Images adaptatives ShortPixel (utilise StackPath CDN)
- Compresser WP
Vous pouvez également économiser de l'espace disque en utilisant cette méthode, car vous n'avez pas à stocker à la fois les images WebP normales et converties.
LapinCDN
BunnyCDN est livré avec Bunny Optimizer, qui peut compresser des images et les convertir en WebP à la volée.
Méthode #2 - Utiliser Diverse Response + CDN
Comme décrit ci-dessus, une "réponse variée" aura une seule URL d'image qui peut servir à la fois des images WebP et non Webp en fonction du navigateur demandé.
Nous devons également choisir le bon CDN qui prend en charge les en-têtes de requête WebP en tant que clé de cache. Sinon, une fois l'image WebP mise en cache sur le serveur, elle sera livrée aux navigateurs qui ne prennent pas en charge WebP.
Personnalisation de la réponse variée dans WordPress
Le moyen le plus simple de configurer une réponse riche pour WebP dans WordPress consiste à utiliser le plugin WebP Express. Installez simplement le plugin et cliquez sur "Enregistrer les paramètres et forcer de nouvelles règles .htaccess".
WebP Express configurera le convertisseur WebP et écrasera les règles de sorte que lorsqu'il recevra une demande, il convertira les images en WebP à la volée, et si le navigateur ne prend pas en charge WebP, l'image par défaut sera livrée.
Si vous êtes à Nginx
WebP Express ajoute les règles de réécriture '.htaccess' nécessaires, mais ne fonctionne que sur un serveur Apache, LiteSpeed ou OpenLiteSpeed. Si vous utilisez Nginx, vous devez modifiernginx.configet ajoutez le code suivant :
# Règles WebP Express# --------------------emplacement ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Accept;expire 365j;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Acheminer les demandes de webps inexistants vers l'emplacement du convertisseur ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (les règles WebP Express se terminent ici)Le code ci-dessus ajoute les en-têtes de réponse requis (la gestion du cache varie également) et tente de fournir WebP s'il existe, sinon le redirige vers le convertisseur (en fonction de la prise en charge du navigateur)
Fournisseurs CDN prenant en charge Diverse Response
Si votre fournisseur CDN ne prend pas en charge WebP comme clé de mise en cache, les fichiers WebP seront livrés aux navigateurs qui ne prennent pas en charge WebP. De même, il est possible que des images non Webp soient livrées aux navigateurs pris en charge.
LapinCDN , CléCDN , CDN Google et de nombreux autres fournisseurs de CDN prennent en charge WebP en tant que clé de cache. Assurez-vous de les activer dans les paramètres.
VLapinCDN :
VCléCDN :
Utilisez-vous le forfait gratuit de Cloudflare ?
Malheureusement, le plan gratuit de Cloudflare ne prend pas en charge WebP en tant que clé de cache. Utilisez un CDN comme BunnCDN ou passez à leur plan professionnel.
Mettre en place une réponse diversifiée + CDN avec des hébergeurs populaires
Assurez-vous que WebP Express est installé.
- Kinsta ou WP Engine - contactez leur équipe de support pour ajouter la configuration Nginx ci-dessus et inclure la clé de mise en cache WebP dans leur CDN (KeyCDN).
- Cloudways - installez simplement WebP Express et enregistrez les paramètres à l'aide de .htacess. Parce que Cloudways utilise une approche hybride Apache + Nginx, cela fonctionne immédiatement.
- SiteGound - Contactez le support pour ajouter la configuration Nginx. Utilisez un CDN pris en charge comme ci-dessus.
- Serveur LiteSpeed / OpenLiteSpeed / Apache - installez simplement WebP Express et enregistrez les paramètres avec '.htacess'. Utilisez également un CDN pris en charge comme ci-dessus.
- VPS personnalisé avec Nginx (pile LEMP) - Configuration
nginx.confet utilisez un CDN pris en charge comme ci-dessus.
Méthode #3 - Utiliser une balise d'image
Si les deux méthodes ci-dessus ne fonctionnent pas pour vous, vous pouvez utiliser la balise image. Il ne nécessite pas de configuration de serveur (édition de nginx.conf) et prend en charge tous les fournisseurs de CDN.
L'utilisation de cette méthode modifiera le code HTML pour la livraison WebP. Cela ne fonctionnera pas avec les images d'arrière-plan, est incompatible avec certains thèmes, les plugins de mise en cache, les plugins de chargement paresseux, etc.
Si vous utilisez cette méthode, toutes les balises img seront converties comme ceci :
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Si le navigateur prend en charge WebP, le fichier correspondant est livré ; sinon, une image normale est livrée.
Personnalisation de la balise d'image pour WebP dans WordPress
Le moyen le plus simple de configurer une balise d'image consiste à utiliser WebP Express.
Réglez le mode de fonctionnement sur "CDN friendly" et activez "Alter HTML".
Conclusion
Je souhaite que le jour vienne où tous les navigateurs prendront en charge WebP !
Si vous pouvez dépenser quelques dollars par mois, le moyen le plus simple et le plus efficace consiste à utiliser un CDN comme BunnyCDN, qui convertira les images en WebP à la volée. Sinon, respectez la méthode n ° 2 que j'ai mentionnée ci-dessus.
