↓ Aller au contenu
Cryptolab

Optimiser ses images pour le web : WebP, le sauveur de la performance

·650 mots·4 mins
Web Pagespeed Web Seo Images Hugo
Foudreclair
Auteur
Foudreclair
Cryptolab est un blog personnel où je documente mes expérimentations techniques : infra, self-hosting, réseau, crypto et projets parfois inutiles, souvent instructifs.
Sommaire

En travaillant sur cryptolab.re, j’ai voulu mesurer concrètement les performances du site côté utilisateur.
J’ai donc lancé une analyse via Google PageSpeed Insights.

Résultat : score de 50 sur mobile.

Le diagnostic était clair : des images trop lourdes, principalement :

  • mon avatar
  • le logo du blog

Ces images étaient en PNG, un format très pratique pour l’édition, mais clairement inadapté au web moderne.

Pourquoi les images pénalisent fortement PageSpeed
#

Sur mobile, Google est particulièrement exigeant :

  • connexions plus lentes
  • CPU moins puissant
  • rendu critique au-dessus de la ligne de flottaison

Les images sont souvent :

  • la ressource la plus lourde d’une page
  • chargées très tôt
  • bloquantes pour le LCP (Largest Contentful Paint)

Optimiser les images est donc l’un des meilleurs quick wins possibles pour améliorer un score PageSpeed.

Pourquoi j’ai choisi WebP (et pas un autre format)
#

Avant de convertir mes images, j’ai comparé les principaux formats existants.

PNG
#

  • Excellente qualité
  • Transparence
  • Très lourd
  • Aucune compression moderne

Parfait pour le design, mauvais pour la production web.

JPEG
#

  • Bonne compatibilité
  • Compression correcte
  • Pas de transparence
  • Compression moins efficace que les formats récents

Encore acceptable, mais clairement dépassé.

AVIF
#

  • Compression exceptionnelle
  • Très moderne
  • Encodage lent
  • Support et tooling encore inégaux
  • Intégration plus complexe dans un blog existant

Excellent sur le papier, mais pas toujours le plus pragmatique.

WebP (mon choix)
#

  • Compression bien meilleure que JPEG et PNG
  • Supporte la transparence
  • Supporté par tous les navigateurs modernes
  • Recommandé explicitement par Google
  • Très simple à intégrer sur un site statique

WebP est aujourd’hui le meilleur compromis entre performance, compatibilité et simplicité.

La solution cwebp
#

cwebp est un outil en ligne de commande permettant de convertir des images (PNG, JPEG, etc.) vers le format WebP.

Il fait partie de la suite officielle libwebp, développée et maintenue par Google, le créateur du format WebP.

👉 Concrètement, cwebp permet :

  • de convertir des images existantes vers WebP
  • de régler finement la qualité et le niveau de compression
  • d’optimiser le poids des images pour le web
  • d’automatiser la conversion dans des scripts ou des pipelines CI/CD

C’est l’outil de référence, utilisé aussi bien localement que dans des environnements de production.

Pourquoi utiliser cwebp plutôt qu’un service en ligne ?
#

  • Pas de dépendance à un site tiers
  • Pas d’upload d’images (meilleur pour la confidentialité)
  • Résultats reproductibles
  • Intégrable dans des scripts ou des workflows automatisés
  • Outil maintenu officiellement par Google

Pour un blog statique ou un site, c’est clairement la solution la plus propre.

Dépôt officiel
#

Le projet est open source et disponible sur GitHub : Dépôt Github

Installation de cwebp
#

Windows
#

choco install webp -y

PS : pour ceux qui n’ont pas chocolatey c’est un gestionnaire de package sous windows. Pour l’installer ça se passe ici

Debian / Ubuntu
#

sudo apt update
sudo apt install webp -y

macOS
#

brew install webp

Conversion des images en WebP
#

cwebp ./avatar.png -q 80 -m 6 -mt -o avatar.webp

Explication des options
#

  • cwebp : convertisseur vers le format WebP
  • avatar.png : image source
  • -q 80 : qualité (excellent compromis poids / rendu)
  • -m 6 : méthode de compression (plus élevé = plus efficace)
  • -mt : multi-threading
  • -o avatar.webp : fichier de sortie

Résultat sur PageSpeed Insights
#

Au final c’est plutôt pas mal, je suis passé à une note de 95 sur mobile !

Résultat de l’analyse mobile : ici

Pagespeed cryptolab.re

Autant vous dire que toutes les prochaines images seront désormais en webp (en plus d’économiser de la place dans mon dépôt git)

Conclusion
#

Optimiser ses images m’a pris moins de 10 minutes, sans refactor ni impact.

Résultat :

  • meilleures performances mobiles
  • meilleur score SEO
  • meilleure expérience utilisateur

Optimiser ses images est l’un des leviers les plus simples et efficaces pour améliorer la performance d’un site web.

Bon et maintenant pour atteindre le 100 c’est autre chose.Qui sait ça sera peut être l’objet d’un prochain article ?

Articles connexes