Choisir le bon niveau de compression des images

Les images représentent souvent la majeure partie des octets téléchargés sur une page et occupent une large part de l’espace visuel. Les optimiser est donc l’un des gains de performance les plus rentables : moins d’octets à télécharger, moins de concurrence pour la bande passante, et un affichage plus rapide du contenu utile. Encore faut-il choisir le bon niveau de compression.

Cet exercice tient autant de l’art que de la science. Il n’existe pas de réglage universel : le paramètre idéal dépend du format, du contenu encodé, de la qualité visée et des dimensions. Comprendre les mécanismes en jeu vous permet de réduire fortement le poids d’un fichier sans dégradation visible. C’est un levier SEO direct, car des images mieux compressées accélèrent le chargement et soutiennent vos Core Web Vitals, notamment le Largest Contentful Paint : un bon point de départ pour optimiser vos images.

Une image matricielle est une grille de pixels. Chaque pixel stocke quatre canaux (rouge, vert, bleu et transparence), soit 4 octets par pixel non compressé. Le poids grimpe donc très vite avec les dimensions : une image de 100 x 100 pixels pèse environ 39 Ko, mais une image de 800 x 800 atteint près de 2 500 Ko.

Un point important : quel que soit le format de transfert, le navigateur réalloue 4 octets par pixel en mémoire au moment du décodage. Sur les appareils mobiles bas de gamme, les très grandes images deviennent ainsi une contrainte forte. Le tableau ci-dessous illustre cette progression du poids non compressé selon les dimensions.

Pour du code source, un compresseur ne doit rien altérer : un seul bit erroné casserait le fichier. Pour les images, en revanche, une représentation approximative est souvent acceptable, car l’œil humain ne perçoit pas toutes les nuances. Un pipeline d’optimisation typique enchaîne donc deux étapes : un filtre avec perte qui élimine certaines données de pixel, puis un filtre sans perte qui compresse ce qui reste. Sur un site entier, mieux vaut automatiser la compression plutôt que de régler chaque fichier.

La première étape est facultative et dépend du format. La vraie différence entre GIF, PNG, JPEG ou WebP tient à la combinaison d’algorithmes qu’ils emploient. Plusieurs techniques entrent en jeu : réduire la profondeur de bits (passer à une palette de 256 couleurs économise déjà 50 % par rapport aux 4 octets par pixel), ou appliquer un encodage delta qui stocke la différence entre pixels voisins plutôt que chaque valeur.

Il n’existe pas de configuration optimale unique. Le bon réglage dépend du contenu et de votre tolérance aux artefacts. Pour un visuel très détaillé, vous pouvez renoncer à la compression avec perte ; pour d’autres, une compression agressive réduira fortement le poids sans gêne perceptible. C’est votre jugement et le contexte qui tranchent.

Les formats avec perte comme le JPEG exposent un paramètre de qualité, généralement de 1 à 100, qui pilote l’ensemble des algorithmes internes. Testez plusieurs valeurs et n’hésitez pas à les réduire : le rendu reste souvent excellent et les économies considérables. Attention toutefois : les niveaux de qualité ne sont pas comparables d’un format à l’autre. Un JPEG en qualité 90 ne donne pas le même résultat qu’un WebP en qualité 90.

Comme les images sont souvent candidates au Largest Contentful Paint, réduire leur durée de chargement améliore directement le LCP, en laboratoire comme sur le terrain. C’est l’une des raisons pour lesquelles la compression mérite une attention particulière dans une démarche de performance.

Quand vous ajustez vos réglages, testez systématiquement les formats WebP et AVIF pour vérifier le gain face aux anciens formats. Veillez cependant à ne pas surcompresser : une compression trop agressive dégrade la qualité perçue. Un CDN d’optimisation d’images aide à trouver les meilleurs paramètres, et des outils comme Butteraugli estiment les différences visuelles pour éviter d’aller trop loin.