Image vectorielle VS image matricielle – Partie 1 : définitions et avantages

Tu te demandes peut-être quelles sont les différences entre une image matricielle et une image vectorielle. Et quels sont les avantages de chaque type d’image ? Voici, pour te répondre, la première partie de la comparaison des deux types d’images.

Bonne lecture !

Image vectorielle ou matricielle, qu’est-ce que c’est ?

Une image vectorielle : plein de vecteurs…

Visualisation des nœuds de l'image vectorielle — Visualisation des nœuds de l’image vectorielle

…Ou plutôt plein de Noeuds (sur l’image ci-dessus, ce sont les petits carrés bleus ou rouge et les cercles bleus ou rouges).

Construction d’une image vectorielle

Dans l’image vectorielle (ou vector graphics en anglais), les noeuds, ou points d’ancrages, sont placés relativement les uns aux autres. Ces noeuds sont connectés entre eux par des lignes et des courbes qui forment des polygones et d’autres figures.

Chacun de ces noeuds a une position définie sur les axes X et Y du plan de travail et déterminent la direction de la courbe reliant deux noeuds. Chaque courbe a donc plusieurs propriétés, dont la couleur (de remplissage et de contour), la forme, la courbure ou encore l’épaisseur.

L’association de points d’encrages (au moins deux) et de courbes les reliant (au moins une) constitue un objet primitif.

Les images vectorielles peuvent être retrouvées dans les spectacles laser, où deux miroirs positionnent le laser très rapidement pour dessiner des formes et écrire du texte sur un écran. Grace au codage mathématique de l’image vectorielle, peu importe la distance de l’écran, les formes seront toujours comme elles ont été créées, seule leur taille pourra varier.

Les formats de l’image vectorielle

Les images vectorielles sont communément retrouvées dans les formats

Et aussi évidemment dans le « Affinity common file format » 😉

La majorité de ces formats stockent différents types d’objets primitifs :

Les lignes, lignes brisées et polygones
Les courbes (ou plus précisément les courbes de Bézier) et formes fermées comportant des courbes (aussi appelées surfaces de Bézier)
Les cercles et les ellipses
Le texte (dont les lettres sont crées à partir des courbes de Bézier, encore elles !)
Les gradients de couleurs (par exemple, un fondu jaune-jaune orangé-orange-rouge)
Des images matricielles (qui sont alors considérées comme des rectangles)

Les images matricielles : des pixels…

Matrice et code couleur d'une image matricielle : visualisation des pixels — Matrice et code couleur d’une image matricielle : visualisation des pixels

… et des valeurs de couleur pour chaque pixel.

Construction d’une image matricielle

On peut voir les images matricielles (raster graphics ou bitmap en anglais) comme un tableau dans lequel chaque case a un code couleur qui permet de la faire apparaitre de la bonne couleur. Ce tableau correspond à la matrice de l’image, d’où le nom « image matricielle ».

Par exemple sur l’image ci-dessus, la case correspondant à la première colonne et première ligne a un code couleur Rouge : 95 ; Vert : 95 ; Bleu : 95. Ce qui correspond à un gris très clair, presque blanc : cette case apparait effectivement blanc à l’oeil. La case correspondant à la 4ème colonne et deuxième ligne a un code couleur Rouge : 0 ; Vert : 0 ; Bleu : 0. Ce qui signifie qu’il n’y a pas (= 0) de couleur bleue, ni verte ni rouge dans ce pixel : le rendu est donc noir. Cette case apparait effectivement noire 😉

Ces cases correspondent en réalité aux pixels de l’image. Le pixel est un point de couleur de l’image, ou le plus petit élément d’un appareil d’affichage (écran, projecteur) ou de capture (capteur CCD d’un appareil photo ou d’une caméra par exemple). Si tu agrandis beaucoup une image matricielle, tu verra apparaître tous les petits carrés, ou pixels, constituants cette image.

Les formats d’une image matricielle

Du fait de leur conception en « tableau de cases colorées », les images matricielles ont une taille définie avec une hauteur (correspondant au nombre de lignes du tableau) et une largeur (correspondant au nombre de colonnes du tableau).

Les images basées sur les pixels sont les plus courantes sur internet : on les retrouve dans des formats variés, dont les plus courants sont :

BMP (Bitmap),
GIF (Graphical Interchange Format),
TIFF (Tagged Image File Format),
PNG (Portable Network Graphic),
JPEG (Joint Photographic Experts Group),
PSD (Photoshop document)

… avec les différentes techniques de compression.

Les photographies représentent sans doute le meilleur exemple d’image matricielle. On peut y voir des dégradés (en pixels) très fins. Aussi, quand on vectorise une photographie, le résultat est très différent de l’original.

Quels sont les avantages de chaque type d’image ?

Les images matricielles sont plus communes et accessibles

La majorité des images que l’on trouve sur internet sont des images matricielles, souvent compressées dans les formats GIF, JPEG et PNG. Elles sont supportées par tous les services web (blogs, banques d’images et sites d’entreprises).

De plus, les appareils comme les caméras (des téléphones aussi ;)) ou les scanners produisent des images matricielles, constituées de pixels aux multiples couleurs.

D’autre part, les logiciel de création et de modification d’images matricielles sont assez accessibles et connus, même des néophytes. Prenons par exemple Photoshop, Paint ou encore GIMP. Qui n’a entendu parler d’aucun d’entre eux ?

Et pour finir, dans les jeux vidéo et pour l’imagerie médicale (comme les études histologiques de prélèvements ou les IRM) ce sont encore les pixels qui sont employés. Voire même des voxels, c’est à dire des pixels en trois dimensions (« vo » pour volume et « xel » de pixel).

Tout le monde a donc un jour utilisé, manipulé ou créé des images matricielles. C’est un avantage non négligeable car il est plus simple de travailler avec cet outil, l’image matricielle, que nous connaissons déjà.

Une image vectorielle est facile à modifier sans perte de qualité

Tout d’abord, le grand avantage de l’image vectorielle est de pouvoir être redimensionnée indéfiniment sans perdre en qualité. Comme les formes sont décrites par des formules mathématiques et que les points d’ancrages sont situés les uns par rapport aux autres, l’image n’a pas une définition donnée.

Utilité des vecteurs : agrandissement d'une image vectorielle ... yeah — Utilité des vecteurs : agrandissement d’une image vectorielle … yeah

Une image vectorielle peut être agrandie et imprimée aussi grand que l’imprimante le permet. C’est d’ailleurs pour pouvoir conserver une bonne qualité d’image que les imprimeurs demandent des designs vectoriels et pas matriciels.

Contrairement à ce que j’ai écris précédemment sur les images matricielles, les images vectorielles sont tout de même beaucoup utilisées. Mais nous ne nous en rendons pas forcément compte. Il s’agit des caractères des différentes polices d’écriture : on peut écrire en 4 ou en 336 et les bords des lettres seront toujours nets. Les lettres sont en fait formées de points d’ancrages et de courbes qui les relient. Peu importe la taille, le caractère reste le même.

Un autre avantage est que les couleurs des objets peuvent être modifiées facilement et entièrement. Par entièrement, je veux dire que ce ne sont pas que des modifications de tons, de saturation et de luminosité que l’on peut faire. Là on peut vraiment changer le remplissage de chaque objet en modifiant par exemple l’orientation ou la forme du dégradé, voire même choisir des motifs. Il en va de même pour le contour des objets qu’il est possible de modifier en épaisseur, en type de trait, couleur…
D’autre part, le nombre de couleurs des objets peut être facilement augmenté ou réduit pour répondre au budget d’impression.

Il n’y a d’ailleurs pas que la couleur des objets que l’on peut modifier facilement : les objets eux-mêmes peuvent être modifiés sans perdre en qualité en déplaçant les points d’ancrages ou en changeant les courbes qui les relient. Ainsi, les images vectorielles peuvent être regroupées dans des bases de données en lignes, ce qui permet aux graphistes de tous horizon de gagner du temps en téléchargeant et manipulant ces images.

Enfin, les images vectorielles peuvent être facilement exportées en images matricielle dont la définition est optimisée pour l’utilisation prévue. Ainsi, elles peuvent être utilisées pour tous les processus courants d’illustration et de communication.

Le mot de la fin : ce qu’il faut retenir

Ainsi s’achève la première partie de la comparaison entre les images vectorielles et les images matricielles.

Voici un petit résumé pour t’aider (je l’espère !) :

Image matricielle : composée d’une matrice (ou d’un tableau) de pixels. Chaque pixel a une couleur définie. Une image matricielle a une taille donnée qui correspond au nombre de pixels sur une ligne du tableau multiplié par le nombre de pixels sur une colonne du tableau. Exemple : photographies

Image vectorielle : composée de points d’ancrages et de courbes qui forment des objets. Chaque objet a une couleur, une épaisseur et une forme donnée. Les points d’ancrages ont des coordonnées relatives les uns par rapport aux autres : une image vectorielle n’a pas de taille fixe. Exemple : les caractères d’une police d’écriture moderne.

Avantages de l’image matricielle :

très répandue et donc plus facile à appréhender
utilisable sur tous les services web (blogs, sites…)
facile à créer : caméra, scanners, appareils d’imagerie médicale…

Avantages de l’image vectorielle :

peut être agrandie ou rétrécie indéfiniement
peut être modifié simplement (couleur, forme…)
peut être convertie en une image matricielle d’une taille donnée facilement (exportation)

Dans le prochain article nous aborderons les inconvénients de chaque type d’image et je te donnerai une astuce imparable pour apprendre à les différencier.

A bientôt !

Références :