Une fois, j'ai passé un après-midi complet convaincu que le site d'un client était lent à cause d'un bogue de rendu dans mon code React. profilé les composants, mémorisé, chassé les renouvellements. Le problème réel était une image de héros de fond : un JPEG de 3,1 Mo est enregistré à 100 % de qualité, alors que la même image à 80 % aurait été de 480 ko et avait l'air identique. J'avais sur-conçu l'application et sous-pensé les actifs. C'est une façon très développeur de perdre une journée.
Depuis, la compression d'image a été la première chose que je vérifie, pas la dernière It' ; s aussi le plus incompris - " ; compresser sans perdre quality" ; se traite comme un paradoxe, alors qu'en réalité it' ; s'agit simplement de savoir quel levier écarte les données et lequel ne le fait pas' ;t. Ce guide est le modèle mental que j'utilise, construit lors de l'expédition de Toolz.dev et du réglage Noyau Web Vitals sur les sites clients : comment fonctionne réellement la compression, quand utiliser avec perte ou sans perte et pourquoi un numéro de qualité spécifique continue de gagner.
tl;dr : manier Compresse d'images à environ 80 % de qualité pour les photos Web - that' ; le point idéal où le fichier rétrécit 60 80 % et vous pouvez toujours' ; ne le dites pas en dehors de l'original à taille normale Compresser de l'original (ne recompressez jamais un JPEG), et toujours redimensionner pour afficher les dimensions avant de compresser. Pour des économies maximales, convertir photos à Webp premièrement. Tout s'exécute dans votre navigateur - rien ne télécharge.
Que se passe-t-il réellement lorsque vous compressez une image ?
Une image numérique est une grille de pixels, chaque couleur stockant. C'est pourquoi les images brutes sont énormes. Une image 1920 × 1080 à la couleur 24 bits est :
1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB
Près de six mégaoctets pour une image. Une page avec dix d'entre eux serait de 60 Mo de téléchargements avant une ligne de charges de texte. La compression existe pour rendre cela survivable, et il le fait de deux manières fondamentalement différentes.
compression sans perte Trouve des modèles dans les données et les encode de manière plus compacte, sans rien jeter. L'image décompressée est pixel pour pixel identique à l'original. Les techniques sont élégantes : le codage de la longueur d'exécution s'effondre "rouge, rouge, rouge, rouge, rouge" en "5 × rouge" ; le codage du dictionnaire (l'algorithme de déflate au cœur de PNG) remplace les modèles récurrents par des codes courts. Le filtrage de prédiction stocke chaque pixel à la différence d'une valeur prédite, de sorte que les gradients lisses deviennent de longues séries de petits nombres qui se comprimentent. PNG, Webp sans perte et AVIF sans perte fonctionnent tous de cette façon.
Compression avec perte Réalise des économies bien plus importantes en jetant des données que votre système visuel ne remarquera probablement pas - et ce n°39 ; est plus intelligent que " ; supprimez certains pixels." ; Il convertit l'image de RVB en un modèle luminance plus couleur (votre œil est beaucoup plus sensible à la luminosité qu'à la couleur), puis réduit la résolution des canaux de couleur tout en gardant la luminosité nette. Il décompose l'image en blocs, se transforme chacun en coefficients de fréquence et arrondit les coefficients haute fréquence - les textures subtiles et le bruit - jusqu'à moins de valeurs. Cette étape d'arrondi, la quantification, est l'endroit où les données sont réellement perdues. JPEG, WebP avec perte et AVIF suivent tout cela.
Le résultat pratique : sans perte concerne les images où chaque pixel a un sens - logos, captures d'écran, diagrammes, tout ce qui contient du texte net. Lossy est destiné aux photographies et aux images naturelles, où " ; semble identique" ; compte bien plus que " ; est bit pour bit identique." ;
Que signifient réellement les paramètres de qualité ?
"Qualité 80%" est un nombre que les gens ont mis sans savoir ce qu'il leur achète. Voici la carte que j'utilise pour JPEG et Lossy WebP, basée sur de nombreuses comparaisons avant et après à une taille réelle de visualisation.
100% (maximum): Presque jamais le bon choix. Le fichier est souvent 3 à 5 × supérieur à 80 % sans amélioration visible. Cette image de héros qui perdait l'après-midi a été enregistrée ici.
85 à 95 % (élevé) : Pour les portfolios et les images de photographies où les détails subtils comptent vraiment. À 90 %, les artefacts sont invisibles pour la plupart des téléspectateurs, même à 100 % de zoom.
75 à 85 % (le sweet spot Web) : 60 à 70 % de moins que le maximum, avec des artefacts invisibles à la taille normale de la vue. C'est là que presque toutes les images Web appartiennent.
50 à 75 % (agressif) : Pour les vignettes et les aperçus où la taille est critique. Les artefacts commencent à s'afficher dans des dégradés lisses et des textures fines si vous regardez de près.
En dessous de 50 % : Blocage visible et bande de couleur. Réservez-le pour des images réellement faibles ou des contraintes de taille.
PNG does' ; t ont un " ; quality" ; curseur car it' ; s sans perte - vous l'optimisez différemment Le niveau de compression (09) échange le temps de codage contre un fichier plus petit, avec 6 par défaut sensible La réduction de la profondeur des couleurs aide énormément lorsqu'une image utilise peu de couleurs : un logo 16 couleurs est passé de 24 bits à 8 bits se rétrécit considérablement avec zéro changement visible Et le décapage des métadonnées - EXIF, profils de couleurs, horodatages - coupe les octets qui n'ont jamais affecté l'image.
WebP est mon mode par défaut pour le web : à la qualité 80, il fonctionne 25 % plus petit que JPEG à qualité équivalente, et il fait aussi un mode sans perte qui bat PNG d'environ un quart. AVIF compresse plus dur encore - généralement 50 % + plus petit que JPEG - mais code plus lentement et is' ; t tout à fait universellement pris en charge, donc je le sers avec un repli WebP plutôt que seul.
Dans quel format faut-il compresser ?
Choisir le format est la moitié de la bataille de compression, et la décision est plus simple que les options qui la font paraître. Voici la comparaison que je remettrais à un nouveau coéquipier :
| format | taper à la | vs. Taille JPEG | transparence | le mieux pour |
|---|---|---|---|---|
| jpeg | lâche | ligne de base | non | Photos dans le courrier électronique, Universal Fallback |
| png | sans perte | Beaucoup plus grand pour les photos | oui | Captures d'écran, logos, texte, diagrammes |
| Webp | l'un et | 25 à 35 % plus petits | oui | Par défaut pour les photos et graphiques Web |
| avif | l'un et | ~ 50 % de moins | oui | Économies maximales, avec un repli WebP |
L'erreur de format la plus courante - et I' ; l'a attrapé en révision de code plus de fois que je ne peux compter - est d'enregistrer des photographies en PNG. Parce que PNG est sans perte, une photo enregistrée en PNG peut être plusieurs fois plus grande que la même photo qu'un JPEG de qualité 85 % sans différence visible. PNG est destiné aux graphiques avec des bords durs et du texte, pas aux images naturelles Utilisez JPEG ou WebP pour les photos et vous récupérez la plupart d'une page gonflée et du poids n°39 ; en un seul changement.
La conversion est une tâche en deux clics sur le Convertisseur de format. Le modèle que j'expédie réellement permet au navigateur de négocier :
<img src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description">
celui srcset Remet au navigateur plusieurs tailles et lui permet de télécharger celui qui convient à l'appareil, de sorte qu'un téléphone ne tire jamais l'image du bureau. Combiné avec le bon format, c'est la différence entre un site rapide et un site lent.
Quel est le bon ordre pour compresser des images Web ?
La commande compte plus que n'importe quel environnement individuel, et se tromper est l'erreur de silence derrière la plupart des "Je l'ai compressé et c'est toujours énorme". La séquence, à chaque fois :
Redimensionnez d'abord. La compression d'une image 4000×3000 qui s'affiche à 800 × 600 gaspillages sur les pixels sur le point d'être supprimée, et le résultat est encore bien plus important que nécessaire. redimensionner aux dimensions de l'affichage (double pour la rétine) avant toucher le compresseur. Celui-ci réorganise plus de problèmes d'image surdimensionné que tout ajustement de qualité.
Convertir deuxième. Déplacez les photos vers WebP (ou AVIF avec un repli) à l'aide du Convertisseur de format. Vous compressez maintenant l'image plus petite et mieux formatée.
Compresser le troisième. se jouer Compresse d'images à environ 80 % pour les images Web avec perte, puis jugez le résultat à la taille réelle de la visualisation- pas zoomé à 400 %, car personne ne voit une page Web de cette façon.
Pour rendre cela concret, ici' ; passe l'optimisation Web Je cours sur une page réelle : audit avec Lighthouse pour trouver les images lourdes, chacune à sa taille d'affichage, convertir en WebP, compresser à 7580 %, puis re-run Lighthouse pour confirmer Le résultat typique est 508 % de réduction sur le poids total de l'image et un saut mesurable dans Largest Contentful Paint - qui est la métrique qui m'a envoyé sur tout ce chemin en premier lieu.
Pour une visite plus large du redimensionnement, du choix du format et de la suppression de l'arrière-plan, ainsi que la compression, le Guide des outils d'image Couvre la boîte à outils complète.
Quelles erreurs de compression coûtent le plus ?
Une poignée d'erreurs expliquent la plupart des octets gaspillés et la plupart des dommages de qualité visibles. J'ai fait chacun de ces éléments.
au sujet de -Comprimer un JPEG déjà compressé. Chaque série de compressions avec perte empile de nouveaux artefacts sur les anciens, et les dégâts sont cumulatifs et permanents. Toujours compresser de la source d'origine« Et conservez ces originaux - générez chaque version compressée à partir d'eux, jamais à partir d'une copie compressée précédente ».
Utilisation de PNG pour les photographies. Couverture ci-dessus, mais c'est la plus grande victoire unique lorsque vous le repérez : une photo PNG de 5 Mo devient un JPEG de 500 ko sans différence visible.
surcompression. La suppression de JPEG à 30 % crée de minuscules fichiers avec un blocage et des bandes visibles. Restez à 75 à 85 % pour le Web et testez à la taille réelle pour trouver votre sol.
Sauter l'étape de redimensionnement. La compression avant le redimensionnement, comme indiqué ci-dessus, produit des fichiers à la fois de plus grande et de qualité inférieure.
Ignorer les formats modernes. Le service JPEG lorsque WebP est disponible laisse 25 à 35 % des économies potentielles sur la table sans raison.
Si vous souhaitez vérifier votre travail de manière objective, des mesures de perception existent - SSIM supérieur à 0,95 est généralement " ; visuellement sans perte, " ; et Google' ; Les scores de Butteraugli inférieurs à 1,0 signifient que les différences sont essentiellement invisibles - mais honnêtement, pour le travail quotidien, visualiser côte à côte l'original et la version compressée à la taille réelle vous dit presque tout ce que le calcul ferait.
Questions fréquentes
Comment compresser des images sans perdre de qualité ?
Pour une compression sans perte vraie et parfaite en pixels, utilisez PNG ou WebP sans perte. Pour " ; visuellement sans perte" ; - aucune différence que vous pouvez voir - utilisez JPEG WebP à une qualité de 8090 %. Le Compresse d'images L'outil vous permet de définir la qualité et de comparer l'original à la version compressée avant de télécharger, afin que vous puissiez trouver le point exact où la taille baisse mais l'image semble toujours intacte.
Pourquoi la qualité est-elle considérée comme le nombre magique à 80 % ?
À travers de nombreux tests avant et après à une taille réelle d'affichage, la qualité JPEG ou WebP autour de 80 % est l'endroit où le fichier a diminué de 60 à 70 % par rapport au maximum, mais les artefacts sont toujours invisibles sans observer de pixels. Allez plus haut et vous payez beaucoup d'octets pour le détail que personne ne voit, allez beaucoup plus bas et les dégradés commencent à se grouper. C'est le meilleur équilibre pour une utilisation sur le Web, c'est pourquoi c'est la valeur par défaut que j'ai atteinte.
Quel est le meilleur format d'image pour les sites Web en 2026 ?
WebP est le meilleur défaut - environ 25 35 % plus petit que JPEG avec une prise en charge du navigateur effectivement universelle Pour des économies maximales, utilisez AVIF (environ 50 % plus petit que JPEG) servi avec une solution de repli WebP dans un <picture> élément. convertir avec le Convertisseur de format. Gardez une véritable art vectorielle comme les logos comme SVG plutôt que de les compresser comme un raster.
Quelle est la différence entre la compression avec perte et sans perte ?
La compression sans perte réorganise les données plus efficacement sans en écarter aucune, le résultat est donc pixel pour pixel identique à l'original - PNG fonctionne de cette façon La compression avec perte supprime définitivement les données que votre œil ne remarquera probablement pas, réalisant des économies bien plus élevées - JPEG fonctionne de cette façon. Perte sans généralement une réduction de 10,40 % ; perte donne généralement 6090 %. Utilisez le texte et les graphiques sans perte, perte pour les photographies.
Dois-je redimensionner une image avant ou après la compression ?
Redimensionnez toujours d'abord La compression d'une grande image, puis son rétrécissement gaspille l'effort de compression sur les pixels que la redimensionnement élimine, laissant un fichier que & #39 ; est à la fois plus grand et de qualité inférieure qu'il ne devrait l'être Redimensionner aux dimensions d'affichage d'abord, puis compresser l'image plus petite - cet ordre produit le résultat le plus petit et le plus propre.
Est-il sécuritaire de compresser des images avec un outil en ligne ?
La plupart des compresseurs en ligne téléchargent vos images sur leurs serveurs pour les traiter, ce qui est une préoccupation pour les photos personnelles ou le travail des clients. le Compresse d'images tool on Toolz.dev s'exécute entièrement dans votre navigateur à l'aide de l'API canvas, de sorte que vos images ne quittent jamais votre appareil - sans danger pour tout ce qui est privé ou propriétaire.
Pourquoi compresser la même image deux fois est-il une mauvaise idée ?
La compression avec perte élimine les détails et le fait de le faire deux fois les élimine deux fois - le deuxième passage ajoute de nouveaux artefacts au-dessus du premier passage et du numéro 39 ; et rien de tout cela ne revient. C'est pourquoi vous devez toujours conserver l'original et générer chaque version compressée à partir de celui-ci, plutôt que de compresser un fichier déjà compressé une fois.
Comment savoir si mes images sont trop grandes ?
Exécutez Google Lighthouse ou Pagespeed Insights sur votre page, les deux signalent des images surdimensionnées et suggèrent de meilleures tailles. Une règle d'or rapide : si une seule image dépasse 200 Ko, cela vaut la peine d'être optimisé, et les images de héros devraient en particulier s'inscrire bien en dessous, car elles génèrent une peinture de plus en plus la plus importante. Alimentez les délinquants grâce au flux de travail redimensionner-convertir-compresser et à ré-audit.
Comment compresser une image à une taille de fichier spécifique telle que 200 Ko ou 1 Mo ?
Redimensionnez d'abord les dimensions de l'écran, puis réduisez la qualité jusqu'à ce que vous ayez effacé la cible : commencez à 80 %, et si vous avez toujours terminé, essayez 70 %, puis 60 %. le Compresse d'images L'outil affiche la taille de sortie lorsque vous déplacez le curseur, afin que vous puissiez le regarder franchir le seuil plutôt que de deviner et de réexporter. Le passage du format à WebP vous permet généralement de 25 à 35 % de plus au même paramètre de qualité, ce qui est souvent suffisant seul.
La compression d'une image réduit-elle sa résolution ou ses dimensions ?
Non - la compression et le redimensionnement sont des opérations distinctes La compression d'une photo de 3000×2000 lui laisse 3000×2000 ; il stocke simplement ces pixels en utilisant moins d'octets, au prix de détails fins Si vous voulez moins de pixels, ça' ; est une redimension, et ça' ; est le changement qui permet habituellement d'économiser le plus de poids Faire les deux, dans cet ordre, est ce qui transforme un fichier de caméra de 6 Mo en une image Web de 90 Ko.
