Chaque fichier image que vous voyez sur le web a été compressé. La méthode de compression détermine à la fois la taille du fichier et si des informations visuelles ont été perdues dans le processus. Comprendre la différence entre compression avec et sans perte vous aide à faire le bon choix de format pour chaque image de votre site.
Ce guide explique comment chaque méthode fonctionne, quand utiliser laquelle, et comment choisir les bons réglages.
Comment fonctionne la compression avec perte
La compression avec perte réduit la taille du fichier en supprimant définitivement des données visuelles. L'encodeur analyse l'image et supprime les informations que le système visuel humain est le moins susceptible de percevoir : les variations subtiles de couleur, les textures fines haute fréquence et le bruit.
Le processus est irréversible. Une fois les données supprimées, elles ne peuvent pas être récupérées. Compresser une image déjà compressée en lossy une seconde fois supprime encore plus de données, c'est pourquoi vous devez toujours compresser à partir de la source de la meilleure qualité disponible.
La compression avec perte en pratique :
- Le JPG utilise la transformée en cosinus discrète (DCT) pour diviser l'image en blocs de 8x8 pixels et supprimer les composantes haute fréquence dans chaque bloc. À faible qualité, cela produit les artefacts "en blocs" caractéristiques du JPG.
- Le WebP lossy utilise un schéma de codage prédictif dérivé du codec vidéo VP8. Il analyse chaque bloc de pixels en prédisant son contenu à partir des blocs voisins, puis encode uniquement la différence. Cela produit moins d'artefacts visibles que le JPG à taille de fichier équivalente.
- L'AVIF lossy utilise le codage intra-frame du codec vidéo AV1. Il opère sur des blocs de taille variable (jusqu'à 128x128 pixels) avec des modèles de prédiction plus sophistiqués. Le résultat est une efficacité de compression supérieure, en particulier sur les contenus photographiques avec des dégradés et des textures.
Comment fonctionne la compression sans perte
La compression sans perte réduit la taille du fichier sans supprimer aucune donnée. L'image décompressée est identique bit par bit à l'original. Cela est réalisé par un encodage plus efficace des données pixel, pas par une suppression de données.
Les techniques lossless courantes :
- Codage par plages (RLE) : remplace les séquences de valeurs identiques par un compteur et une valeur. Efficace sur les images avec de grandes zones de même couleur.
- Codage de Huffman : attribue des codes binaires plus courts aux valeurs fréquentes et des codes plus longs aux valeurs rares.
- LZ77 et dérivés : trouvent et référencent les motifs répétés dans le flux de données.
- Filtres de prédiction : prédisent la valeur de chaque pixel à partir de ses voisins, puis encodent uniquement la différence. Les petites différences se compressent mieux que les valeurs brutes.
La compression sans perte dans les formats d'image :
- Le PNG utilise une combinaison de filtres de prédiction et de compression DEFLATE (LZ77 + Huffman). Il atteint des taux de compression typiques de 2:1 à 3:1 sur du contenu photographique, et des ratios bien supérieurs sur les graphiques à aplats.
- Le WebP lossless utilise un modèle de prédiction plus avancé avec cache couleur, références arrière et codage entropique. Il produit régulièrement des fichiers 25 à 30% plus petits que le PNG.
- L'AVIF lossless utilise le codage intra-frame AV1 en mode sans perte. Les résultats sont comparables au WebP lossless, parfois légèrement plus petits.
Comparaison de la qualité visuelle
La différence visuelle entre lossy et lossless dépend entièrement du niveau de compression et du contenu de l'image.
À qualité 80-90 (avec perte) : l'image compressée est perceptuellement identique à l'original sans perte pour du contenu photographique. Aucun artefact visible à distance de lecture normale. C'est la plage standard pour les images web.
À qualité 60-79 (avec perte) : des différences mineures peuvent être visibles en examinant de près, en particulier sur les bords nets, le texte fin et les dégradés lisses. À la taille d'affichage web normale, la plupart des utilisateurs ne les remarqueront pas.
À qualité 40-59 (avec perte) : les artefacts deviennent visibles. Le JPG montre des distorsions en blocs, le WebP montre un adoucissement et du ringing occasionnel autour des bords, l'AVIF gère mieux cette plage mais montre quand même un lissage des textures fines.
À qualité inférieure à 40 (avec perte) : clairement dégradé. Acceptable uniquement pour de très petites miniatures où le détail n'est pas important.
Sans perte : reproduction pixel par pixel. L'image décompressée est mathématiquement identique à la source. Les fichiers sont 3 à 10 fois plus volumineux qu'en lossy à qualité 80.
Quand utiliser la compression avec perte
La compression avec perte est le bon choix pour la grande majorité des images web. Utilisez-la quand :
- Contenu photographique : photos, images hero, images produit, bannières, arrière-plans. La vision humaine tolère bien la compression avec perte sur les images naturelles.
- La performance compte : chaque page web où le temps de chargement est important. La compression avec perte offre 50 à 80% de réduction par rapport au lossless.
- Réseaux sociaux et plateformes de contenu : les images vues rapidement à la résolution de l'écran, pas zoomées pour inspection.
- Miniatures et aperçus : une compression agressive (qualité 60-70) est parfaitement acceptable pour les petites tailles d'affichage.
Formats recommandés pour la compression avec perte : WebP pour la compatibilité large, AVIF pour la compression maximale, JPG quand un support ancien est requis.
Quand utiliser la compression sans perte
La compression sans perte est nécessaire quand la précision pixel compte plus que la taille du fichier :
- Captures d'écran et diagrammes techniques : la compression avec perte crée des artefacts autour du texte et des lignes nettes, rendant le texte moins lisible et les diagrammes imprécis.
- Logos et icônes : les graphiques à aplats avec des bords nets souffrent des artefacts de ringing du lossy. Le lossless préserve des bords nets. (Le SVG est souvent un choix encore meilleur pour les graphiques vectoriels.)
- Imagerie médicale et scientifique : tout contexte où modifier les valeurs de pixels pourrait affecter l'interprétation nécessite une compression sans perte.
- Fichiers source pour édition ultérieure : si l'image sera retraitée plus tard (recadrage, correction couleur, compositing), partez d'une source sans perte pour éviter la dégradation cumulative.
- Pixel art : la compression avec perte détruit les frontières nettes entre pixels qui définissent le style pixel art.
Formats recommandés pour la compression sans perte : WebP lossless pour la taille la plus petite, PNG pour la compatibilité maximale.
Peut-on combiner les deux ?
Oui. La stratégie d'image web la plus efficace combine les deux types de compression :
Utilisez le lossy pour les photographies et les images en tons continus. Ce sont généralement les images les plus lourdes de vos pages et celles qui bénéficient le plus de la compression avec perte.
Utilisez le lossless pour les graphiques, les textes incrustés et les icônes. Ces images sont souvent plus légères au départ, et la différence de qualité due au lossy y est plus visible.
Utilisez l'élément <picture> pour servir plusieurs formats. Combinez AVIF (meilleure compression lossy) avec un fallback WebP et JPG en dernier recours :
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" width="800" height="600">
</picture>
Utilisez l'amélioration progressive. Servez de l'AVIF aux 93% de navigateurs qui le supportent, du WebP aux navigateurs modernes restants, et du JPG aux navigateurs anciens. Chaque utilisateur reçoit la meilleure compression que son navigateur peut gérer.
Le point essentiel : vous n'avez pas à choisir un seul type de compression pour tout votre site. Adaptez la méthode au contenu, image par image.
Compressez vos images
Morphix compresse vos images JPG, PNG et WebP directement dans le navigateur. Choisissez le lossy pour les photos, le lossless pour les graphiques. Aucune inscription requise avec l'offre gratuite.