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 lors, la compression d'images est la première chose que je vérifie, pas la dernière. C'est aussi le plus mal compris - "compresser sans perdre de qualité" est traité comme un paradoxe, alors qu'il s'agit vraiment de savoir quel levier rejette les données et lequel ne le fait pas. Ce guide est le modèle mental que j'utilise, construit lors de l'expédition de Toolz.dev et de la configuration de base Web de Vitals Web sur les sites clients : comment fonctionne réellement la compression, quand utiliser Lossy ou Lossless, et pourquoi un nombre de qualité spécifique continue de gagner.
tl;dr : manier Compresse d'images Avec environ 80 % de qualité pour les photos Web, c'est le sweet spot où le fichier se rétrécit de 60 à 80 % et vous ne pouvez toujours pas le distinguer de l'original à la 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 sur WebP en premier. Tout fonctionne dans votre navigateur, rien ne se 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éduit des économies beaucoup plus importantes en jetant des données que votre système visuel est peu susceptible de remarquer - et il est plus intelligent que "supprimer certains pixels. Il convertit l'image de RGB en un modèle de 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 divise l'image en blocs, transforme chacun en coefficients de fréquence et arrondit les valeurs à haute fréquence - les textures subtiles et le bruit - à moins de valeurs. Cette étape d'arrondissement, la quantification, est celle où les données sont réellement perdues. JPEG, LOSSY WEBP et LOSY AVIF suivent tous cet arc.
Le résultat pratique : sans perte, c'est pour les images où chaque pixel est significatif : logos, captures d'écran, diagrammes, tout ce qui contient du texte net. Lossy est pour les photographies et les images naturelles, où "l'aspect identique" est bien plus que "bit pour le peu".
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 n'a pas de "qualité" "sans perte" car il est sans perte - vous l'optimisez différemment. Le niveau de compression (0–9) échange le temps d'encodage pour un fichier plus petit, avec 6 une valeur 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. et la suppression des métadonnées - EXIF, profils de couleur, horodatages - coupe les octets qui n'ont jamais affecté l'image.
WebP est ma valeur par défaut pour le Web : à une qualité de 80 80 – 35 % de moins qu'un JPEG, et il effectue également un mode sans perte qui bat d'environ un quart. AVIF comprime plus fort encore – généralement 50 % plus petit que JPEG – mais encode plus lentement et n’est pas assez universellement pris en charge, je le sors donc 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 je l'ai comprise dans la revue de code plus de fois que je ne peux compter - est d'enregistrer les photos au format PNG. Parce que PNG est sans perte, une photo enregistrée en tant que 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 pour les images naturelles. Utilisez JPEG ou WebP pour les photos et vous récupérez la plupart des poids d'une page gonflée 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 de zoom à 400 %, car personne ne consulte une page Web de cette façon.
Pour rendre ce concret, voici le pass d'optimisation Web que j'exécute sur une page réelle : audit avec Lighthouse pour trouver les images lourdes, redimensionner chacune à sa taille d'affichage, convertir en WebP, compresser à 75 – 80 %, puis relancer Lighthouse pour confirmer. Le résultat typique est de 50 à 80 % de réduction sur le poids total de l'image et un saut mesurable dans la plus grande peinture à contenu, ce qui est la mesure qui m'a envoyé sur tout le 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 toutes les versions compressées à 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 perceptives existent - un SSIM au-dessus de 0,95 est généralement "visuellement sans perte", et les scores Butteraugli de Google sont généralement invisibles, mais honnêtement, pour le travail quotidien, la visualisation de l'original et de la version comprimée côte à côte vous indique presque tout ce que les calculs le feraient.
Questions fréquentes
Comment compresser des images sans perdre de qualité ?
Pour une compression sans perte de pixels, utilisez la PNG ou le Web sans perte. Pour "visuellement sans perte" - aucune différence que vous pouvez voir - utilisez JPEG ou WebP à une qualité de 80 à 90 %. 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 par défaut, soit environ 25 à 35 % de moins que le JPEG avec une prise en charge efficace du navigateur universel. Pour des économies maximales, utilisez AVIF (environ 50 % plus petit que JPEG) servi avec un 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 de manière plus efficace sans en supprimer aucune, de sorte que le résultat est un pixel pour un pixel identique à l'original — PNG fonctionne de cette façon. La compression avec perte supprime définitivement les données que votre œil est peu susceptible de remarquer, ce qui permet d'obtenir des économies bien plus élevées - JPEG fonctionne de cette façon. Les pertes sans pertes donnent généralement une réduction de 10 à 40 %, la perte donne généralement 60 à 90 %. Utilisez sans perte pour le texte et les graphiques, avec perte pour les photographies.
Dois-je redimensionner une image avant ou après la compression ?
Redimensionnez toujours en premier. Comprimer une grande image, puis la réduire, perd à l'effort de compression sur les pixels que le redimensionnement rejette, laissant un fichier à la fois de plus grande et de qualité inférieure. Redimensionnez d'abord les dimensions de l'écran, puis compressez la plus petite image - cet ordre produit le plus petit et le plus propre des résultats.
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 Outil sur Toolz.dev s'exécute entièrement dans votre navigateur à l'aide de l'API Canvas, afin 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 écarte les détails, et le faire deux fois le rejette deux fois – le deuxième passage ajoute des artefacts frais au-dessus des premiers passages, et aucun de cela ne revient. C'est pourquoi vous devez toujours conserver l'original et générer chaque version compressée, 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 3000×2000 laisse 3 000 × 2 000 sans les stocker, en utilisant moins d'octets, au prix de détails fins. Si vous voulez moins de pixels, c'est une redimensionnement, et c'est le changement qui économise généralement 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.
