Ordre des réglages
- Recadrez si une zone ne sert pas.
- Réduisez les dimensions à la taille d’affichage utile.
- Choisissez le format selon le contenu.
- Baissez la qualité par petites étapes et inspectez le résultat.
- Supprimez les métadonnées si elles ne sont pas nécessaires.
Commencer par les dimensions
Une photo de plusieurs milliers de pixels n’a pas besoin de rester aussi grande pour une vignette, un e-mail ou une image affichée dans une colonne étroite. Réduire largeur et hauteur retire directement des pixels, ce qui offre souvent le gain le plus propre.
Gardez les proportions activées. Si une image doit apparaître à 800 pixels CSS sur un écran dense, une version de 1600 pixels peut être pertinente. Exporter 4000 pixels n’apporte généralement rien à cet emplacement.
Sources : [1]
Choisir un format adapté au contenu
Une photographie tolère souvent JPG, WebP ou AVIF avec perte. Une capture d’écran, un logo raster ou une interface aux aplats nets peut mieux résister en PNG ou en WebP sans perte.
Convertir un PNG photographique vers WebP peut réduire fortement son poids. À l’inverse, passer un logo transparent en JPG ajoute un fond et peut créer des artefacts autour des contours.
Sources : [2]
Ajuster la qualité sans chercher un nombre magique
Le curseur de qualité agit sur les formats avec perte pris en charge. Dans les navigateurs, l’encodage Canvas accepte une valeur de qualité pour JPEG et WebP, mais le résultat précis dépend de l’implémentation du navigateur.
Commencez à 85, examinez le fichier, puis essayez 78 ou 72 si le gain est nécessaire. Surveillez les contours, les dégradés, les visages, le bruit et les petits caractères. Revenez au dernier réglage acceptable.
Sources : [3]
Qualité et effort de compression ne sont pas identiques
La qualité détermine généralement la quantité d’information visuelle sacrifiée par un encodage avec perte. L’effort de compression demande plutôt à l’encodeur de chercher plus longtemps une représentation compacte.
Un effort supérieur peut prendre plus de temps sans changer visiblement l’image. Il ne garantit pas un gain important sur chaque format. Mesurez toujours le fichier obtenu.
| Réglage | Effet principal | Risque |
|---|---|---|
| Dimensions | Retire des pixels | Détail insuffisant si trop petit |
| Qualité | Réduit les données visuelles | Artefacts visibles |
| Format | Change la méthode de stockage | Compatibilité ou propriété perdue |
| Compression | Optimise l’encodage | Temps de calcul plus long |
Vérifier à la taille réelle
Comparez l’original et la sortie à 100 %, puis à la taille d’utilisation. Un défaut invisible dans une miniature peut devenir évident sur une impression, tandis qu’une différence visible à 400 % peut être sans importance pour un e-mail.
Conservez l’original et donnez un nom distinct à la version optimisée. Si une plateforme impose une limite stricte, réduisez progressivement les dimensions et la qualité au lieu d’écraser la source.
- Contrôler les détails et les dégradés
- Vérifier la transparence
- Ouvrir le fichier dans l’application cible
- Noter dimensions et poids obtenus
- Conserver l’original séparément
Tester dimensions et qualité
Produisez une copie, comparez-la à sa taille d’utilisation et ajustez sans toucher à l’original.
Optimiser une imageOutil spécialisé : Compresser sous un poids cible
Questions sur la compression
Conversions liées
Sources et références
- [1]Serve responsive images - web.dev
- [2]Choose the right image format - web.dev
- [3]HTMLCanvasElement: toBlob() method - MDN Web Docs