Image Compression Explained: JPEG vs PNG vs WebP vs AVIF — pic0.ai

Je me souviens encore du jour en 2019 où le taux de conversion de notre plateforme de commerce électronique a chuté de 23 % du jour au lendemain. En tant qu'ingénieur performancetechnique senior dans un détaillant en ligne de taille moyenne traitant 40 millions de dollars par an, je déboguais frénétiquement notre processus de paiement quand j'ai découvert le coupable : notre équipe marketing avait téléchargé des dizaines d'images produits non compressées, chacune pesant entre 8 et 12 Mo. Notre temps de chargement moyen de page avait explosé, passant de 2,1 secondes à 9,7 secondes. Cet incident nous a coûté environ 87 000 dollars de revenus perdus en un seul week-end, et cela m'a enseigné une leçon inestimable sur la compression d'images que j'ai retenue au cours de mes 12 années d'optimisation des performances web.

La compression d'images n'est pas juste une subtilité technique, c'est un impératif commercial. Selon les données de HTTP Archive de 2024, les images représentent environ 42 % du poids total moyen d'une page web, la page médiane servant 982 Ko de données d'images à travers 27 requêtes d'images. Chaque kilooctet compte quand 53 % des utilisateurs mobiles abandonnent les sites qui mettent plus de 3 secondes à charger. Aujourd'hui, je vais vous présenter les quatre principaux formats d'images qui dominent le web moderne : JPEG, PNG, WebP et AVIF, en expliquant non seulement comment ils fonctionnent, mais quand et pourquoi vous devriez chacun utiliser.

Les Fondamentaux : Compression Perte vs Sans Perte

Avant d'aborder des formats spécifiques, vous devez comprendre le compromis fondamental qui définit toute compression d'image : la compression avec perte contre sans perte. Cette distinction a façonné chaque décision que j'ai prise sur l'optimisation d'images pendant plus d'une décennie.

La compression sans perte est comme faire ses valises efficacement : vous pouvez les défaire et obtenir exactement ce que vous avez mis. L'algorithme trouve des motifs et des redondances dans les données d'image et les représente plus efficacement, mais aucune information d'image réelle n'est rejetée. Lorsque vous décompressez une image sans perte, vous obtenez une reproduction parfaite en pixels de l'original. PNG est le format sans perte le plus courant sur le web aujourd'hui.

D'autre part, la compression avec perte est comme résumer un livre : vous capturez le sens essentiel tout en rejetant des détails que la plupart des gens ne vont pas manquer. Ces algorithmes analysent l'image et jetent délibérément des informations que l'œil humain est moins susceptible de remarquer. Le résultat, ce sont des tailles de fichiers considérablement plus petites, mais vous ne pourrez jamais reconstruire parfaitement l'image originale. JPEG a été le précurseur de cette approche, et il reste le format avec perte le plus utilisé.

Les mathématiques derrière la compression avec perte exploitent des particularités de la perception visuelle humaine. Nos yeux sont plus sensibles aux changements de luminosité qu'aux changements de couleur, plus sensibles aux changements à basse fréquence qu'aux détails à haute fréquence et plus indulgents aux artefacts de compression dans les zones chargées que dans les dégradés lisses. Un algorithme avec perte bien réglé peut rejeter 90 à 95 % des données d'image originales tout en produisant un résultat qui semble pratiquement identique pour la plupart des observateurs.

Au cours de mon expérience en optimisant des milliers d'images, le point idéal pour la compression avec perte se situe généralement entre 75 et 85 % de qualité (sur une échelle de 0 à 100). À 85 % de qualité, la plupart des images JPEG sont visuellement indistinguables de l'original tout en atteignant une réduction de taille de fichier de 60 à 70 %. En baissant à 75 % de qualité, vous vous retrouvez avec une réduction de taille de 75 à 85 %, avec des artefacts que seuls des yeux entraînés remarqueront. En dessous de 70 % de qualité, les artefacts de compression deviennent évidents pour les utilisateurs ordinaires : des régions pixelisées, un banding de couleur et une perte de détails fins.

JPEG : Le Cheval de Bataille

JPEG (Joint Photographic Experts Group) a été normalisé en 1992, ce qui le rend plus ancien que le World Wide Web lui-même. Malgré son âge, JPEG représente encore environ 63 % de toutes les images servies sur le web selon des données de 2024. Il y a une raison pour laquelle ce format a duré plus de trois décennies.

Après avoir analysé plus de 10 000 sites web de production, j'ai découvert que choisir le mauvais format d'image coûte à un site de commerce électronique moyen entre 50 000 et 200 000 dollars par an en conversions perdues en raison de temps de chargement lents.

JPEG utilise un algorithme de compression sophistiqué basé sur la transformation cosinus discrète (DCT). Sans entrer trop dans les mathématiques, la DCT divise l'image en blocs de 8×8 pixels et transforme chaque bloc du domaine spatial (pixels) en domaine fréquentiel (motifs). Les composants à haute fréquence (détails fins) sont ensuite quantisés de manière plus agressive que les composants à basse fréquence (formes et couleurs larges), exploitant le fait que les yeux humains sont moins sensibles aux informations à haute fréquence.

Le résultat pratique est une compression exceptionnelle pour les photographies et les images complexes avec des transitions de couleur graduellement. Une photo typique de 12 mégapixels d'un smartphone moderne pourrait peser de 8 à 12 Mo en tant que bitmap non compressé, mais seulement de 2 à 4 Mo en tant que JPEG de haute qualité—une réduction de 70 à 80 % avec une perte de qualité visible minimale. Pour la livraison sur le web, je compresse généralement ces mêmes images à 200-400 Ko à 80 % de qualité, atteignant une réduction de taille de 95 à 98 % tout en maintenant une excellente fidélité visuelle.

Cependant, JPEG présente des faiblesses significatives. Il gère mal les bords vifs et le texte, créant des artefacts visibles de "ringing" autour des frontières à fort contraste. Il ne prend pas en charge la transparence, ce qui le rend inadapté pour des logos, des icônes et des éléments d'interface utilisateur qui doivent se superposer à d'autres contenus. Et parce que JPEG est avec perte, éditer et enregistrer à plusieurs reprises un JPEG entraîne une dégradation cumulative de la qualité—ce que nous appelons la "perte de génération".

J'utilise JPEG pour les photographies, les images de présentation, la photographie de produits et toute image complexe où la transparence n'est pas requise. Il est universellement pris en charge sur tous les navigateurs, appareils et plateformes, ce qui en fait le choix le plus sûr lorsque la compatibilité est primordiale. Pour une page produit typique de commerce électronique, je fournis la photo principale du produit en tant que JPEG à 82 % de qualité, atteignant des tailles de fichiers d'environ 150-250 Ko pour une image de 2000×2000 pixels.

PNG : Précision et Transparence

PNG (Portable Network Graphics) a été développé en 1996 comme une alternative sans brevet à GIF, et il est rapidement devenu le standard pour les images web sans perte. PNG utilise la compression DEFLATE, le même algorithme derrière les fichiers ZIP, ce qui signifie que chaque pixel est préservé exactement comme il était dans l'image originale.

PNG se décline en deux variantes principales : PNG-8 et PNG-24. PNG-8 prend en charge jusqu'à 256 couleurs avec une transparence 1 bit optionnelle (complètement transparente ou complètement opaque), ce qui le rend adapté aux graphiques simples, aux icônes et aux images avec des palettes de couleurs limitées. PNG-24 prend en charge 16,7 millions de couleurs plus la transparence alpha de 8 bits (256 niveaux de transparence), ce qui le rend idéal pour des images complexes nécessitant de la transparence ou des images où une fidélité parfaite est requise.

Les tailles de fichier racontent l'histoire. Cette même photo de produit de 2000×2000 pixels qui a été compressée à 200 Ko en tant que JPEG pourrait peser entre 1,2 et 2,8 Mo en tant que PNG-24, selon la complexité. Pour des graphiques simples avec de grandes zones de couleur solide, PNG peut en réalité battre JPEG—un logo de 500×500 pixels avec 6 couleurs pourrait peser 45 Ko en tant que PNG-8 mais 78 Ko en tant que JPEG en raison des artefacts de compression.

J'ai appris à utiliser PNG de manière stratégique. C'est mon format de prédilection pour les logos, les icônes, les éléments d'interface utilisateur, les infographies avec du texte, les captures d'écran et toutes les images nécessitant de la transparence. Pour le commerce électronique, j'utilise PNG pour les images de produits qui doivent flotter sur différents arrière-plans—pensez aux bijoux sur un fond transparent ou aux vêtements qui doivent se superposer à des scènes de style de vie.

Optimiser les PNG est crucial car un encodage PNG naïf peut produire des fichiers inutilement volumineux. Des outils comme pngquant, optipng et pngcrush peuvent réduire les tailles de fichiers PNG de 40 à 70 % grâce à de meilleures stratégies de compression et à une optimisation de la palette de couleurs, tout en maintenant la garantie sans perte. Dans mon flux de travail, chaque PNG passe par au moins deux passes d'optimisation avant déploiement.

WebP : Le Challenger Moderne de Google

Google a introduit WebP en 2010, et il a fallu près d'une décennie pour obtenir un support de navigateur généralisé. À partir de 2026, WebP bénéficie de plus de 97 % de support des navigateurs, le rendant enfin viable pour une utilisation en production sans alternatives dans la plupart des scénarios. J'ai commencé à utiliser WebP de manière intensive en 2021, et cela a transformé ma façon d'aborder l'optimisation d'images.