Les images matricielles peuvent être considérées comme un ensemble d'instructions pixel par pixel pour le rendu d'une grille à deux dimensions. Les formats d'image matricielle courants incluent le format GIF (.gif), JPEG (.jpg), PNG (.png) et WebP (.webp). La façon dont chaque format d'image compresse et encode ces instructions diffère considérablement d'une taille de fichier à l'autre: une image photo encodée au format JPEG peut ne faire que quelques centaines de kilo-octets, tandis qu'une même image encodée au format PNG peut représenter plusieurs mégaoctets, sans aucune différence notable de qualité pour l'utilisateur final.
Une source d'image matricielle mise à l'échelle au-delà de ses dimensions inhérentes apparaîtra déformée, obstruée ou floue:
Les images matricielles constituent l'outil idéal pour les œuvres contenant des niveaux de détail réels.
Tout comme le choix entre les images matricielles et vectorielles, le choix du type d'image matricielle approprié dépend en fin de compte du cas d'utilisation. Lorsque nous décomposons les images matricielles en encodages, nous parlons des méthodes utilisées pour décrire leur contenu et des méthodes de compression (ou de leur absence) que nous appliquons. N'oubliez pas qu'un serveur n'envoie pas d'image sur le réseau à un navigateur, mais un flux d'octets décrivant la grille de pixels qui constitue cette image pour que le client puisse la recomposer.
Donc, pour mieux visualiser le processus d'encodage d'une grille de pixels sous forme de données bytestream, imaginez que vous agissez comme le navigateur Web. Vous disposez d'une feuille de papier millimétré et d'un pack spécifique de crayons de marque. En tant que serveur Web, je fais exactement les mêmes choses, mais j'ai déjà utilisé mes crayons pour remplir le papier millimétré avec une image source. Si je devais vous envoyer un message en texte brut, je ne pourrais pas vous envoyer l'image elle-même, mais je pourrais transmettre des informations sur la source d'une image dans une langue que nous comprenons à l'aide de notre norme partagée pour la grille et les couleurs de "pixels" :
Commencez en haut à gauche. La première ligne est bleue. La ligne 1, la colonne 2 est bleue. La première ligne, la colonne trois, est bleue. La ligne 1, la colonne 4 est en rouge.
En utilisant ces informations textuelles, vous serez en mesure de recréer parfaitement l'image que j'ai sur ma feuille de papier millimétré.
Les différences entre les formats d'image et la façon dont ils sont encodés sous forme de données peuvent être assimilés à la façon dont ces informations ont été formatées. Par exemple, les informations que je vous ai envoyées pourraient être facilement exprimées comme suit:
Commencez en haut à gauche. Ligne 1. Les colonnes 1 à 3 sont en bleu. La ligne 1, la colonne 4 est en rouge.
L'une ou l'autre de ces descriptions donnera la même image, mais la seconde parvient à décrire la même image avec moins de caractères. Il s'agit d'une méthode sans perte de compression des données d'image: toutes les mêmes informations (et donc aucune réduction de la fidélité visuelle), mais moins d'octets transférés sur le réseau entre vous et le serveur, entre le serveur et le moteur de rendu. Il s'agit de l'équivalent en langage brut de "l'encodage de durée d'exécution" pour les données d'image, où les données sont encodées en tant que valeur à répéter et sous forme de nombre, plutôt que de répéter la valeur complète plusieurs fois.
La compression inverse, avec perte, peut sembler négligeable. Pourquoi voudriez-vous que vos images s'affichent moins bien ? Mais ce n'est pas strictement le cas, et il convient de garder à l'esprit que nos yeux n'ont pas non plus de fidélité parfaite. Choisir le format et les paramètres appropriés pour la compression d'image consiste à trouver le juste équilibre entre le niveau de détail visuel que nous pouvons percevoir et la quantité de données envoyées au navigateur. Ces deux facteurs sont déterminés par le contenu de notre image source.
Les formats d'image matricielle sont ceux que vous connaissez probablement le mieux en tant que développeur : GIF, JPEG, PNG, WebP, etc. Vous découvrirez les fonctionnalités de chacun d'eux dans les prochains modules.