Comment compresser des images sans perte de qualité

Les gros fichiers d'images ralentissent les sites web, encombrent les boîtes mail et grignotent le stockage. Les compresser est l'un des moyens les plus simples d'accélérer les choses, et vous pouvez le faire sans installer aucun logiciel, sans téléverser quoi que ce soit sur un serveur, et en général sans aucune perte de qualité visible. Les bons réglages de compression peuvent retirer 80 % de la taille d'une photo tout en restant identiques à distance de lecture normale.

Une brève histoire de la compression d'image

La compression comme idée numérique est plus ancienne que le web. Le codage par longueurs de plage dans les premiers formats bitmap (TIFF en 1986, PCX avant) réduisait les couleurs répétées à un compteur plus une valeur, réduisant considérablement la taille des captures d'écran et des graphismes simples. Le standard JPEG de 1992 a fait entrer la compression avec perte dans le grand public en utilisant la transformée en cosinus discrète (DCT) pour écarter les informations que le système visuel humain ne peut percevoir aisément, une idée qui propulse encore la plupart des compressions photographiques trente ans plus tard.

PNG est arrivé en 1996 avec une compression sans perte basée sur DEFLATE, idéale pour les captures d'écran et logos que JPEG abîme. WebP (Google, 2010) a ajouté un mode avec perte plus malin qui bat JPEG de 25 à 35 % et un mode sans perte qui bat PNG de 20 à 30 %. AVIF (2019) descend encore d'un grand pas, souvent à la moitié de la taille de WebP à qualité égale. JPEG XL (2021) est le dernier prétendant, visant à les remplacer tous par un format unique qui gère le sans perte, l'avec perte, l'animation, et même la ré-encodage d'anciens JPEG sans perte supplémentaire. L'adoption navigateur est le facteur limitant ; les algorithmes eux-mêmes ont largement dépassé JPEG en efficacité.

Pourquoi la taille des images compte

Chaque image d'une page web doit être téléchargée par le navigateur du visiteur. Une seule photo non compressée d'un téléphone peut faire 5 à 10 Mo. Multipliez par plusieurs images et votre page met sensiblement plus de temps à charger sur une connexion rapide, et des minutes sur une lente. Des images plus petites signifient :

• Chargements de page plus rapides : les visiteurs voient votre contenu plus tôt. Les Core Web Vitals de Google (LCP, le Largest Contentful Paint) sont souvent dominés par l'image héros ; diviser sa taille par deux divise fréquemment le temps LCP par deux.
• Moins de bande passante consommée : important pour les utilisateurs mobiles à forfait limité, et pour votre propre facture d'hébergement si vous servez beaucoup de trafic.
• Partage plus facile : les pièces jointes restent sous les limites de taille (Gmail plafonne à 25 Mo), et les apps de chat arrêtent de transcoder vos photos dans votre dos.
• Plus d'espace de stockage : votre téléphone, drive cloud ou serveur garde plus de fichiers. Un voyage de 5 000 photos devient 1 Go au lieu de 5 Go.
• Meilleur SEO : les signaux de vitesse de page comptent dans le classement Google, donc une page chargée d'images qui charge vite surclasse une page identique qui rame.

Comment fonctionne la compression d'image

Il existe deux types de compression, chacun avec ses propres compromis.

La compression avec perte (JPEG, WebP, AVIF) supprime des données d'image que votre œil ne risque pas de remarquer. À des niveaux de qualité modérés (autour de 60-80 %), le résultat semble virtuellement identique à l'original mais peut être 50 à 80 % plus petit. L'algorithme procède en trois étapes : convertir RVB en YCbCr (séparant la luminosité de la couleur), sous-échantillonner les canaux de couleur (votre œil est bien moins sensible au détail de couleur qu'à la luminosité) et appliquer la DCT pour écarter les hautes fréquences. Chaque étape ne coûte rien en qualité perçue mais économise d'énormes quantités de données.

La compression sans perte (PNG, FLAC pour l'audio) réorganise les données pour prendre moins de place sans rien enlever. L'image reste pixel-parfait identique à l'original, mais les économies de taille sont moindres, typiquement 10 à 30 % pour les photos et 30 à 60 % pour les captures et logos.

Les formats mixtes (WebP, AVIF, JPEG XL) vous laissent choisir avec ou sans perte par fichier. La plupart des pipelines photo modernes optent pour l'avec perte à la livraison et conservent un master sans perte pour l'archivage.

Comment compresser des images en ligne

1. Téléversez vos images : glissez-déposez une ou plusieurs images (JPEG, PNG, WebP, AVIF, HEIC, GIF, BMP, jusqu'à 50 Mo chacune) dans l'outil, ou cliquez pour parcourir vos fichiers. Tout est traité localement ; rien n'est téléversé.
2. Ajustez les réglages de qualité : utilisez le curseur de qualité pour contrôler le niveau de compression. Des valeurs plus basses signifient des fichiers plus petits avec plus de compression. Vous pouvez aussi régler une largeur maximale, changer le format de sortie ou viser une taille de fichier cible.
3. Prévisualisez le résultat : la plupart des outils affichent des miniatures avant/après avec la nouvelle taille. Affinez la qualité jusqu'à ce que le compromis vous convienne.
4. Téléchargez les résultats : téléchargez les images compressées individuellement ou cliquez sur "Tout télécharger" pour récupérer le lot dans un ZIP.

En coulisses, le fichier est lu via FileReader, décodé par le pipeline d'image du navigateur, dessiné sur un canvas hors écran, et ré-encodé à la qualité cible via canvas.toBlob. Des versions WebAssembly des encodeurs WebP, AVIF et MozJPEG donnent une performance de compression quasi-native sans quitter la page.

Des réglages de qualité qui marchent vraiment

Il n'y a pas de "bonne" qualité universelle. Le tableau ci-dessous est un point de départ ; ajustez à partir de là selon le rendu réel de vos images.

Conseils pour les meilleurs résultats

• Commencez à qualité 80 pour les photos, 90 pour les captures, ce sont les points où la plupart des spectateurs ne distinguent pas le résultat de l'original. Descendez plus bas si vous voulez des fichiers plus petits ; remontez si l'image a du détail fin ou du texte.
• Utilisez WebP quand vous le pouvez, le support WebP dépasse 97 % des navigateurs en 2024. Pour les rares qui ne l'ont pas, livrez un fallback JPEG avec l'élément picture. AVIF économise encore plus, mais vérifiez que l'encodeur est assez rapide.
• Redimensionnez avant de compresser, une photo de 4000px affichée à 800px sur un site gaspille de la bande passante quelle que soit la qualité. Redimensionnez à la plus grande taille réellement affichée (souvent 2x la largeur CSS pour les écrans retina), puis compressez.
• Gardez vos originaux, compressez toujours une copie, pas le fichier original. Vous pouvez toujours re-compresser depuis l'original, mais vous ne pouvez jamais restaurer les données perdues par compression.
• Retirez les métadonnées lors d'un partage public, les données EXIF peuvent inclure coordonnées GPS, modèle d'appareil, même votre nom. Les compresseurs en navigateur les retirent habituellement automatiquement ; vérifiez si la vie privée compte.
• Fixez une taille de fichier cible pour les e-mails, les pièces jointes Gmail plafonnent à 25 Mo, beaucoup de systèmes d'entreprise à 10 Mo. Visez 1 à 2 Mo par image par sécurité.
• Choisissez le JPEG progressif pour le web, les JPEG progressifs chargent en passes de haut en bas, montrant un aperçu flou avant de s'affiner. Les décodeurs modernes les gèrent sans peine et ils compressent souvent un peu plus petit que le baseline.
• Évitez de re-compresser la même image plusieurs fois, chaque passe ajoute des artefacts. Si vous risquez de ré-éditer, gardez un master sans perte et ré-exportez à chaque fois.

Quel format utiliser

Pour du contenu neuf en 2024, la meilleure pratique est de livrer AVIF là où c'est supporté, WebP comme fallback moderne universel, et JPEG ou PNG comme fallback en dernier recours. L'élément picture gère ça proprement en HTML.

Pièges courants

• Compresser des images déjà compressées, re-sauvegarder un JPEG à qualité 80 ne double pas les économies ; ça ajoute juste un tour d'artefacts. Compressez depuis l'original (ou un master sans perte) une seule fois.
• Mauvais format pour le contenu, JPEG-compresser un logo avec du texte produit du ringing visible autour des lettres. PNG-sauver une photo 4000x3000 vous donne un fichier de 30 Mo. Faites correspondre format et contenu.
• Le curseur de qualité paraît trop agressif à 90, l'échelle de qualité JPEG n'est pas linéaire. Passer de 90 à 80 économise bien plus que de 100 à 90, avec presque aucun coût visible.
• Oublier les écrans retina, une image 600px affichée dans un emplacement 600px paraît douce sur téléphones et laptops modernes. Exportez à 2x les pixels CSS et laissez le navigateur réduire.
• Supprimer le profil colorimétrique, retirer le profil ICC intégré peut décaler les couleurs visiblement sur des écrans large gamut. Les compresseurs modernes le préservent ; les plus anciens, pas toujours.
• Sauver chaque PNG en même profondeur de bits, une capture de texte noir et blanc tient en PNG-8 (256 couleurs) à une fraction de la taille de PNG-24. Utilisez un quantizer comme pngquant pour de grandes économies sur les graphismes.
• Ré-encoder vers un format moins bon, convertir WebP en JPEG perd à la fois la qualité et l'avantage de taille. Si vous avez besoin d'un fallback JPEG, encodez depuis le master original, pas depuis le WebP.
• Se fier à la comparaison visuelle en petit, un artefact invisible dans la miniature est évident sur un écran 4K quand quelqu'un zoome. Testez à la taille d'affichage réelle.
• Oublier le canal alpha, JPEG ne supporte pas la transparence. Compresser un PNG transparent en JPEG remplit le fond de blanc (ou ce que choisit l'outil).
• L'animation en GIF, les GIF sont plus gros et de moins bonne qualité que MP4 ou WebP animé. Pour la livraison moderne, convertissez presque toujours.

Outils et bibliothèques alternatifs

Un compresseur web est le chemin le plus rapide pour une ou quelques images. Pour les lots ou les pipelines scriptés, les outils en ligne de commande et les bibliothèques prennent le relais.

Pour automatiser un pipeline de photos produit, sharp + MozJPEG + AVIF donne le meilleur rapport vitesse/qualité en 2024. Pour les uploads ponctuels, l'outil navigateur gagne en commodité et vie privée.

Vie privée et le compresseur

Le compresseur d'images tourne entièrement dans votre navigateur. Le fichier que vous sélectionnez est lu avec l'API FileReader, décodé par le pipeline d'image du navigateur, dessiné sur un canvas hors écran, et ré-encodé via canvas.toBlob. Rien n'est téléversé, rien n'est journalisé, rien n'est partagé. Pour le matériel sensible, captures de tableaux de bord internes, scans d'ID, brouillons de contrats en preuves d'image, ce flux uniquement local est la différence entre faire confiance au serveur d'un inconnu et ne faire confiance à personne. Même les photos ordinaires contiennent souvent des métadonnées EXIF (coordonnées GPS, numéro de série de l'appareil, horodatage) que vous ne souhaitez peut-être pas qu'un tiers voie ; le pipeline basé sur Canvas supprime la plupart d'EXIF par défaut, et l'absence de téléversement signifie que ces données ne quittent jamais la page de toute façon. Pour une tâche aussi routinière que réduire la taille d'une photo, le réglage de vie privée par défaut devrait être : rien ne quitte la page, rien n'est stocké, rien n'est partagé.