Bonnes pratiques de compression d'images pour le web

Bonnes pratiques de compression d'images pour le web

Les images représentent plus de la moitié des données d'une page web typique. Chaque kilooctet non optimisé vous coûte des temps de chargement plus lents, des taux de rebond plus élevés et un classement dans les moteurs de recherche plus faible. Ce guide couvre les bonnes pratiques que les développeurs web professionnels utilisent pour fournir des images nettes et à chargement rapide à toutes les tailles d'écran.

1. Conservez toujours une copie maître

Avant d'appliquer toute compression, enregistrez une copie maître non compressée de votre image d'origine. Une copie maître vous donne la liberté d'expérimenter différents niveaux de qualité et de recompresser plus tard sans repartir de zéro. Stockez les maîtres dans un format lossless tel que PNG ou TIFF, puis compressez des copies pour la production.

2. Comprenez les réglages de qualité

La qualité de compression est généralement mesurée sur une échelle de 0 (pire) à 100 (meilleure). Le réglage optimal dépend de votre contenu d'image et de vos objectifs de performance.

Recommandations de qualité JPEG :

• 80 à 85 : Excellent pour la plupart des photos web. Les artefacts sont à peine perceptibles.
• 60 à 75 : Bon pour les miniatures et les images d'arrière-plan. Certains artefacts de compression apparaissent.
• En dessous de 60 : Blocage et banding notables. À n'utiliser que lorsque le poids du fichier est la priorité absolue.

Recommandations de qualité WebP :

• 75 à 85 : Correspond à la qualité JPEG avec des fichiers environ 25 à 35 pour cent plus légers.
• WebP lossless : Idéal pour les graphiques et les captures d'écran où une sortie parfaite au pixel près compte.

Compression PNG :

• Le PNG utilise exclusivement une compression lossless. La réduction de la profondeur de bits (conversion de la couleur 32 bits en 8 bits) est le moyen le plus efficace de réduire le poids des PNG sans perte de qualité visible pour les graphiques à couleurs plates.

Recommandations de qualité AVIF :

• 50 à 70 : Produit des fichiers jusqu'à 50 pour cent plus légers que le JPEG à qualité visuelle comparable.
• Une complexité d'encodage plus élevée signifie une compression plus lente, mais le gain en poids de fichier est substantiel.

3. Adaptez la compression au contenu de l'image

Toutes les images ne réagissent pas de la même façon à la compression. Adaptez votre approche au type de contenu :

• Photographies : La compression lossy (JPEG, WebP, AVIF) fonctionne le mieux. Commencez à la qualité 80 et ajustez à la baisse jusqu'à trouver le seuil acceptable.
• Captures d'écran et maquettes d'interface : La compression lossless (PNG, WebP lossless) préserve le texte net et les bords nets. Ces images contiennent de grandes zones uniformes qui se compressent très efficacement.
• Logos et icônes : Les formats lossless conservent une netteté de type vectorielle. Si l'original a peu de couleurs, un PNG avec une profondeur de couleur réduite peut être extrêmement léger.
• Photos de produits : La qualité 75 à 85 est le point idéal. La différence visuelle par rapport à l'originale est presque invisible, mais les économies de poids sont considérables.

4. Supprimez les métadonnées cachées

Les appareils photo numériques et les logiciels de conception intègrent des métadonnées appelées données EXIF dans les fichiers image. Celles-ci peuvent inclure le modèle d'appareil photo, les coordonnées GPS, les horodatages et les informations de profil colorimétrique. Supprimer les métadonnées peut réduire le poids du fichier de 5 à 15 pour cent sans aucun impact visuel.

La plupart des outils de compression offrent une option pour supprimer automatiquement les métadonnées. Activez-la sauf si vous avez une raison spécifique de préserver les informations de droits d'auteur ou de profil colorimétrique.

5. Compressez dans le format d'origine

Les compresseurs d'images modernes vous permettent d'optimiser les images tout en préservant leur format d'origine. C'est une capacité importante car la conversion de format est souvent inutile et parfois indésirable :

• PNG reste PNG : La compression lossless préserve la transparence et les bords nets.
• JPEG reste JPEG : Des tables de Huffman optimisées et une quantification adaptée fournissent des fichiers plus légers sans pertes de ré-encodage.
• WebP reste WebP : Le WebP lossy et lossless bénéficient tous deux de la suppression des métadonnées et de paramètres d'encodage optimisés.
• AVIF reste AVIF : Un réglage avancé de la compression peut encore réduire les fichiers AVIF déjà efficaces.

Compresser sur place signifie que vous ne dégradez jamais la qualité à travers une chaîne de conversion de format, et votre flux de travail reste simple.

6. Automatisez votre flux de travail de compression

La compression manuelle ne passe pas à l'échelle au-delà de quelques images. Pour les sites web de production, intégrez la compression à votre pipeline de build :

• Plugins au moment du build : Des outils comme sharp, Squoosh CLI et imagemin peuvent s'exécuter pendant votre étape de build.
• Automatisation CMS : De nombreux systèmes de gestion de contenu proposent des plugins qui compressent les images lors du téléversement.
• Intégration CI/CD : Ajoutez une étape de compression à votre pipeline de déploiement afin que chaque image soit automatiquement optimisée avant la mise en ligne.

7. Compressez les miniatures plus agressivement

Les miniatures et les images d'aperçu sont visualisées en petite taille, de sorte que les artefacts de compression y sont beaucoup moins perceptibles. Appliquez des réglages de qualité plus faibles :

• Miniatures JPEG : Qualité 50 à 60
• Miniatures WebP : Qualité 50 à 70
• Miniatures PNG : Réduisez à la couleur 8 bits si l'image le permet

8. Combinez compression et lazy loading

La compression réduit la taille de chaque image, mais le lazy loading garantit que les images ne se téléchargent que lorsqu'elles entrent dans la fenêtre d'affichage. La combinaison est l'une des optimisations de performance ayant le plus grand impact disponible. Ajoutez loading="lazy" à vos balises img et laissez le navigateur gérer le reste.

9. Testez avec des indicateurs réels

L'appréciation visuelle approximative n'est pas fiable. Utilisez des outils objectifs pour mesurer l'impact de vos choix de compression :

• Lighthouse signale les opportunités d'optimisation des images et estime les économies potentielles.
• PageSpeed Insights montre comment le poids des images affecte vos scores Core Web Vitals.
• WebPageTest fournit un graphique en cascade de chaque requête d'image, y compris le time-to-first-byte et la durée de téléchargement.
• Squoosh vous permet de prévisualiser la sortie compressée côte à côte avec l'originale avant de vous engager sur un réglage.

Tout assembler

Un flux de travail moderne d'optimisation d'images ressemble à ceci :

1. Enregistrez une copie maître non compressée.
2. Supprimez les métadonnées pendant la compression.
3. Compressez dans le format d'origine — aucune conversion inutile.
4. Diffusez des versions aux dimensions appropriées pour les différentes fenêtres d'affichage.
5. Activez le lazy loading sur les images non critiques.
6. Mesurez les performances et itérez.

Commencez dès aujourd'hui à appliquer ces bonnes pratiques avec notre compresseur d'images en ligne gratuit. Téléversez vos images et téléchargez des versions optimisées en quelques secondes — tout en conservant votre format d'origine intact.