Comment compresser des images pour un site plus rapide

Les audits de vitesse de page pointent systématiquement le même coupable : les images. Une seule photo non compressée de 4 Mo peut peser plus lourd que le HTML, le CSS et le JavaScript combinés d'une page entière, plusieurs fois — et la plupart des images de site web sont bien plus grandes que l'espace où elles sont réellement affichées.

Le plus gros gain : adapter à la taille d'affichage

Une photo envoyée directement depuis un appareil photo de smartphone fait couramment 3000-4000px de large. Si elle s'affiche sur la page à 800px de large, le navigateur télécharge 4 à 6 fois plus de données de pixels qu'il n'en montrera jamais — du gaspillage pur. Redimensionner à une taille proche de la taille d'affichage réelle, avant de compresser, est l'étape à plus fort impact :

• Redimensionner une image

Puis compresser

Après redimensionnement à une dimension raisonnable, compressez en plus pour la taille du fichier :

• Compresseur d'image

Un objectif approximatif : la plupart des photos web paraissent correctes bien en dessous de 200 Ko à des tailles d'affichage raisonnables ; les images de bannière/héro qui remplissent toute la largeur de la fenêtre peuvent raisonnablement aller jusqu'à 300-500 Ko. Les miniatures et icônes devraient représenter une fraction de cela.

Le format compte aussi

• JPG pour les photos — le meilleur équilibre entre poids et qualité pour le contenu photographique

• PNG seulement pour ce qui en a vraiment besoin : logos, icônes, captures d'écran, tout ce qui a de la transparence ou des couleurs plates et des bords nets

• WebP si votre hébergement/CMS le supporte — généralement 25-35% plus léger qu'un JPG de qualité équivalente, avec un support navigateur désormais quasi universel

• Convertir WebP en JPG — utile dans l'autre sens, si une image WebP doit aller quelque part qui n'accepte que le JPG

Ce qui n'aide pas vraiment beaucoup

Compresser le HTML/CSS/JS compte aussi pour la vitesse de page, mais sur une page typique riche en images, les images représentent généralement 70%+ du poids total de la page — optimiser tout sauf les images et attendre une page rapide fonctionne rarement. De même, un CDN accélère la livraison d'une image mais ne la réduit pas — une image non optimisée de 4 Mo servie depuis un CDN rapide reste une image de 4 Mo.

Un flux de travail simple

1. Redimensionnez aux dimensions d'affichage réelles approximatives
2. Compressez à une taille cible raisonnable pour cet usage (miniature, image de corps de texte, bannière héro)
3. Utilisez le JPG pour les photos, le PNG seulement si vous avez besoin de transparence/bords nets, le WebP si supporté

Tout cela se passe dans votre navigateur — aucun envoi n'est nécessaire pour redimensionner ou compresser.