Réduire les fichiers sans perte visible
La plupart des images trop lourdes le sont pour une raison banale : leurs dimensions en pixels sont trois fois plus grandes que partout où elles s’affichent. Corrigez cela d’abord, et le fichier diminue généralement de 80 à 90 pour cent avant même de toucher au curseur de qualité. Il existe trois leviers, avec un ordre de priorité clair. Les utiliser dans le mauvais ordre produit des images visiblement brouillées qui restent trop lourdes.
Les trois leviers, dans l’ordre
- Dimensions. Nombre de pixels : diviser largeur et hauteur par deux en retire trois quarts ; le poids suit.
- Format. Codage des pixels : photo PNG ou logo JPG peut multiplier les octets.
- Réglage de qualité. Détail éliminé par codage avec perte : le levier le plus petit et seul nuisible à l'apparence.
L’ordre compte car les leviers se multiplient. Une photo 4000×3000 en PNG peut peser 12MB. La réduire à 1200×900 ramène la taille à environ un dixième. Passer en JPG la réduit encore fortement. Ensuite seulement, baisser la qualité de 95 à 82 agit sur un petit reste au lieu de masquer un problème que le redimensionnement aurait dû régler.
En procédant dans l’ordre inverse, vous obtenez le pire résultat : une image écrasée à une qualité de 40 pour atteindre une taille cible, qui conserve encore quatre fois plus de pixels que nécessaire, présente des artefacts visibles et reste trop volumineuse. Si une image paraît mauvaise après compression, c’est généralement parce que la première étape a été ignorée.
Levier 1 : redimensionner avant compression
Choisissez les dimensions cibles d’après l’endroit où l’image est réellement affichée, et non d’après ce que l’appareil photo a produit.
| Utiliser | Largeur raisonnable | Notes |
|---|---|---|
| Image principale jusqu'aux bords | 1920–2560 px | Le seul cas où une grande taille se justifie |
| Image du corps de l'article | 1200–1600 px | Couvre les écrans 2x aux largeurs de colonne habituelles |
| Vignette / carte | 400–800 px | Servez un fichier séparé, ne redimensionnez pas le grand |
| Avatar | 200–400 px | Carré, et généralement recadré malgré tout |
| Carte Open Graph | 1200×630 px | Exactement cela ; attendu par les robots |
| Pièce jointe d'e-mail | 1600–2000 px | Suffisant pour affichage et petite impression |
Deux multiplicateurs à retenir. Les écrans haute densité demandent environ deux fois la largeur CSS pour un rendu net : une image affichée à 600px devrait faire environ 1200px dans le fichier. Au-delà de 2x, le gain s’effondre : 3x est presque indiscernable de 2x pour plus du double d’octets.
Levier 2 : format adapté au contenu
Version courte de la décision, détaillée dans notre guide de comparaison des formats:
- Photographies → WebP avec perte, ou JPG si la compatibilité compte. Stocker une photo en PNG est l’erreur de format la plus fréquente et la plus coûteuse, souvent cinq à dix fois plus volumineuse que nécessaire.
- Graphiques plats, logos, captures et pixel art → PNG, idéalement indexé. JPG produit des oscillations visibles autour de chaque contour des dessins en aplats et un fichier plus volumineux que le PNG. WebP avec perte est aussi souvent plus volumineux qu’un PNG indexé dans ce cas.
- Tout contenu nécessitant de la transparence → PNG, ou WebP avec perte pour un contenu photographique. JPG n’a pas de canal alpha et remplit la transparence d’une couleur unie.
Un exemple réel : une carte sociale PNG de 606KB réexportée en JPG avec une qualité de 82 ne pesait plus que 81KB, soit une réduction de 87% en changeant une seule liste déroulante. C’était une photographie stockée dans un format conçu pour les graphismes en aplats. Dans l’autre sens, convertir des fonds de page en dégradés doux du PNG vers le WebP a réduit leur taille d’environ 57% : les contenus lisses sans contours nets sont précisément ceux que la compression avec perte traite le mieux.
Levier 3 : qualité et ses limites
Pour le JPG et le WebP avec perte, la qualité est un nombre de 0 à 100 qui règle l’intensité de la quantification par l’encodeur. Sa relation avec la taille du fichier est fortement non linéaire ; connaître la forme de cette courbe aide à choisir le bon réglage.
| Qualité | Résultat habituel | Quand l’utiliser |
|---|---|---|
| 100 | Énorme, aucun gain visible au-delà de 90 | Pratiquement jamais |
| 90–95 | Grand ; visuellement identique à l'original | Archivage, impression, images à retoucher |
| 75–85 | Le bon compromis ; artefacts invisibles à taille normale | Presque tout sur le Web |
| 60–70 | Artefacts perceptibles ; économies supplémentaires modestes | Vignettes, limites de taille strictes |
| Moins de 50 | Blocs visibles et détails pâteux | Quand une limite en octets ne laisse aucun choix |
Passer de 100 à 90 supprime souvent la moitié du fichier sans perte perceptible. Passer de 90 à 80 en élimine encore une bonne partie, toujours sans différence visible sur les photographies. Passer de 80 à 70 économise nettement moins, tandis que les pertes commencent à se voir. Sous 60, chaque réduction supplémentaire coûte en qualité visible pour des gains décroissants. C’est la courbe des rendements décroissants, et c’est pourquoi qualité 80 est un réglage par défaut si courant : il se situe au point de meilleur compromis.
Le contenu déplace le point de compromis. Les photos chargées et détaillées cachent bien les artefacts et supportent 70. Les images avec de grandes zones lisses — ciels, fonds de studio, dégradés — révèlent plus tôt les bandes et demandent 85. Le texte et les contours nets ne devraient pas utiliser de format avec perte.
Quand un PNG nécessite une quantification de palette
PNG n’a pas de curseur de qualité, mais possède un levier que la plupart des gens n’utilisent jamais : réduire le nombre de couleurs. Un PNG truecolor stocke quatre octets par pixel ; un PNG indexé stocke un indice d’un octet vers une table contenant jusqu’à 256 couleurs. Pour les images qui utilisent réellement peu de couleurs, la version indexée est plusieurs fois plus petite et, si toutes les couleurs de l’image tiennent dans la table, mathématiquement identique.
Bonnes candidates :
- Logos, icônes et aplats avec peu de couleurs.
- Le pixel art, généralement créé avec une palette restreinte.
- Captures d’interface, surtout composées d’aplats et de texte.
- Graphiques et schémas.
Mauvais candidats : photographies, images avec des dégradés lisses et images aux bords adoucis par anticrénelage sur de nombreux fonds différents. Les quantifier introduit des bandes, et un bon quantificateur utilise du tramage pour les masquer ; cela ajoute du bruit, qui se compresse mal et annule une partie du gain.
L’alpha exige ici de l’attention. Le PNG à palette permet une transparence par entrée de palette : un contour anticrénelé partiellement transparent consomme donc des entrées pour chaque niveau de mélange. Une icône à l’ombre douce peut consacrer une grande partie des 256 entrées aux nuances de cette ombre. Vérifiez le résultat sur un fond contrasté avant de le diffuser.
Supprimer les métadonnées
Les images d’appareils photo et de téléphones contiennent des blocs EXIF : réglages d’exposition, modèle d’objectif, horodatages, vignettes et souvent coordonnées GPS. Les outils de conception ajoutent leurs propres blocs. Cela représente généralement des dizaines de kilo-octets, parfois bien davantage avec un profil colorimétrique ou une vignette d’aperçu intégrés.
Sur une photo de 2MB, c’est négligeable. Sur une vignette de 40KB, 15KB d’EXIF représentent plus d’un tiers du fichier. Il existe aussi une autre raison que la taille : les coordonnées GPS d’une photo publiée révèlent à tout le monde où elle a été prise, un problème de confidentialité que beaucoup découvrent à leurs dépens.
Deux éléments à conserver volontairement : le profil de couleur si l’image n’est pas déjà sRGB, car le retirer change les couleurs, et les champs de droit d’auteur si vous les utilisez. Tout outil réencodant via un canevas supprime automatiquement les métadonnées, car le canevas ne contient que des pixels.
Méthodes pour les cibles courantes
Sous une limite de pièce jointe de 25MB
Il s’agit généralement d’un lot de photos de téléphone. Redimensionnez chacune à 2000px sur le côté long et exportez en JPG avec une qualité de 85. Une photo typique de 12 mégapixels atteint environ 500KB : quarante photos tiennent donc dans la limite. Si vous en voulez davantage, passez à 1600px avant de réduire la qualité : le destinataire regarde sur un écran, il n’imprime pas une affiche.
Sous une limite de formulaire ou téléversement de 100KB
C’est courant pour les photos de profil, les documents à téléverser et les candidatures. Procédez dans l’ordre : redimensionnez à la taille d’affichage maximale, souvent 800px ou moins, exportez en JPG à une qualité de 80 et vérifiez. Si le fichier reste trop gros, passez à 70, puis réduisez davantage les dimensions. Évitez de descendre sous 60 : à taille de fichier identique, une image de 600px à une qualité de 75 est nettement meilleure qu’une image de 1200px à 45.
Images de pages web
Visez moins de 200KB par image et 500KB pour une grande bannière. Servez plusieurs tailles via srcset pour que les téléphones ne téléchargent pas la version pour ordinateur. Chargez à la demande tout ce qui se trouve sous la partie visible initiale. Vérifiez aussi les requêtes réelles de la page : un problème courant est un CMS servant l’original de 4000px avec une largeur CSS de 600px ; le problème entier vient alors d’un réglage du modèle, pas du fichier image.
Budgets de textures de jeu
Les règles sont différentes, car c’est la mémoire GPU qui compte, et non la taille du téléchargement. La mémoire GPU dépend des dimensions et du format de texture, pas de la taille compressée du PNG sur disque : un PNG très optimisé et un PNG volumineux occupent la même VRAM une fois chargés. Conservez les illustrations sources sans perte, utilisez des dimensions en puissances de deux lorsque votre chaîne de production l’exige et laissez les paramètres d’importation du moteur gérer la compression GPU. Optimiser le PNG lui-même ne réduit que la taille d’installation.
Questions fréquentes
Que signifie vraiment « sans perte de qualité visible » ?
Pas des pixels identiques : cela exclurait entièrement les formats avec perte. Cela signifie qu’aucune différence n’est visible à la taille d’affichage normale, dans des conditions habituelles, sans alterner entre les versions. À une qualité de 80 sur une photo, un outil de comparaison révèle les pixels modifiés, mais vous ne les remarquerez pas en regardant.
Faut-il redimensionner et compresser en une étape ou deux ?
Une seule étape est préférable lorsque l’outil le permet, car elle évite un encodage intermédiaire. Si vous devez procéder en deux étapes, utilisez un intermédiaire sans perte : redimensionnez et enregistrez en PNG, puis compressez en JPG ou WebP. Redimensionner un JPG et le réenregistrer en JPG cumule les artefacts.
Les optimisations PNG sans perte sont-elles utiles ?
Un peu. Les outils qui relancent la compression avec de meilleurs paramètres récupèrent généralement 5 à 20 pour cent avec des pixels identiques bit à bit. C’est un gain réel, mais faible face au redimensionnement ou au changement de format ; utilisez-le en finition, pas comme stratégie.
La compression du navigateur vaut-elle celle du bureau ?
Pour redimensionner et réencoder en JPG ou WebP, le navigateur utilise les mêmes codecs sous-jacents et les résultats sont comparables. Les outils spécialisés se distinguent par une quantification PNG avancée et des encodeurs dédiés offrant plus de réglages. Le navigateur possède un véritable avantage : l’image ne quitte jamais votre ordinateur, ce qui compte lorsque vous n’avez pas le droit de la téléverser.
Les trois leviers réunis
Le Compresseur d’images rend ce guide pratique : déplacez le curseur de qualité et observez la taille, ou fixez une taille cible et laissez l’outil chercher la qualité respectant la limite, puis réduire les dimensions si la qualité seule ne suffit pas. Besoin d’un autre format plutôt que d’un fichier plus petit ? Le Convertisseur d’images convertit PNG, JPG et WebP dans les deux sens. Les deux fonctionnent entièrement dans votre navigateur.
Ouvrir le compresseurOuvrir le convertisseur