Les images sur le web

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 pour l’accessibilité de votre site.

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.

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écessaires pour transmettre la forme et la qualité souhaitée de cette illusion.

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.
Chaque pixel d’une image a un poids. Réduire la dimension d’une image aux pixels nécessaires permet de l’optimiser drastiquement.

Les PPI

Cela correspond au nombre de pixels par pouce (Pixels Per Inch). C’est une unité de mesure de la résolution. Plus le nombre est élevé, plus on pourra afficher des images de haute résolution, car cela veut dire que l’on a plus de pixels sur un seul pouce (2,54 cm).

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

Si ce n’est pas la densité de l’image qui compte, c’est celle du matériel qui importe. Les écrans peuvent avoir un PPI d’affichage plus ou moins élevé. Tandis que deux écrans mesurent la même taille, leurs résolutions peuvent-être très différente parfois.

Par exemple, un écran de Macbook Pro 14 pouces a un PPI de 254 (soit une résolution de 2560×1600) tandis qu’un ordinateur Full HD plus classique de 14 pouces ayant une résolution de 1920×1080 a un PPI de 157.

Quel impact sur l’image ?

Si le PPI 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.

Un exemple

Si vous souhaitez par exemple avoir une grille avec des images de 300px, il faut enregistrer vos images à 600px de large, pour compenser les écrans Retina qui ont une densité deux fois supérieure.

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 alors indiquer plusieurs sources, et c’est le navigateur qui s’occupe de choisir l’image la plus adaptée.

En lire plus

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. Un·e utilisateur·ice avec une faible connexion doit pouvoir charger correctement le site web et accéder à toutes les fonctionnalités.

La pratique du web résilient s’articule autour de tout un tas de courants et de pratiques : permacomputing, web frugal, small web