Pourquoi la compression d'images est devenue indispensable
Une image non optimisée pèse souvent plusieurs mégaoctets. Multipliée par le nombre de visuels d'une page, elle ralentit le chargement, consomme de la bande passante et pénalise l'expérience utilisateur. La compression d'images consiste à réduire le poids d'un fichier tout en préservant un rendu visuel acceptable, voire identique à l'œil nu.
L'objectif n'est pas d'obtenir le fichier le plus léger possible, mais le meilleur compromis entre poids et qualité. Un logo de 40 Ko bien compressé peut être plus lisible qu'un fichier de 300 Ko mal préparé. Cet article présente les deux grandes familles de compression, les réglages à connaître et les bonnes pratiques pour le web.
Compression sans perte : préserver chaque pixel
La compression sans perte (lossless) réduit le poids sans supprimer d'information. Le fichier décompressé est strictement identique à l'original. Elle repose sur des algorithmes qui éliminent les redondances dans les données : zones uniformes, répétitions de motifs, codage plus efficace.
Quand l'utiliser ?
- Images techniques : captures d'écran, schémas, graphiques, textes intégrés.
- Logos et pictogrammes : formes simples à aplats de couleur.
- Archives de travail : lorsque vous devez conserver une qualité intacte pour des retouches ultérieures.
- Formats adaptés : PNG et GIF se prêtent bien à ce type de compression ; certains outils proposent aussi une optimisation sans perte des JPEG.
Les limites
Le gain reste modéré sur les photographies, car les dégradés et les textures contiennent peu de redondances exploitables. Sur une photo, la compression sans perte ne fera souvent gagner que quelques pourcents.
Compression avec perte : alléger fortement en contrôlant la qualité
La compression avec perte (lossy) supprime des informations jugées peu perceptibles par l'œil humain. C'est la méthode la plus efficace pour les photographies et les images riches en détails. Le JPEG en est l'exemple le plus connu ; les formats modernes comme WebP ou AVIF proposent des compromis souvent plus avantageux.
Le principe du réglage de qualité
La plupart des encodeurs exposent un curseur de qualité, généralement de 0 à 100. Plus la valeur est basse, plus le fichier est léger, mais plus les artefacts apparaissent : blocs, halos autour des contours, perte de détail dans les zones sombres.
Quelques repères pratiques, à ajuster selon chaque image :
- Qualité élevée (autour de 80-90) : adaptée aux visuels mis en avant, aux portraits et aux images de produit.
- Qualité moyenne (autour de 60-75) : convient à la plupart des photos d'illustration sur le web.
- Qualité basse (en dessous de 50) : à réserver aux vignettes ou aux images secondaires, avec vérification visuelle systématique.
Ces valeurs sont des points de départ, pas des règles absolues : le résultat dépend du contenu de l'image, de sa taille d'affichage et du format choisi.
Toujours comparer avant d'exporter
Après compression, ouvrez le fichier à sa taille d'affichage réelle et comparez-le à l'original. Un agrandissement à 100 % sur écran révèle souvent des défauts invisibles dans une vignette. Si la différence est imperceptible dans les conditions réelles de consultation, la compression est réussie.
Choisir le bon format selon l'usage
Le format influence directement le poids final :
- JPEG : universel, adapté aux photos, mais pas aux transparences ni aux aplats nets.
- PNG : sans perte, gère la transparence, idéal pour les logos et les captures.
- WebP : bon compromis poids/qualité, prend en charge la transparence et l'animation, largement supporté par les navigateurs modernes.
- AVIF : compression encore plus efficace sur certains contenus, mais encodage plus lent et support variable selon les outils.
- SVG : format vectoriel pour les logos et icônes, très léger et redimensionnable sans perte.
Pour un site web, il est fréquent de proposer une image en WebP avec un repli JPEG ou PNG. Des outils de conversion en ligne permettent de générer ces variantes rapidement, par exemple via la https://multi-convert.com/en" rel="noopener noreferrer">plateforme MultiConvert.
Bonnes pratiques pour optimiser les images web
1. Redimensionner avant de compresser
Une image affichée sur 800 pixels de large n'a pas besoin d'être stockée en 4000 pixels. Le redimensionnement est souvent le levier le plus efficace : diviser les dimensions par deux réduit le poids de façon drastique, avant même toute compression. Prévoyez toutefois une résolution suffisante pour les écrans haute densité (facteur 2 au maximum en général).
2. Recadrer et supprimer l'inutile
Supprimez les zones vides, les marges inutiles et les métadonnées superflues (données EXIF non nécessaires, profils colorimétriques mal adaptés). Chaque pixel supprimé est un gain direct.
3. Adapter le format au contenu
Une photo en JPEG ou WebP, un logo en SVG ou PNG, une capture d'écran en PNG ou WebP : le choix du format évite de compenser par une compression excessive.
4. Compresser par lots avec contrôle
Pour un site entier, traitez les images par lots en conservant une copie des originaux. Vérifiez un échantillon représentatif après compression, en particulier les images comportant des dégradés, des visuels de personnes ou des textes incrustés.
5. Utiliser le chargement différé
Le lazy loading (chargement différé) ne réduit pas le poids d'un fichier, mais évite de charger les images hors écran au démarrage. Combiné à la compression, il améliore nettement la perception de vitesse.
6. Nommer et organiser les fichiers
Des noms explicites et une arborescence claire facilitent la maintenance. Cela n'a pas d'impact direct sur le poids, mais évite les doublons et les fichiers oubliés qui alourdissent inutilement un projet.
Les erreurs fréquentes à éviter
- Compresser plusieurs fois le même JPEG : chaque passage dégrade l'image. Repartez toujours de l'original.
- Se fier uniquement au poids : un fichier très léger mais flou n'est pas une optimisation réussie.
- Ignorer la taille d'affichage : compressez en fonction de l'usage réel, pas dans l'absolu.
- Négliger les métadonnées : elles peuvent représenter plusieurs dizaines de kilo-octets inutiles.
Conclusion : une méthode simple à appliquer
Pour réduire le poids de vos images sans perte visible, suivez cette séquence : redimensionnez à la taille d'affichage nécessaire, choisissez le format adapté au contenu, compressez avec un réglage de qualité modéré, puis comparez le résultat à l'original à taille réelle. Conservez toujours une copie non compressée et appliquez la même recette à toutes vos images pour un résultat homogène. Un dernier contrôle visuel avant publication suffit à garantir un rendu propre tout en allégeant considérablement vos pages.