Comment compresser des images pour le web sans perdre en qualité

Les images sont généralement l'élément le plus lourd d'une page web. Une seule photo non optimisée sortie tout droit de l'appareil d'un téléphone peut peser plusieurs mégaoctets — plus que tout le texte, le code et le style d'un site réunis. Compresser les images est le changement le plus impactant que la plupart des gens peuvent faire pour la vitesse de page, et bien fait, il est invisible pour les visiteurs. Ce guide explique comment fonctionne la compression d'image et comment réduire les fichiers sans baisse notable de qualité.

Pourquoi la taille des images compte

Chaque kilooctet en plus, ce sont des données que le navigateur d'un visiteur doit télécharger avant de pouvoir afficher votre page. Sur une connexion de bureau rapide, cela peut passer inaperçu, mais sur les réseaux mobiles, cela augmente directement le temps de chargement, frustre les utilisateurs et nuit au classement — Google utilise des signaux d'expérience de page comme la vitesse de chargement comme facteur de classement. Des images plus petites signifient des pages plus rapides, des factures de bande passante plus basses et des visiteurs plus contents.

Compression avec perte vs. sans perte

Il existe deux façons fondamentalement différentes de réduire un fichier image.

Compression sans perte

Les méthodes sans perte empaquettent les données plus efficacement sans rien jeter — la décompression vous rend une copie de l'original identique au pixel près. C'est sûr, mais les gains sont modestes, généralement 10–50 %. PNG utilise la compression sans perte, ce qui le rend excellent pour les logos, les captures d'écran et les graphiques aux bords nets et aux couleurs unies.

Compression avec perte

Les méthodes avec perte écartent des informations que l'œil humain a peu de chances de remarquer — variations de couleur subtiles, détails fins dans les zones chargées — pour obtenir des gains bien plus importants, souvent 70–90 %. JPEG et WebP utilisent la compression avec perte. Le compromis est contrôlé par un réglage de qualité : une qualité plus basse signifie un fichier plus petit mais des artefacts plus visibles. Pour les photographies, la compression avec perte à un niveau de qualité raisonnable est presque toujours le bon choix.

Choisir le bon format

Le format que vous choisissez compte autant que le niveau de compression :

• JPEG — le cheval de trait des photographies. Largement pris en charge partout. Bonne compression, mais pas de transparence.
• PNG — le meilleur pour les graphiques aux lignes nettes, au texte ou à la transparence (logos, icônes, captures). Sans perte, donc les photos ressortent lourdes.
• WebP — un format moderne qui produit généralement des fichiers 25–35 % plus petits que JPEG à qualité visuelle égale, et prend en charge la transparence comme PNG. Pris en charge par tous les navigateurs actuels. Pour la plupart des images web aujourd'hui, WebP est le meilleur choix par défaut.
• SVG — pas du tout un format de photo compressée, mais pour les logos et icônes simples, un SVG vectoriel reste net comme une lame à toute taille et ne pèse souvent que quelques kilooctets.

Combien de qualité pouvez-vous sacrifier ?

Pour les formats avec perte, la qualité s'exprime généralement sur une échelle de 0 à 100. Contre-intuitivement, le haut de cette plage est du gaspillage : la différence entre qualité 100 et qualité 80 est souvent impossible à voir, et pourtant la qualité 80 peut représenter la moitié de la taille du fichier. Un point de départ pratique :

• Qualité 75–85 — le point idéal pour la plupart des photos web. Gros gains, aucune perte visible en visualisation typique.
• Qualité 60–75 — convient aux grandes images de fond ou aux vignettes où la netteté absolue n'est pas critique.
• En dessous de 60 — les gains plafonnent tandis que les artefacts (ciels en blocs, halos autour des bords) deviennent visibles. Généralement pas rentable.

La meilleure approche est de comparer, pas de deviner. Compressez à une qualité donnée, regardez le résultat à la taille où il sera réellement affiché, et descendez la qualité cran par cran jusqu'à commencer tout juste à voir une différence — puis remontez d'un cran.

Redimensionnez avant de compresser

La compression ne peut pas grand-chose si l'image est bien plus grande que nécessaire. Une photo de 4000 pixels de large affichée dans une colonne de 800 pixels transporte cinq fois plus de pixels que quiconque ne verra jamais. Redimensionner l'image à peu près aux dimensions où elle est montrée — puis compresser — est souvent le plus gros gain de tous. Notre redimensionneur d'images gère le recadrage, la rotation et le redimensionnement en une passe, entièrement dans votre navigateur.

Un flux de travail simple

1. Redimensionnez l'image à la plus grande taille où elle sera affichée.
2. Choisissez WebP si possible, JPEG pour une compatibilité maximale, PNG pour les graphiques avec transparence.
3. Compressez à une qualité d'environ 80 et regardez le résultat à la taille d'affichage.
4. Baissez la qualité jusqu'à remarquer une différence, puis remontez d'un cran.

Vous faites les trois dernières étapes en quelques secondes avec notre compresseur d'images : déposez une ou plusieurs images et elles sont compressées instantanément sur votre propre appareil — rien n'est téléversé sur un serveur, c'est donc sûr pour les photos privées. Comparez les tailles avant/après, et téléchargez quand le résultat vous convient.