Rapport de compression d'image : Guide de qualité et de taille

Mis à jour le: June 28, 2026

Le ratio de compression d'image vous indique de combien une image a diminué après l'exportation. C'est utile, mais seulement si vous associez ce nombre à une vérification visuelle. Un ratio de 12:1 peut être excellent pour une photo avec un arrière-plan flou et inacceptable pour une capture d'écran de produit contenant du petit texte.

Ce guide vous donne la formule, les plages de qualité habituelles et une liste de contrôle de publication pour WebP, JPEG, PNG et AVIF. Utilisez-le lorsque vous avez besoin de pages plus légères sans rendre les images floues.

Réponse rapide : quel est un bon ratio de compression d'image ?

Un bon ratio de compression d'image est la réduction de bytes la plus élevée qui conserve un aspect net à la taille d'affichage finale. Calculez-le ainsi : taille de fichier originale divisée par taille de fichier compressé. Une image de 4 MB compressée à 500 KB a un ratio de 8:1.

Pour les photos web, un objectif pratique est souvent de 5:1 à 12:1 après redimensionnement et exportation en WebP ou AVIF. Pour les captures d'écran, les logos et les images d'interface utilisateur riches en texte, des ratios plus faibles sont normaux car les bords nets et les couleurs plates nécessitent une protection. PNG sans perte ou WebP sans perte ne peuvent produire que 1.2:1 à 3:1.

Ne jugez pas la compression uniquement par le ratio. Inspectez les visages, les bords de produits, les dégradés et le petit texte. Si les utilisateurs peuvent voir des blocages, un effet d'anneau (ringing), un étalement ou un banding, le ratio est trop agressif même si la taille du fichier semble attrayante.

Comment calculer le ratio de compression d'image ?

Utilisez la taille en bytes originale et la taille finale en bytes après toutes les étapes réelles de publication : rognage, redimensionnement, suppression des métadonnées, conversion de format et réglage de la qualité. Si vous calculez avant le redimensionnement, le nombre est généralement trompeur.

Utilisez le compte exact en bytes lorsque vous ajustez un pipeline de construction. Utilisez des KB ou MB arrondis lorsque vous documentez les paramètres éditoriaux. La décision ne change pas : plus petit est utile uniquement tant que l'image communique toujours sa fonction.

Les directives d'image de Google soulignent à la fois la vitesse et la qualité : les images influencent souvent le poids de la page, mais les images floues ou peu claires sont mauvaises pour les utilisateurs et les aperçus de recherche. Il recommande également des éléments d'image HTML crawlables, un texte alt descriptif et des formats pris en charge tels que JPEG, PNG, WebP, SVG et AVIF dans Google Images best practices.

Quel ratio utiliser pour WebP, JPEG, PNG et AVIF ?

Le bon ratio dépend du contenu de l'image. Les photographies se compressent difficilement car les petits changements de texture sont difficiles à remarquer. Les captures d'écran et les diagrammes se compressent moins bien car le texte, les lignes et les bordures d'interface utilisateur rendent les artefacts évidents.

Le guide des formats d'image de MDN note que WebP peut être avec ou sans perte (lossy or lossless), tandis que le WebP avec perte et le WebP sans perte utilisent différentes représentations internes. C'est pourquoi un seul "ratio WebP" n'existe pas ; le réglage correct dépend du fait que le contenu puisse tolérer la perte. Consultez image file type and format guide de MDN pour le comportement des formats.

Pour cet article, j'ai encodé localement quatre graphiques de 1400 par 788 avec ImageMagick et WebP. Les fichiers publiés sont de 23 KB, 28 KB, 35 KB et 40 KB. Ce sont des tailles inhabituellement petites car les assets sont des diagrammes propres, pas des photos d'appareil ; utilisez ces chiffres comme preuve que les graphiques plats se compressent différemment du détail photographique.

Pour des compromis de format plus larges, comparez cet article avec AVIF vs WebP Comparison. Si vous avez besoin des détails algorithmiques derrière les artefacts, lisez How Image Compression Works.

Pourquoi les réglages de qualité cessent-ils d'économiser beaucoup après un certain point ?

La plupart des encodeurs ont une victoire précoce marquée et un compromis tardif douloureux. Passer d'un fichier appareil original à WebP q80 peut supprimer beaucoup de données invisibles. Passer de q70 à q55 peut économiser moins d'octets tout en rendant les artefacts plus faciles à remarquer.

L'effet pratique est simple : la courbe de taille s'aplatit tandis que la courbe de qualité continue de chuter. C'est pourquoi WebP q75-85 est une bande de départ courante pour les photos d'articles et de produits. Ce n'est pas une règle pour tous les fichiers ; c'est un bon premier test avant d'inspecter le résultat.

Utilisez cet ordre lorsque vous ajustez la qualité :

1. Redimensionner à la largeur rendue maximale que vous servez réellement.
2. Exporter un WebP à q85, un autre à q80 et un troisième à q75.
3. Les ouvrir côte à côte avec l'original à la taille d'affichage prévue.
4. Vérifier les visages, le texte, les bords des produits, les ombres et les dégradés lisses.
5. Choisir la version la plus petite qui ne semble pas dégradée.
6. Enregistrer le ratio résultant pour ce type de contenu.

Si l'image est susceptible d'être l'élément Largest Contentful Paint (LCP), la compression n'est qu'une partie de la solution. Les directives web.dev LCP recommandent de donner la priorité aux images LCP probables avec fetchpriority="high" et de vérifier la découverte des ressources dans le waterfall réseau dans Optimize Largest Contentful Paint.

Comment comparer les ratios de compression entre formats ?

Comparez les formats à une qualité visible équivalente, pas à des numéros de curseur correspondants. JPEG q82, WebP q78 et AVIF q55 peuvent tous être des résultats raisonnables du même source. Les nombres sont des contrôles d'encodeurs, pas des scores de qualité universels.

C'est là que les équipes lisent souvent mal les ratios. Un JPEG à 5.7:1 peut être pire qu'un WebP à 8:1 si les deux ont l'air identiques à l'écran. Un WebP sans perte à 2:1 peut être meilleur qu'un WebP avec perte à 10:1 si l'asset est une capture d'écran de tableau de prix.

Pour le travail par lots, générez plusieurs sorties du même maître et gardez la décision visible dans les noms de fichiers ou les journaux de construction. Le Batch Resize Guide couvre le flux de travail "redimensionner d'abord", et Complete Image Optimization Checklist donne un dernier passage avant publication.

Quand un ratio élevé est-il un mauvais signe ?

Un ratio élevé est un signal d'alerte lorsque l'image contient des détails que les gens inspectent. Les propriétaires de magasins remarquent la texture du produit. Les designers remarquent le type adouci. Les acheteurs remarquent les bords boueux des bijoux. Dans ces cas, le "fichier le plus petit" peut coûter plus qu'il n'en économise.

Les ratios élevés méritent une inspection supplémentaire lorsque l'image comprend :

• Étiquettes de produits, texte d'emballage, ingrédients ou numéros de série.
• Captures d'écran d'interface utilisateur, tableaux de bord, code ou tableaux de prix.
• Visages, texture de la peau, cheveux, bijoux, tissu ou nourriture.
• Dégradés lisses, ciels, ombres, néons ou arrière-plans sombres.
• Lignes fines, icônes, bords transparents ou marques de marque.
• Images qui seront zoomées, rognées ou réutilisées dans des publicités.

Pour le commerce électronique, utilisez une vérification plus stricte que pour une image de blog décorative. Une vignette de catégorie peut tolérer plus de perte qu'une image de produit principale. Si le même maître alimente les deux, créez des exports séparés au lieu de forcer un seul ratio pour servir chaque emplacement.

Quel flux de travail donne la meilleure taille sans perte visible de qualité ?

Utilisez le ratio de compression comme une mesure, pas comme premier réglage. La qualité de sortie dépend davantage de la source, du rognage, des dimensions en pixels et du choix de format que du nombre final de ratio.

Utilisez cette séquence de publication :

1. Conserver un fichier maître qui n'a pas été réencodé plusieurs fois.
2. Rogner pour le cas d'utilisation final avant de redimensionner.
3. Redimensionner à la largeur rendue maximale, avec des variantes responsives si nécessaire.
4. Choisir le format selon le contenu : WebP ou AVIF pour les photos, sans perte pour les graphiques riches en texte.
5. Exporter deux ou trois candidats de qualité.
6. Supprimer les métadonnées des copies publiques à moins que ce ne soit légalement ou éditorialement requis.
7. Comparer les candidats à la taille rendue sur ordinateur et mobile.
8. Vérifier l'image LCP probable séparément des images sous le pli (below-fold).
9. Publier vers une URL CDN stable et vérifier HTTP 200.
10. Enregistrer les bytes finaux, le ratio et le réglage pour que le lot suivant soit plus rapide.

Si vous visez un budget de taille strict, commencez avec le flux de travail dans Compress Image to 100KB ou Compress Image to 200KB. Pour les pages mobiles, associez la décision du ratio au Mobile Image Optimization Guide.

Comment le ratio de compression et le SEO s'emboîtent-ils ?

Le ratio de compression aide indirectement au SEO. Des images plus petites réduisent la taille de transfert, ce qui peut améliorer les performances de chargement, surtout lorsque l'image compressée est également correctement dimensionnée. Mais les moteurs de recherche et les utilisateurs ont toujours besoin d'une image utile, d'une URL stable, d'un texte environnant lisible et d'un texte alt descriptif.

Ne livrez pas une petite image qui semble cassée dans les aperçus de recherche ou les cartes sociales. Google recommande explicitement de choisir une image représentative pour les métadonnées et d'éviter les images génériques pour les données structurées ou og:image lorsqu'une image plus pertinente existe. L'image doit être rapide et claire.

Pour un article de blog, cela signifie généralement :

• Utiliser une couverture WebP unique dans le frontmatter et les données Open Graph.
• Garder la couverture lisible à la taille d'aperçu social.
• Placer l'image près du texte qui explique le point clé.
• Utiliser un texte alt descriptif, pas un bourrage de mots-clés.
• Servir l'asset final depuis une URL CDN crawlable.
• Éviter de remplacer les URL d'images indexées à moins que l'asset ne soit incorrect.

Le ratio n'est qu'une ligne dans le registre de publication. Il doit se situer à côté de la largeur rendue, du format, du réglage de qualité, de la taille en bytes et des notes visuelles.

Liste de contrôle du ratio de compression

Avant de publier, faites cette brève révision :

L'objectif utile n'est pas la "compression maximale". C'est un réglage reproductible qui garde la page légère et l'image fiable. En cas de doute, utilisez le fichier plus petit uniquement après que la vérification visuelle ait été validée.