Doingbuzz – Le pouvoir de l'information à votre portée
Qu’est ce que WebP et comment utiliser ce format d’image dans WordPress
27/11/2019 à 00h15 par La redaction

Avec des images représentant typiquement 50% du poids d’une page web moyenne, tout ce que vous pouvez faire pour optimiser vos images vous permet non seulement d’économiser de l’espace sur votre serveur, mais aussi de servir vos pages plus rapidement.

Heureusement, avec le format d’image WebP, vous pouvez créer des images plus petites et plus riches qui sont en moyenne 26% plus legère que les PNG et 25-34% en moins comparé au JPEG – tout en gardant la même qualité.

Dans cet article, nous allons voir ce qu’est WebP et comment utiliser ce format d’image sur votre site WordPress pour réduire considérablement la taille de vos images.

Qu’est-ce que WebP ?

WebP est un format de fichier image créé par l’équipe Web de Google, développé pour remplacer les formats JPEG, PNG et GIF, tout en supportant la compression, la transparence et les animations.

Il a été annoncé pour la première fois en septembre 2010 en tant que nouveau standard ouvert pour les images en couleurs compressés avec perte sur le Web, produisant des fichiers de plus petite taille et de qualité comparable à celle du JPEG.

La prise en charge des images sans perte et avec transparence a été annoncée en 2012, faisant de WebP une alternative au format PNG.

La compression avec perte de WebP utilise le codage prédictif pour coder une image – la même méthode utilisée par le codec vidéo VP8 pour compresser les images-clés dans les vidéos. Le codage prédictif fonctionne en utilisant les valeurs des blocs de pixels voisins pour prédire la valeur d’un bloc, puis ne code que la différence.

La compression sans perte de WebP utilise des fragments d’image déjà vus pour reconstruire de nouveaux pixels, et peut utiliser une palette locale si aucune correspondance n’est trouvée.

Comme vous pouvez le voir dans les exemples ci-dessous de la galerie WebP de Google, il n’y a pas de différence notable de qualité entre les images JPEG à gauche et les versions WebP à droite. Ce que vous ne voyez pas, à moins de vérifier la taille du fichier, c’est que les images WebP sont plus de 30% plus petites que les images JPEG.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress
Images JPEG vs images WebP

Or, comme je l’ai déjà dit ici, quand il s’agit du poids d’une page, la taille compte. Après tout, plus la taille du fichier d’une page Web est petite, plus son chargement sera rapide. C’est aussi simple que ça 😉

Donc, en réduisant la taille des fichiers de vos images à l’aide d’un format tel que WebP, en combinaison avec d’autres techniques, telles que l’utilisation de la fonction de chargement en lazy load, vous pouvez servir des images qui sont plus petites et assurer que vos pages soient livrées plus rapidement aux visiteurs de votre site.

Prise en charge du format WebP dans les navigateurs

Vous vous demandez peut-être, puisque WebP existe depuis huit ans maintenant, pourquoi n’est-il pas plus populaire ? Pourquoi utilisons-nous encore le JPEG et le PNG alors que WebP peut produire des fichiers de plus petite taille et de qualité comparable ?

Et bien, comme beaucoup de technologies sur le web qui ont du mal à trouver leurs marques, tous les navigateurs modernes ne supportent pas WebP. Selon Can i use…, les navigateurs qui prennent en charge WebP incluent Chrome, Opera, Opera, Opera Mini, le navigateur Android et Chrome pour Android.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress
Quels navigateurs supportent les images WebP ?

Microsoft a annoncé qu’il prendrait en charge WebP dans son navigateur Edge en octobre dernier, et Mozilla a fait une annonce similaire peu après pour Firefox. Maintenant, c’est juste le Safari d’Apple qui traîne en arrière sans aucune compatibilité.

Après avoir d’abord manifesté son intérêt pour la prise en charge du format d’image lorsqu’il a ajouté la prise en charge WebP dans iOS 10 et MacOS Sierra, Apple l’a ensuite remplacée par HEIF, un format d’image basé sur la norme de compression vidéo HEVC (également connu sous les noms H.265 et MPEG-H Part 2).

Bien qu’il n’y ait eu aucune indication récente qu’Apple prendra en charge WebP à l’avenir, la société n’a pas vraiment le choix maintenant que tous les autres grands navigateurs et logiciels d’édition d’images le prennent en charge.

Utilisation du WebP – avec JPEG/PNG comme solution de fallback

Ce n’est pas parce qu’Apple ne supporte pas WebP que vous ne devez pas utiliser le format. Il est possible de fournir des fichiers WebP aux visiteurs qui utilisent des navigateurs pris en charge tout en affichant les fichiers JPEG et PNG comme solution de secours pour les utilisateurs de Safari.

De cette façon, plutôt que de livrer WebP à tous les utilisateurs et de risquer que les utilisateurs de Safari voient des images cassées, vous pouvez vous assurer que tous les visiteurs de votre site voient vos images – tandis que les utilisateurs avec des navigateurs supportés obtiennent une expérience plus rapide.

Mais avant de décider d’utiliser ou non WebP sur votre site, il y a quelques points à garder à l’esprit.

Tout d’abord, sachez que Chrome est le navigateur le plus populaire avec environs 64% de part de marché. Il est donc fort probable que la plupart des visiteurs de votre site seront en mesure de visualiser toutes les images WebP sur votre site.

Et c’est aussi une très bonne idée de vérifier votre Google Analytics pour voir quels navigateurs vos visiteurs utilisent pour savoir s’il faut utiliser cette méthode, ou simplement afficher WebP sans aucune solution de repli.

Comment utiliser WebP avec WordPress

Voici un autre obstacle à l’utilisation de WebP : WordPress ne le supporte pas.

Bien que WordPress prenne en charge les formats de fichier image les plus populaires, notamment JPEG, PNG, GIF et ICO, il n’a pas encore ajouté WebP à cette liste. Cela signifie que vous ne pouvez pas simplement aller télécharger un fichier WebP dans votre médiathèque WordPress car vous obtiendrez cette erreur de sécurité :

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress

Ne vous inquiétez pas, vous pouvez toujours utiliser le format WebP sur votre site WordPress – il vous suffit d’utiliser un plugin.

Par exemple avec le plugin gratuit WebP Express plugin, vous pouvez servir des images WebP générées automatiquement aux navigateurs qui prennent en charge WebP, tout en continuant à servir des images JPEG/PNG aux utilisateurs Safari. Cette option fonctionne sur toutes les images de votre site, y compris celles de la médiathèque, des galeries et des thèmes.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress

La fonction Site Accelerator de Jetpack (anciennement connue sous le nom de Photon) convertit également automatiquement les JPEG et PNG au format d’image WebP.

De plus, vous pouvez également utiliser votre CDN. Les utilisateurs de Cloudflare sur les plans payants peuvent accéder à la fonctionnalité Polish du CDN, qui offre une conversion WebP automatique. Comme les autres solutions que j’ai mentionnées ci-dessus, Polish fonctionne en échangeant les images JPEG et PNG d’une page avec des versions WebP pour les navigateurs qui supportent ce type de fichier.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress

Pour les utilisateurs de WP Rocket, vous serez heureux d’apprendre que la prise en charge de WebP est sur la feuille de route pour la prochaine version de WP Rocket 3.3.

La prise en charge de WebP fait également partie de la feuille de route pour le plugin d’optimisation d’image Imagify.

Comparaison JPG/PNG vs WebP

L’équipe de performance Web de Google promet des images WebP sans perte qui sont 26 % plus petites que les images PNG et des images WebP avec perte de 25 à 34 % plus petites que les images JPEG. J’ai donc fait quelques tests comparatifs pour voir les différences de taille que l’on pouvait obtenir avec WebP.

Comparaison entre JPEG et WebP

Je télécharge six images JPEG aléatoires d’Unsplash, je les compresse (à une moyenne de 90% d’optimisation via OptimiZilla) pour voir quels types d’économies je peux obtenir, puis je convertis les images originales en WebP pour comparer.

Nom JPEG original JPEG Compressé WebP Différence
Image1.jpg 1,6 Mo 1,5 Mo 590,5 ko 60%
Image2.jpg 5,4 Mo 4,7 Mo 2,0 Mo 57%
Image3.jpg 6,6 Mo 5,8 Mo 2,3 Mo 60%
Image4.jpg 4,0 Mo 3,7 Mo 820,9 ko 78%
Image5.jpg 2,5 Mo 2,3 Mo 1,1 ko 52%
Image6.jpg 1,4 Mo 1,3 Mo 419,9 ko 68%

La conversion au WebP a entraîné une diminution moyenne de 50 % de la taille de l’image. Par contre il est possible d’augmenter l’optimisation des JPEG. Par exemple je passe par OptimiZilla qui choisit automatiquement un taux de compression pour les images et qui fait déjà des merveilles concernant l’optimisation du poids sans trop altérer la photo !

C’est pourquoi j’ai été pas mal surpris de voir la différence de taille entre les versions JPEG et WebP de l’image4 (mais le fond uni explique en grande partie cette différence de taille. Ci-dessous, vous pouvez voir les deux versions côte à côte. L’image JPEG à gauche est légèrement plus nette que l’image WebP à droite.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress
JPEG à gauche et WebP à droite

Comparaison entre PNG et WebP

Encore une fois, j’ai choisi six images au hasard, cette fois des fichiers PNG de freepngs.com. Je les ai compressées, puis j’ai converti les images originales en WebP pour les comparer.

Nom PNG original PNG Compressé WebP Différence
Image1.png 428,3 ko 127,4 ko 53,91 ko 58%
Image2.png 569,6 149 ko 73,24 ko 51%
Image3.png 1,3 Mo 328,9 ko 109,51 ko 68%
Image4.png 415,5 ko 112,4 ko 94,57 ko 16%
Image5.png 1,2 Mo 482,7 ko 235,68 ko 51%
Image6.png 2,0 Mo 491 ko 164,01 ko 66%

Les plus grandes différences dans la taille des fichiers concernaient les images détaillées d’une plante à fleurs avec des feuilles et d’une photo d’Angelina Jolie (:p) (image3.png et image6.png, respectivement), tandis que la plus petite différence concernait celle de 2 guitares avec très peu de couleurs (image4.png).

Dans l’ensemble, la conversion de PNG en WebP a entraîné une diminution moyenne de 52 % de la taille des fichiers.

Conclusion

Le format de fichier WebP continue de gagner en popularité et en support, et il y a beaucoup à gagner de ce format de fichier. Non seulement il peut remplacer les formats de fichiers JPEG et PNG (et GIF !) par une compression avec ou sans perte, mais i offre également des tailles de fichiers nettement plus petites.

Il n’y a vraiment aucun autre format d’image ou outil d’optimisation d’image pour le Web qui peut atteindre des tailles de fichier plus petites sans perte notable de qualité comme WebP le peut.

Espérons que nous verrons WordPress – et Apple – introduire la prise en charge de WebP à l’avenir. D’ici là, je vous encourage à expérimenter ce format de fichier et à consulter d’autres outils qui peuvent vous aider à servir des images WebP sur votre site WordPress.

RECEVEZ NOTRE NEWSLETTER ET ALERTE MAIL

Saisissez votre adresse e-mail pour vous abonner à Doingbuzz et recevoir une notification de chaque nouvel article par e-mail.

Rejoignez les 55 319 autres abonnés

Ne partez pas sans partager :

Contenu sponsorisé

Doingbuzz sur Télégram: Si vous êtes sur Télégramme abonnez vous !!
😍 ACTUALITE via Telegram
😍 Offre d'emploi via Telegram .
groupe emploi whatsapp doingbuzz -🇧🇯 Bénin- 🇧🇯 Bénin - 🇧🇯 Bénin -🇧🇯 Bénin-🇳🇪 Niger -🇳🇪 Niger - 🇸🇳 Sénégal - 🇸🇳 Sénégal - 🇸🇳 Sénégal - 🇹🇬 Togo - 🇹🇬 Togo - 🇹🇬 Togo - 🇹🇬 Togo - 🇹🇬 Togo - 🇹🇬 Togo - 🇹🇬 Togo - 🇹🇬 Togo 🇨🇮- Côte d'Ivoire 🇨🇮- Côte d'Ivoire 🇨🇮- Côte d'Ivoire -🇨🇲 Cameroun -🇨🇲 Cameroun -🇨🇲 Cameroun -🇨🇲 Cameroun - 🇫🇷 France - 🇫🇷 France - 🇲🇱 Mali - 🇧🇫 Burkina Faso - 🇧🇫 Burkina Faso -🇬🇦 Gabon -🇬🇳 Guinéé - 🇲🇱 Mali - 🇲🇱 Mali - 🇨🇩 Congo RDC - 🇨🇬 Congo Brazzaville -🇲🇦 Maroc - 🇹🇩 Tchad -Pour les autres pays

NB: NE PAYEZ AUCUN FRAIS DE DOSSIERS POUR UNE OFFRE D’EMPLOI

Site de petites annonces/ site de vente et d'achat 100% Togo

togopapel Offre d'emploi et concours

Plus sur Doingbuzz

Voici ce que Fally Ipupa a fait de son argent après son concert à Abidjan

17/01/2021

Voici ce...

Après son exploit à Abidjan, Fally Ipupa...
Togo / Enseignement : le secrétaire du SET est arrêté

17/01/2021

Togo /...

Le rapporteur du  SET arrêté.  La nouvelle...
coach Zimbabwe chan

17/01/2021

CHAN 2021...

Le Championnat d'Afrique des Nations CHAN édition...
Bè-Kpota : Des habitants expulsés de deux maisons se retrouvent dans une misère indescriptible

17/01/2021

Bè-Kpota :...

  Pauvreté. Dénuement. Ces mots sont peu...
CHAN 2021: Que cherche Claude Leroy dans le nid des éperviers locaux au Cameroun?

17/01/2021

CHAN 2021:...

Les éperviers locaux sont depuis vendredi sur...
Patrice Talon

17/01/2021

Présidentielle au...

Elu en 2016 à la tête du...
Togo: Les championnats D1 et D2 reprennent service le 20 mars prochain

17/01/2021

Togo: Les...

Dans un communiqué adressé aux présidents et...
WhatsApp repousse la modification de ses conditions d’utilisation

17/01/2021

WhatsApp repousse...

Suite à de vives critiques après l’annonce...
CHAN 2021: Abalo Dosseh « Les joueurs sont très concernés et sont concentrés

17/01/2021

CHAN 2021:...

  La délégation togolaise est bel et...
booba et mhd

16/01/2021

Booba annonce...

Le featuring entre Booba et MHD est...
Soldat

16/01/2021

Un soldat...

  Une histoire d'assassinat secoue actuellement la...
Togo : le couvre-feu de nouveau décrété ( Gouvernement)

16/01/2021

Togo :...

La lutte contre le coronavirus n'est pas...
Profanation de la Bible, que disent les autorités togolaises ?

16/01/2021

Profanation de...

La scène peu recommandable offerte par l’artiste...
Togo : Le MEJ rend propre le CMS de Kévé

16/01/2021

Togo :...

Le Mouvement pour l'Épanouissement des Jeunes, (MEJ)...
CHAN 2021 : les mots de Victoire Dogbé aux Éperviers du Togo

16/01/2021

CHAN 2021...

Les éperviers locaux ont reçu le drapeau...
USA : les émeutiers du Capitole voulaient assassiner les élus

16/01/2021

USA : les émeutiers du...

Les inquiétudes autour de l'assaut des pro-Trump...
États-Unis : record du nombre de femmes au Congrès

16/01/2021

États-Unis :...

Le Congrès américain n'aura jamais compté autant...
Côte d'Ivoire : Guillaume Soro adresse un message émouvant à Aïcha Koné

16/01/2021

Côte d’Ivoire...

En dehors d'être un fervent politicien, Guillaume Soro est...
Analyse : Pourquoi quitter WhatsApp pour d'autres applications est inutile ?

15/01/2021

Analyse :...

  Avec plus de 1 Milliard d'utilisateurs...
tina glamour

15/01/2021

Tina Glamour...

Il y a de ces hommes qui...

Avec des images représentant typiquement 50% du poids d’une page web moyenne, tout ce que vous pouvez faire pour optimiser vos images vous permet non seulement d’économiser de l’espace sur votre serveur, mais aussi de servir vos pages plus rapidement.

Heureusement, avec le format d’image WebP, vous pouvez créer des images plus petites et plus riches qui sont en moyenne 26% plus legère que les PNG et 25-34% en moins comparé au JPEG – tout en gardant la même qualité.

Dans cet article, nous allons voir ce qu’est WebP et comment utiliser ce format d’image sur votre site WordPress pour réduire considérablement la taille de vos images.

Qu’est-ce que WebP ?

WebP est un format de fichier image créé par l’équipe Web de Google, développé pour remplacer les formats JPEG, PNG et GIF, tout en supportant la compression, la transparence et les animations.

Il a été annoncé pour la première fois en septembre 2010 en tant que nouveau standard ouvert pour les images en couleurs compressés avec perte sur le Web, produisant des fichiers de plus petite taille et de qualité comparable à celle du JPEG.

La prise en charge des images sans perte et avec transparence a été annoncée en 2012, faisant de WebP une alternative au format PNG.

La compression avec perte de WebP utilise le codage prédictif pour coder une image – la même méthode utilisée par le codec vidéo VP8 pour compresser les images-clés dans les vidéos. Le codage prédictif fonctionne en utilisant les valeurs des blocs de pixels voisins pour prédire la valeur d’un bloc, puis ne code que la différence.

La compression sans perte de WebP utilise des fragments d’image déjà vus pour reconstruire de nouveaux pixels, et peut utiliser une palette locale si aucune correspondance n’est trouvée.

Comme vous pouvez le voir dans les exemples ci-dessous de la galerie WebP de Google, il n’y a pas de différence notable de qualité entre les images JPEG à gauche et les versions WebP à droite. Ce que vous ne voyez pas, à moins de vérifier la taille du fichier, c’est que les images WebP sont plus de 30% plus petites que les images JPEG.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress
Images JPEG vs images WebP

Or, comme je l’ai déjà dit ici, quand il s’agit du poids d’une page, la taille compte. Après tout, plus la taille du fichier d’une page Web est petite, plus son chargement sera rapide. C’est aussi simple que ça 😉

Donc, en réduisant la taille des fichiers de vos images à l’aide d’un format tel que WebP, en combinaison avec d’autres techniques, telles que l’utilisation de la fonction de chargement en lazy load, vous pouvez servir des images qui sont plus petites et assurer que vos pages soient livrées plus rapidement aux visiteurs de votre site.

Prise en charge du format WebP dans les navigateurs

Vous vous demandez peut-être, puisque WebP existe depuis huit ans maintenant, pourquoi n’est-il pas plus populaire ? Pourquoi utilisons-nous encore le JPEG et le PNG alors que WebP peut produire des fichiers de plus petite taille et de qualité comparable ?

Et bien, comme beaucoup de technologies sur le web qui ont du mal à trouver leurs marques, tous les navigateurs modernes ne supportent pas WebP. Selon Can i use…, les navigateurs qui prennent en charge WebP incluent Chrome, Opera, Opera, Opera Mini, le navigateur Android et Chrome pour Android.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress
Quels navigateurs supportent les images WebP ?

Microsoft a annoncé qu’il prendrait en charge WebP dans son navigateur Edge en octobre dernier, et Mozilla a fait une annonce similaire peu après pour Firefox. Maintenant, c’est juste le Safari d’Apple qui traîne en arrière sans aucune compatibilité.

Après avoir d’abord manifesté son intérêt pour la prise en charge du format d’image lorsqu’il a ajouté la prise en charge WebP dans iOS 10 et MacOS Sierra, Apple l’a ensuite remplacée par HEIF, un format d’image basé sur la norme de compression vidéo HEVC (également connu sous les noms H.265 et MPEG-H Part 2).

Bien qu’il n’y ait eu aucune indication récente qu’Apple prendra en charge WebP à l’avenir, la société n’a pas vraiment le choix maintenant que tous les autres grands navigateurs et logiciels d’édition d’images le prennent en charge.

Utilisation du WebP – avec JPEG/PNG comme solution de fallback

Ce n’est pas parce qu’Apple ne supporte pas WebP que vous ne devez pas utiliser le format. Il est possible de fournir des fichiers WebP aux visiteurs qui utilisent des navigateurs pris en charge tout en affichant les fichiers JPEG et PNG comme solution de secours pour les utilisateurs de Safari.

De cette façon, plutôt que de livrer WebP à tous les utilisateurs et de risquer que les utilisateurs de Safari voient des images cassées, vous pouvez vous assurer que tous les visiteurs de votre site voient vos images – tandis que les utilisateurs avec des navigateurs supportés obtiennent une expérience plus rapide.

Mais avant de décider d’utiliser ou non WebP sur votre site, il y a quelques points à garder à l’esprit.

Tout d’abord, sachez que Chrome est le navigateur le plus populaire avec environs 64% de part de marché. Il est donc fort probable que la plupart des visiteurs de votre site seront en mesure de visualiser toutes les images WebP sur votre site.

Et c’est aussi une très bonne idée de vérifier votre Google Analytics pour voir quels navigateurs vos visiteurs utilisent pour savoir s’il faut utiliser cette méthode, ou simplement afficher WebP sans aucune solution de repli.

Comment utiliser WebP avec WordPress

Voici un autre obstacle à l’utilisation de WebP : WordPress ne le supporte pas.

Bien que WordPress prenne en charge les formats de fichier image les plus populaires, notamment JPEG, PNG, GIF et ICO, il n’a pas encore ajouté WebP à cette liste. Cela signifie que vous ne pouvez pas simplement aller télécharger un fichier WebP dans votre médiathèque WordPress car vous obtiendrez cette erreur de sécurité :

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress

Ne vous inquiétez pas, vous pouvez toujours utiliser le format WebP sur votre site WordPress – il vous suffit d’utiliser un plugin.

Par exemple avec le plugin gratuit WebP Express plugin, vous pouvez servir des images WebP générées automatiquement aux navigateurs qui prennent en charge WebP, tout en continuant à servir des images JPEG/PNG aux utilisateurs Safari. Cette option fonctionne sur toutes les images de votre site, y compris celles de la médiathèque, des galeries et des thèmes.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress

La fonction Site Accelerator de Jetpack (anciennement connue sous le nom de Photon) convertit également automatiquement les JPEG et PNG au format d’image WebP.

De plus, vous pouvez également utiliser votre CDN. Les utilisateurs de Cloudflare sur les plans payants peuvent accéder à la fonctionnalité Polish du CDN, qui offre une conversion WebP automatique. Comme les autres solutions que j’ai mentionnées ci-dessus, Polish fonctionne en échangeant les images JPEG et PNG d’une page avec des versions WebP pour les navigateurs qui supportent ce type de fichier.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress

Pour les utilisateurs de WP Rocket, vous serez heureux d’apprendre que la prise en charge de WebP est sur la feuille de route pour la prochaine version de WP Rocket 3.3.

La prise en charge de WebP fait également partie de la feuille de route pour le plugin d’optimisation d’image Imagify.

Comparaison JPG/PNG vs WebP

L’équipe de performance Web de Google promet des images WebP sans perte qui sont 26 % plus petites que les images PNG et des images WebP avec perte de 25 à 34 % plus petites que les images JPEG. J’ai donc fait quelques tests comparatifs pour voir les différences de taille que l’on pouvait obtenir avec WebP.

Comparaison entre JPEG et WebP

Je télécharge six images JPEG aléatoires d’Unsplash, je les compresse (à une moyenne de 90% d’optimisation via OptimiZilla) pour voir quels types d’économies je peux obtenir, puis je convertis les images originales en WebP pour comparer.

Nom JPEG original JPEG Compressé WebP Différence
Image1.jpg 1,6 Mo 1,5 Mo 590,5 ko 60%
Image2.jpg 5,4 Mo 4,7 Mo 2,0 Mo 57%
Image3.jpg 6,6 Mo 5,8 Mo 2,3 Mo 60%
Image4.jpg 4,0 Mo 3,7 Mo 820,9 ko 78%
Image5.jpg 2,5 Mo 2,3 Mo 1,1 ko 52%
Image6.jpg 1,4 Mo 1,3 Mo 419,9 ko 68%

La conversion au WebP a entraîné une diminution moyenne de 50 % de la taille de l’image. Par contre il est possible d’augmenter l’optimisation des JPEG. Par exemple je passe par OptimiZilla qui choisit automatiquement un taux de compression pour les images et qui fait déjà des merveilles concernant l’optimisation du poids sans trop altérer la photo !

C’est pourquoi j’ai été pas mal surpris de voir la différence de taille entre les versions JPEG et WebP de l’image4 (mais le fond uni explique en grande partie cette différence de taille. Ci-dessous, vous pouvez voir les deux versions côte à côte. L’image JPEG à gauche est légèrement plus nette que l’image WebP à droite.

Qu'est ce que WebP et comment utiliser ce format d'image dans WordPress
JPEG à gauche et WebP à droite

Comparaison entre PNG et WebP

Encore une fois, j’ai choisi six images au hasard, cette fois des fichiers PNG de freepngs.com. Je les ai compressées, puis j’ai converti les images originales en WebP pour les comparer.

Nom PNG original PNG Compressé WebP Différence
Image1.png 428,3 ko 127,4 ko 53,91 ko 58%
Image2.png 569,6 149 ko 73,24 ko 51%
Image3.png 1,3 Mo 328,9 ko 109,51 ko 68%
Image4.png 415,5 ko 112,4 ko 94,57 ko 16%
Image5.png 1,2 Mo 482,7 ko 235,68 ko 51%
Image6.png 2,0 Mo 491 ko 164,01 ko 66%

Les plus grandes différences dans la taille des fichiers concernaient les images détaillées d’une plante à fleurs avec des feuilles et d’une photo d’Angelina Jolie (:p) (image3.png et image6.png, respectivement), tandis que la plus petite différence concernait celle de 2 guitares avec très peu de couleurs (image4.png).

Dans l’ensemble, la conversion de PNG en WebP a entraîné une diminution moyenne de 52 % de la taille des fichiers.

Conclusion

Le format de fichier WebP continue de gagner en popularité et en support, et il y a beaucoup à gagner de ce format de fichier. Non seulement il peut remplacer les formats de fichiers JPEG et PNG (et GIF !) par une compression avec ou sans perte, mais i offre également des tailles de fichiers nettement plus petites.

Il n’y a vraiment aucun autre format d’image ou outil d’optimisation d’image pour le Web qui peut atteindre des tailles de fichier plus petites sans perte notable de qualité comme WebP le peut.

Espérons que nous verrons WordPress – et Apple – introduire la prise en charge de WebP à l’avenir. D’ici là, je vous encourage à expérimenter ce format de fichier et à consulter d’autres outils qui peuvent vous aider à servir des images WebP sur votre site WordPress.

RECEVEZ NOTRE NEWSLETTER ET ALERTE MAIL

Saisissez votre adresse e-mail pour vous abonner à Doingbuzz et recevoir une notification de chaque nouvel article par e-mail.

Rejoignez les 55 319 autres abonnés

Ne partez pas sans partager :

Laisser votre commentaire