Vous serez amené, en codant un site web, à manipuler des images. Chaque image présente sur une page doit être chargée par le navigateur. La vitesse de téléchargement dépend du poids de l’image. Optimiser les images est ainsi un enjeu critique.
Qu’est-ce qu’une image digitale ?
Une image numérique est une représentation visuelle codée en format binaire qui peut être stockée et décodée par des logiciels spécifiques. Il existe deux types d'images numériques : les images tramées (ou bitmap), qui consistent en une carte de pixels d'une seule couleur, et les images vectorielles, qui sont composées de descriptions mathématiques des données de l'image.
La compression d’images
La compression d’images est le processus qui consiste à réduire la quantité de données nécessaires pour décrire les mêmes informations (compression sans perte) ou des informations similaires (compression avec perte). Lorsqu'elle est appliquée aux images, la compression vise à réduire la redondance des données, ce qui permet de stocker ou de transmettre des images avec un poids réduit. Plusieurs algorithmes existent pour y parvenir.
En raison de sa composition en pixels individuels, une image tramée crée une illusion d'optique qui dépend des propriétés de l'œil humain, même sans compression. La compression d'image consiste à trouver un équilibre entre la quantité d'informations nécessaire pour transmettre la forme et la qualité souhaitée de cette illusion. En pratique, chaque image possède des qualités et des caractéristiques uniques, ce qui nécessite une compression spécifiquement adaptée.
Hito Steyerl, e-flux journal, Issue #10, novembre 2009
Guerre et zones de non-droit : il n'y a pas de fatalité aux images faibles et inutiles
France Culture, juin 2025
Les formats d’images
JPEG
Le format le plus couramment utilisé sur le Web est le JPG, qui offre une compression supérieure à celle du PNG, mais dont la précision est généralement inférieure.
PNG
Le format PNG est un autre format fréquemment utilisé sur le Web. Bien que sa compression soit moins puissante, il offre une plus grande précision et la possibilité d'utiliser la transparence (contrairement au format JPG).
GIF
Le format GIF est couramment utilisé pour stocker de courtes animations et est le premier format utilisé sur le Web. Cependant, il présente une limitation importante dans la mesure où il ne peut pas encoder plus de 256 couleurs.
WebP
WebP est un format créé par Google dans les années 2010 spécialement pour une utilisation sur le web. Il offre une compression haute performance qui devient progressivement populaire sur les sites web.
SVG
Le format SVG est le seul format d'image vectorielle adapté au web. Sa syntaxe ressemble beaucoup à celle du HTML/CSS, ce qui signifie qu'il peut être facilement intégré dans le code sans utiliser la balise <img>. En raison de ses caractéristiques intrinsèques, une image SVG n'a pas de taille spécifique et peut donc être redimensionnée à l'infini sans perte de qualité visuelle.
Les outils de compression
Les logiciels
Caesium, ImageOptim, GIMP
Les sites
TinyPNG
Quelle dimension ?
La résolution
Une donnée important pour optimiser au mieux vos images, c’est de définir des dimensions appropriées
Les PPI
Cela correspond au nombre de points par pouce imprimé. C’est une unité de mesure de la résolution. Plus le nombre de points est élevé, plus la qualité de l’impression est élevée. L’image a plus de netteté et de détails. En résumé, c’est le nombre de points par pouce.
Le mythe du 72 PPI
La résolution d’une image n’a aucune importance pour son affichage ! Vous pouvez tout aussi bien fixer cette résolution à 2, à 300 ou à 1200 ppi cela ne changera rien à la qualité de votre image. L’important pour la qualité d’une image numérique ce sont ses dimensions en pixels
La résolution du matériel
Ce n’est pas la densité de l’image qui compte, mais celle du matériel. Les écrans peuvent avoir un PPI d’affichage plus ou moins élevé. Les écrans des Macbook Pro 14 ont un PPI de 254, alors que d’autres peuvent avoir 150.
Quel impact sur l’image ?
Si le PPI, c'est le nombre de pixels que l’on peut mettre sur un pouce, alors une image de 200px, qui fait 5cm sur un écran de 100 ppi, fera 10cm sur un écran de 50 ppi.
Quelle valeur utiliser ?
Il faut déjà savoir quelle taille vous voulez donner à vos images : la largeur de l’écran ? La moitié ? 300px pour créer une grille d’images ? Définir la taille permet de choisir la meilleure stratégie.
De manière générale, si vous voulez être en plein écran, vous n'avez pas besoin de dépasser 3840px.
En utilisant ensuite la propriété max-width:3840px en CSS, on s’assure que l’image ne pourra pas dépasser le maximum défini.
Aller plus loin : les images responsives
Il est possible de définir plusieurs sources d’images dans une même balise <img>. À l’aide des attributs sizes et srcset, on peut indiquer plusieurs sources, et c’est le navigateur qui s’occupe de choisir l’image la plus adaptée.
Notes sur le web résilient
Le web résilient, c'est une approche consciente et éthique du web. Pas de code inutile, et pas de poids superflux. Quelqu’un avec une faible connexion doit pouvoir charger correctement le site web, et celui-ci prends peu de place sur le serveur.
La pratique du web résilient s’articule autour de tout un tas de courants de pratiques : permacomputing, web frugal, small web, etc.
Sarah Garcin, designer graphique
