Introduction

Pour afficher une image sur un écran, il faut que ses informations soient enregistrées quelque part. On accède à ces données, pour les analyser puis les afficher. Le processus est transparent pour l’utilisateur mais il existe plusieurs techniques qui seront abordées dans les formats de fichier.

Ici nous allons nous intéresser à la structure d’une image, à sa composition et au vocabulaire associé.

Définition

Une image est une représentation graphique d’un sujet, un paysage, d’un environnement. Sa particularité est de fixer le temps de manière réaliste ou artificielle. Le but est de raconter une histoire, d’interpeler ou de rapporter des faits.

En infographie, une image c’est essentiellement des données qu’on pourra manipuler afin d’améliorer, dégrader ou falsifier son contenu. La traduction d’image en anglais est picture. Toutefois il existe un autre mot pour désigner une image informatique : bitmap. C’est la contraction entre les mots : bit + map. C’est une carte (map) avec une suite d’information codée sous forme de bits (bit). En informatique, un bit est la plus petite information traitable par un ordinateur et elle prend 2 valeurs : 0 ou 1.

Ce bitmap va servir de référence afin de reconstituer l’image en remplissant chaque pixel de l’écran avec le code couleur associé et décodé.

Unités

Afin de quantifier les éléments qui touchent aux écrans il existe des unités de mesure qui seront utilisées

Pixel d’image

Tout comme les pixels d’écran, ceux d’une image possèdent la même constitution visuelle sauf que ce sont des informations de couleurs codées d’un manière particulière que nous verrons plus bas : RVB (Rouge Vert Bleu).

Pixel est un mot anglais, c’est la contraction des mots : picture (image) + element (élément) = pixel (élément d’image).

Rapport ou format d’image

Le rapport ou format d’image est une indication de lien constant entre la hauteur et la largeur d’un support, d’une image ou d’une vidéo.

Prenons l’exemple du format 16/9 qui se prononce : seize neuvième.
En effectuant le calcul : 16 / 9 = 1,777…
En effectuant le calcul : 1920 / 1080 = 1,777…
Le rapport 16/9 est une appelation et une indication pour effectuer des calculs afin de garder une proportion d’affichage. Sans cela nous aurions des images écrasées ou déformées.

Ancien format utilisé : 4/3 pour les télévisions à tube cathodique.
Les formats les plus utilisés actuellement sont : 16/9 et 16/10.

Taille d’image

La taille d’image c’est comme la résolution d’écran mais appliquée à une image, sauf qu’on évite de dire résolution d’image. Nous verrons pourquoi dans la section suivante. Elle est définie par le nombre de colonnes et de lignes qui la composent.

La taille d’image s’écrit : Nb de colonnes x Nb de lignes, exemple : 960 x 455.

A la différence d’un écran qui a une résolution d’écran invariable, une image peut-être redimensionnée ou « changée de taille ». Selon l’opération qui est menée on peut faire une mise à l’échelle, détourer, couper, ajouter des bandes…

En texturing, la texture est formatée dans une image avec des bords carrés. Les tailles d’image que nous pouvons trouver sont alors : 128×128, 256×256, 512×512, 1024×1024, 2K, 4K, 8K…

Attention à ne pas confondre les mots poids, dimension et taille selon le contexte. Je vous renvoie vers ce lien pour plus de détail  : les bases – les formats de fichier.

Résolution d’image

La résolution d’une image est définie par la perception de densité de points sur une ligne de 2,54 cm de longueur à une distance d’1 mètre. C’est une notion utilisée en imprimerie. Il ne faut pas confondre avec la taille de l’image comme vu précédemment.

Un point a donc une taille différente selon la résolution d’impression.

Le pouce est une unité de mesure anglosaxone. En anglais, 1 pouce = 2,54 cm. Une résolution d’image s’exprime en ppp (points par pouce) ou dpi (dot per inch).

Une résolution d’image de 100 dpi signifie qu’à une distance d’1 mètre, sur une largeur de 2,54 cm il y a 100 points. Pareil sur la hauteur, par conséquent on a un carré de 2,54 cm de côté d’une densité de 100×100 points.

Cette notion de résolution ne peut donc pas s’appliquer pour les pixels d’un écran puisqu’ils ont une taille fixe. Nous aurons alors affaire à une estimation. Ainsi, par convention une image sur un écran d’ordinateur a une résolution de 76 dpi par approximation.

Exemple d’image avec 3 résolution d’image différente

L’artiste pourra alors jouer sur 2 paramètres afin d’ajuster la qualité d’une image :

• La taille de l’image (en pixels)
  
• La résolution d’image (en ppp ou dpi)

Cette notion est importante surtout dans l’imprimerie.

RVB (Rouge Vert Bleu)

En anglais RGB (Red Green Blue)

Comme nous l’avons vu, un écran LCD / LED est composé de pixels et chaque pixel est composé de 3 cellules de couleurs : rouge, vert et bleu. Pourquoi ces trois couleurs ? Ce sont les couleurs primaires en synthèse additive. C’est à dire qu’on peut recomposer toutes les autres couleurs à partir d’elles trois.

Le mélange des couleurs fonctionne sur le principe optique. Chaque cellule émet avec une intensité qui permet de recréer une couleur du spectre.
Les logiciels d’infographie proposent généralement des palettes de couleurs avec le RGB qui varie pour chacun de 0 à 255. Pourquoi cet intervalle de 0 à 255 ?

Pour un ordinateur, une couleur se code sur plusieurs bits. Pour que ce soit plus pratique et optimisé, il a été convenu de coder chaque couleur primaire de 0 à 255, nous obtenons le tableau suivant :

Avec le tableau nous voyons qu’une couleur est codée sur 3 groupes de 8 bits, soit : 3 x 8 = 24 bits.
La couleur jaune █ peut être codée : FFFF00 ₍₁₆₎ ou 1111 1111 1111 1111 0000 0000 ₍₂₎
On peut utiliser la page suivante pour effectuer des réglages dynamiques : RGB Calculator

Avec un codage sur 24 bits, il est donc possible d’obtenir 2²⁴ combinaisons possibles, soit : 2²⁴ = 16 777 216 couleurs
Les images codées sur 32 bits, sont généralement des images avec une couche alpha, elles gères donc la transparence du fond de l’image pour faciliter les incrustations ou l’intégrations lors d’un compositing.
16 millions de couleurs sont suffisantes pour afficher une image avec assez de détails mais les puristes voudront plus.

Certains appareils photos, logiciel & matériel prennent en charge plus de couleurs. Ceci est important dans le domaine de la photographie.
Voir le site heleux.com pour plus d’informations.

Vectoriel

Par abus de langage nous utilisons le terme d’image vectorielle. En effet, ce qu’il faut comprendre avec ce procédé, c’est qu’un logiciel spécialisé va vous permettre de reproduire un visuel avec des courbes particulières. Le tracé de ces dernières est recalculé en permanence afin de reconstituer des formes géométriques. Pour résumer, il faut une application ou un logiciel pour interpréter les différentes coordonnées afin de redessiner l’image finale.

C’est comme si vous n’aviez pas une image définitive diponible mais un système pour la faire apparaître. Dans la réalité on pourrait faire une analogie avec des pochoirs qu’il faudrait utiliser pour reconstituer un grafiti. Vous n’avez pas le grafiti à la base mais vous avez les pochoirs pour le faire apparaître.

Ces formes géométrique sont constituées de :

• Points
  Ils donnent des coordonnées par lesquelles passent le tracé du contour. Des poignets de courbure peuvent être activées et orientées pour déformer le tracé.

• Contour
  Il passe par les points définis par le graphiste et peut être :
  • ouvert ou fermé
    
  • Linéaire ou courbé
    
  • Avec une épaisseur paramétrables
    
  • Avec des couleurs personnalisables
  
  
• Avec une surface vide ou pleine :
  • En couleur unie
    
  • En couleur dégradée
    
  • En motif
    
  • En remplissage personnalisé

• Ordre de profondeur
  Comme un calque, on pourra définir le niveau d’affichage de la forme vectorielle pour la mettre au premier plan, second plan… ou dernier plan.
  

L’avantage de cette technique est d’avoir une image modulable selon sa taille (pixels x pixels) et sa résolution (ppp). Le résultat est une image qui ne sera jamais déformées ou pixellisées quelque soit son redimensionnement. Les images vectorielles sont très utilisées en imprimerie. C’est le cas avec la création d’un logo qu’il faut ajuster à plusieurs supports : carte de visite, dépliant, catalogue, poster ou grande affiche 4 par 3.

Une image vectorielle pourra être transformée en image bitmap. L’inverse se fait mais nécessite des retouches.

Pour une liste de logiciels d’image vectorielle : fiche Wikipédia sur les images vectorielles.