Dans cette section, nous allons nous intéresser à la question de la représentation des images. Comment décrire une image à l'aide de séquences de bits ? Dans la section précédente, nous avons vu comment représenter des couleurs en utilisant des codes binaires, notamment le code RVB. Dans cette section, nous allons voir comment représenter des images en utilisant différents formats de fichiers.

Les formats de représentation des images sont nombreux et variés. Ils se classent cependant en deux grandes catégories : les formats d'images matricielles et les formats d'images vectorielles.

Les images matricielles sont les plus couramment utilisées. Dans une image matricielle, l'image est représentée par une matrice (une grille) de cellules colorées que l'on appelle des pixels. Ce type d'image est très utilisé pour les photographies par exemple.

Les images vectorielles quant à elles sont représentées par des formes géométriques (cercles, rectangles, courbes, etc.) décrites par des équations mathématiques. On utilise souvent ce type d'image pour les logos par exemple, qui sont généralement composés de formes simples et déclinés dans plusieurs tailles.

En première partie de cette section, nous allons nous intéresser aux images matricielles. Nous aborderons ensuite les images vectorielles dans la deuxième partie de la section.

Images matricielles

Une image matricielle est une image qui est représentée par une matrice de pixels. Une matrice est simplement un tableau à deux dimensions, une grille. Chaque cellule du tableau contient ce qu'on appelle un pixel. Chaque pixel contient une couleur, généralement représentée par un code couleur comme le code RVB que nous avons vu dans la section précédente.

Cette organisation en grille n'est pas toujours visible à l'œil nu, il faut parfois zoomer sur l'image pour la distinguer.

Les pixels d'une images matricielles sont organisés en un certain nombre de colonnes et de lignes. On parle de la largeur et de la hauteur de l'image. De manière formelle, on parle aussi de la définition de l'image pour désigner le nombre de pixels de l'image.

Une image représentée sous forme de fichier a aussi une taille en terme d'octets. Cette taille dépend de la définition de l'image, mais aussi du format de fichier utilisé. On utilise généralement le terme poids pour désigner la taille en octets d'une image ou plus généralement d'un fichier.

Dans cette section, afin de nous intéresser dans plus de détails et de praticité aux images matricielles, nous allons aborder un format d'image matricielle en particulier : le format BMP.

Le format BMP

Le format BMP (aussi appelé bitmap) est un format d'image matricielle relativement simple. Il s'agit d'un format de fichier binaire, c'est-à-dire que les données sont représentées directement par des bits.

Ci-dessous est présentée une image de définition 8 par 8 pixels au format BMP ainsi que les octets qui la représentent. Les octets sont indiqués en hexadécimal, une notation que nous avons abordée dans la section sur les fichiers. Chaque octet est représenté par deux chiffres hexadécimaux. La séquence d'octets se lit de gauche à droite et de haut en bas.

L'image représente un magnifique pot de fleurs en pixel art.

Le fichier se compose de deux parties distinctes : l'entête et les pixels. La zone d'entête, représentée avec un fond gris ci-dessus, contient des informations sur l'image comme, par exemple, sa largeur et sa hauteur. Après l'entête arrivent les pixels. La zone de pixels, représentée avec un fond blanc, contient le code couleur de chaque pixel de l'image.

Dans le format BMP, les pixels sont stockés dans l'ordre de gauche à droite et de bas en haut. Cela signifie que le premier pixel est celui en bas à gauche de l'image, le deuxième est celui à droite du premier, et ainsi de suite. Lorsque l'on arrive à la fin d'une ligne, on passe à la gauche de la ligne suivante, au dessus.

Chaque pixel est représenté par trois octets. Dans le format BMP, on commence par un octet pour l'intensité du bleu, puis un octet pour l'intensité du vert, et enfin un octet pour l'intensité du rouge. L'ordre est inversé par rapport au code RVB que nous avons vu dans la section précédente, mais le principe reste le même.

Image 4 par 4 pixels

La définition d'une image a généralement une grande influence sur le poids du fichier. Ci-dessous est représentée une image de définition 4 par 4 pixels. Constatez que le poids du fichier est moindre par rapport à l'image de définition 8 par 8 pixels montrée plus haut.

Logiciels de manipulation d'images matricielles

En général, on n'écrira ou on ne modifiera pas directement des images matricielles dans un éditeur hexadécimal. La tâche serait bien trop fastidieuse. À la place, on utilisera un logiciel, un programme, pour réaliser cette tâche.

Parmi les logiciels de manipulation d'images matricielles les plus connus, on peut citer :

• GIMP (GNU Image Manipulation Program), un logiciel libre et gratuit, disponible sur Windows, Mac OS et Linux.
• Adobe Photoshop, un logiciel propriétaire, payant, disponible sur Windows et Mac OS.

Dans le cadre de ce cours, nous verrons aussi comment manipuler des images matricielles avec le langage de programmation Python et la bibliothèque Pillow.

Images vectorielles

Une autre façon de représenter des images consiste à décrire les formes géométriques qui composent l'image. On parle dans ce cas d'images vectorielles.

Nous allons peu nous attarder sur les images vectorielles, mais le sujet est suffisamment important pour que nous en parlions au moins un petit peu !

À la différence des images matricielles, le contenu d'une image vectorielle n'est pas décrit par une matrice de pixels, mais par un ensemble de formes géométriques.

Un des principaux avantages des images vectorielles est qu'elles sont redimensionnables sans perte de qualité. En effet, les formes géométriques qui composent l'image peuvent être mises à différentes échelles sans perdre de détails ou de précision, ce qui n'est pas le cas des images matricielles.

★ À essayer

Ci-dessous vous trouverez la même image représentée dans deux formats différents : un format matriciel et un format vectoriel. Utilisez la barre de zoom pour voir ce qui se passe lorsque vous zoomez sur l'image en version vectorielle et comparez avec ce qui se passe lorsque vous zoomez sur l'image en version matricielle.

100%

100%

Applicabilité des images vectorielles

Comme nous l'avons vu, les images vectorielles sont très facilement redimensionnables sans perte de qualité. Nous pourrions donc être tentés de n'utiliser que des images vectorielles. Cependant, certaines images se prêtent mal à une représentation vectorielle. Aussi, les dispositifs de capture d'images produisent généralement des images matricielles.

Par exemple, il est difficile de représenter des photographies avec des images matricielles. En effet, il est très difficile de décomposer une photographie en formes géométriques simples sans retomber sur une description matricielle de l'image.

En revanche, les images vectorielles sont très adaptées à la représentation de dessins, de schémas, de logos par exemple. En effet, ces images sont souvent descriptibles à l'aide de formes géométriques.

Comme pour les images matricielles, il existe plusieurs formats de fichiers pour représenter des images vectorielles. Le format le plus connu est le format SVG, que nous allons brièvement aborder ici.

Le format SVG

Le format SVG (Scalable Vector Graphics) est un format de fichier qui permet de représenter des images vectorielles. Il s'agit d'un format de fichier texte : le contenu du fichier est écrit en utilisant du texte. Ce texte est ensuite encodé selon un encodage de caractères tel que UTF-8 pour obtenir le contenu du fichier.

Le contenu du fichier est décrit en utilisant des balises, comme en HTML (le langage utilisé pour décrire les pages web). Par exemple, voici un fichier SVG qui décrit un cercle rouge :

<?xml version="1.0" encoding="UTF-8" ?>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="150" r="145" fill="red" />
</svg>

Et voici le résultat de ce fichier SVG :

Il est possible d'ajouter des éléments additionnels, comme par exemple du texte :

<?xml version="1.0" encoding="UTF-8" ?>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="150" r="145" fill="red" />
    <text x="110" y="150" fill="yellow">Trop bien!</text>
</svg>

Logiciels de dessin vectoriel

Bien qu'il soit techniquement possible de créer des images vectorielles en écrivant directement le code SVG, il est plus courant d'utiliser un ce qu'on appelle un logiciel de dessin vectoriel pour créer ou modifier des images vectorielles.

Parmi les logiciels de dessin vectoriel les plus connus, on peut citer :

• Inkscape, un logiciel libre et gratuit, disponible sur Windows, Mac et Linux.
• Adobe Illustrator, un logiciel propriétaire, disponible sur Windows et Mac.