Les Images numériques

I ) Images au point vs images vectorielles..........................................................................1

A ) Les images bitmap................................................................................................................1
B ) Les images vectorielles.........................................................................................................2
II ) Les propriétés des images numériques. ........................................................................2
A ) Les informations d’une images Bitmap................................................................................2
B ) la couleur ..............................................................................................................................3
III ) Travailler sur les images Bitmap.................................................................................4
A ) Commencer avec une nouvelle image..................................................................................4
B ) Les outils de base..................................................................................................................5
C ) La correction des couleurs....................................................................................................5
D ) Les modifications des propriétés de l’image........................................................................7
IV ) Les calques et masques ...............................................................................................7
A ) Sélection d’une zone de masque. .........................................................................................7
B ) Travail sur le masque............................................................................................................8

Dans ce document nous présenterons un rapide rappel autour des caractéristiques générales
des images numériques avant d’aborder en détail les principales manipulations, aussi bien sur
des images au point que sur des image vectorielles

I ) Images au point vs images vectorielles

Les deux types d’images utilisées en infographie appartiennent à deux groupes dont les
avantages et les limites sont présentés ici. On utilisera quelques logiciels graphiques pour
cette présentation, mais l’ensemble des produits présents sur le marché permettent les
manipulation de base. Les logiciels utilisés sont PhotoShop (Adobe), Paint Shop Pro (Jasc) et
Draw (Micrograph X)

A ) Les images bitmap

Ces images sont constituées d’une matrice de points élémentaires (les pixels = picture
element). C’est à dire, pour simplifier, que chaque point de l’image est défini par les
coordonnées spatiales (x,y) et des coordonnées de couleur (une valeur numérique dans une
palette de couleur de 2, 16, 256 ou 16 millions de nuances).
A l’aide d’un logiciel de manipulation d’images bitmap (PS ou PSP) on peut ouvrir une image
quelconque. On agrandissant l’image au maximum, à l’aide de la fonction zoom, on voit
qu’elle est composée de points dont les coordonnées et la valeur
de couleur sont codés.
On voit ici que le point de coordonnées (0,0), c’est à dire le
pixel (0,0) est affecté des valeurs de couleur (102,51,51), ce qui
donne un brun. Nous reviendrons plus tard sur ces différents
codage.
On voit ainsi que chaque point de l’image est unique et que
l’information globale de l’image est très détaillée. Cette image
correspond à un fichier de grande taille. De plus toute
modification apportée sur cette image est irréversible. Que ce
soit un changement de couleur d’un point ou l’agrandissement
d’une portion de cette image.
Prenons l’exemple suivant :
cette lettre est une image que l’on peut doubler en taille :
On voit tout de suite que chaque pixel a été utilisé par le
logiciel pour générer les pixels manquants et gréer ainsi
l’image agrandie de notre lettre. La qualité est médiocre et la
Page 1 sur 8
Christian Breban – SOA – 2001
réduction de cette image à la taille d’origine se fait aussi par un calcul et non par un retour au
valeurs d’origines, on perd à nouveau des informations.
Au delà de ces contraintes, le format bitmap est un format idéal pour transformer des
informations analogiques en information numériques. C’est le format d’images natif utilisé
dans les appareils photo numériques, les scanners et les tablettes à digitaliser . Les principaux
formats de fichier (visualisés par une extension du type *.xxx) sont :
!" Bitmap = format natif non compressé, utilisé par windows (*.bmp)
!" TIFF = Tagged Image File Format, très utilisé dans la mise en page (*.tif)
!" GIF = Grafics Interchange Format, format compressé, utilisant jusqu’à 256 couleurs,
permet aussi l’animation format utilisé dans les pages html (*.gif)
!" JPEG = Joint Photographic Expert Group, format compressé, utilisant jusqu’à 16
millions de couleurs, il est libre de droits et est utilisé dans les pages html (*.jpg)
!" PNG = portable Network Graphics, format compressé de très bonne qualité, libre de
droit, utilisant 256 couleurs, utilisé dans les pages html avec des navigateurs récents
(*.png)
Il existe de nombreux autres formats propriétaires (liés à l’application) qui peuvent être
convertis ultérieurement (PCX, EPS, PCT, MAC, PSP, RAS, PSD, …). Nous présenterons
ultérieurement les formats les plus utilisés.

B ) Les images vectorielles

La représentation des dessins en mode vectoriel est un ensemble de fonctions mathématiques
(principalement autour des vecteurs). Ces données décrivent les formes, la localisation et les
couleurs d’objets mathématiques. Si l’on prend l’exemple d’un carré, il sera défini par un
grand nombre de points en représentation bitmap, il suffit d’indiquer la localisation des
sommet et les caractéristiques des vecteurs reliant ces 4 points (direction et intensité) avec une
information sur la couleur du trait. On voit qu’une image vectorielle se caractérise par une
économie d’information et que la taille du fichier créé sera très petite. Les modifications sur
l’image seront rapides et aisées, il suffit pour agrandir une figure de modifier quelques
coordonnées vectorielles. La qualité du tracé sera la même que celle de l’original. La limite de
ce tracé est la difficulté de produire des dessins complexes, à partir de formes mathématiques
limitées. Les principaux formats sont propriétaires et il est impossible d’utiliser des dessins
vectoriels pour les pages html.
Les principaux formats de fichier (visualisés par une extension du type *.xxx) sont :
!" WMF = Windows Meta Files, format universel dans le monde PC (*.wmf)
!" DRW = extension des fichiers créés par le logiciel Draw de MicrografX (*.drw)
!" AI = extension des fichiers créés par Adobe Illustrator (*.ai)

II ) Les propriétés des images numériques.

A ) Les informations d’une images Bitmap
Nous avons vu qu’une image est définie par:
#"le nombre de pixels qui la compose en largeur et en hauteur (qui peut varier presque à
l'infini),
#"l'étendu des teintes de gris ou des couleurs que peut prendre chaque pixel (on parle de
dynamique de l'image).
Toutes les données sont structurées dans un fichier qui prend une forme particulière suivant le
type utilisé. Par exemple voici le début de l’information du fichier « exemple1.bmp »
BMÖ ______6___(___È___´___________ Œ__#
__#
______________www_ff™_333_€€€_999_)))_fff_BBB_____UUU_"""_________MMM______
___™™Ì_ ©_ÀÀÀ_†††_–––_3ff_²²²_™ÌÌ_™™™_33f_

Page 2 sur 8
Christian Breban – SOA – 2001
Le même fichier dans le standard JPEG sera :
ÿØÿà__JFIF_____H_H__ÿÛ_C__________________!_________"$"_$____ÿÛ_C__________
_______________________________________________________ÿÀ____´_È__"_______ÿ
Ä____________________________

ÿÄ_µ________________}________!1A__Qa_"q_2 ‘¡_#B±Á_RÑð$3br‚
_____%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyzƒ„…†‡ˆ‰Š’“
Il faut donc un logiciel spécialisé pour l’ouvrir, on remarquera quand même que le type de
fichier est indiqué dans la première ligne de code (en-tête).

La principale difficulté est de bien comprendre ce qu’est la résolution d’une image. En effet
les résultats finaux seront dépendant de la qualité d’acquisition de l’image. On ne travaille pas
une image de la même façon pour un produit qui doit être vu sur un écran, sur une sortie
imprimante ou pour le Web.
La résolution d'une image est définie par un nombre de pixels par unité de longueur de la
structure à numériser (classiquement en dpi (dots per inches) ou ppp (points par pouce)).
Nous rappelons qu’un pouce vaut 2,54 cm. Ce paramètre est défini lors de la numérisation.
Plus le nombre de pixels est élevé par unité de longueur de la structure à numériser, plus la
quantité d'information qui décrit cette structure est importante et plus la résolution est élevée.
La résolution d'une image numérique définit le degré de détail qui va être représenté sur cette
image.

Cette notion est distincte de la résolution du format de l'image qui correspond au nombre de
pixels qui compose l'image en hauteur et en largeur (100 pixels par 100 pixels par exemple).
Un bitmap de résolution 500 ppp contiendra 500 pixels tous les 2,54 cm.
Pour produire une image pour un écran, une résolution de 72 ppp est suffisant. Pour un
document imprimer, il vaut mieux utiliser une résolution de 400 ppp. Ceci s’explique par les
données du tableau suivant pour une image de base de 100 X 150 pixels
Exemple = pour une résolution de 72 ppp $ 100 pixels = (100/72)x2,54 = 3,52 cm

résolution support Taille (cm x cm)

72 ppp Ecran 3,52 x 5,2
300 ppp Imprimante basse résolution 0,84 x 1,27
600 ppp Imprimante haute résolution 0,42 x 0,63

Pour la même image, la taille réelle diminuera avec la résolution du périphérique de sortie.
Nous voyons ainsi qu’il faut travailler au niveau de l’acquisition (scanner, appareil photo)
avec une résolution proche de celle utilisée en sortie (72 pour une sortie écran, 300 et plus
pour une sortie papier). Le travail du bitmap pour le Web est encore plus complexe, puisqu’il
faut prendre en compte en plus de la résolution de l’écran (72 à 100 ppp) la taille du fichier
qui doit être la plus petite possible pour alléger le chargement.

B ) la couleur
On utilise pour créer des couleurs deux types de méthodes, la synthèse additive et la synthèse
soustractive.

1 ) La synthèse additive.
Cette synthèse est basée sur le mélange des couleurs primaires (Rouge-Vert-Bleu = RVB)
chaque couleur se voit attribuer une valeur numérique sur 8 bits, c’est à dire de 0 à 255, la
valeur 255 étant la couleur pure. Ainsi on obtient du rouge pure par les valeurs (255,0,0), du
blanc par (0,0,0) et du noir par (255,255,255).

Page 3 sur 8
Christian Breban – SOA – 2001
Nom Aperçu Valeur Rouge Valeur Vert Valeur Bleu
Rouge primaire 255 000 000
Vert primaire 000 255 000
Bleu primaire 000 000 255
Cyan complémentaire 000 255 255
Magenta complémentaire 255 000 255
Jaune complémentaire 255 255 000
Blanc 000 000 000
Noir 255 255 255
Cette synthèse additive privilégie l’aspect électronique de la production de couleur, on peut
utiliser un autre type de synthèse additive qui privilégie l’approche humaine de la perception
des couleurs. C’est la représentation TSL (Teinte, Saturation, Luminosité) ou HSL (Hue,
Saturation, Luminance) en anglais. La teinte est la couleur qui va être utilisée, la saturation
correspond à la pureté de la teinte et la luminosité correspond à notre perception de l’aspect
clair ou foncé d’une couleur.

2 ) La synthèse soustractive.
Cette synthèse est utilisée pour travailler au niveau des résultats d’impression. En effet le
résultat imprimé correspond à ce que nous voyons des pigments des encres. C’est à dire la
lumière renvoyée par l’encre (ce qui reste après que le pigment ait absorbé une partie des
rayonnement de la lumière blanche). On utilise les trois couleurs complémentaires (Cyan,
Magenta, Jaune) qui quand elles sont complètement absorbées par le pigment donnent un
Noir. Mais pour faire du noir on utilise une encre supplémentaire en imprimerie. On parle
donc de représentation CMJN pour cette synthèse soustractive. Regardez les cartouches
d’encre de votre imprimante couleur et vous verrez que le principe est le même !

3 ) Le nombre de couleur et la taille des fichiers.

Quand on parle de taille des fichiers d’image, on parle aussi du « poids » de l’image. Ce poids
sera sans importance dans le cas d’un travail d’impression, par contre il sera déterminant lors
de l’intégration d’une image à une page html.
Le nombre de couleurs est appelé profondeur de codage, elle s’exprime en bits. Ainsi une
couleur va être codée en n bits et le nombre de couleurs sera 2n.
#"1 bit = 2 couleurs (Noir et Blanc)
#"8 bits = 256 couleurs
#"24 bits = 16 millions de couleurs
Ainsi une image de 100x150 demande 15 000 pixels pour son codage. Si elle est en noir et
blanc, il faut 1 bit pour coder la couleur d’un pixel, la taille de l’image sera 15 000 bits soit
1875 octets ; pour la même image en 256 couleurs, qui sera codée par 8 bits par pixel soit 1
octet, la taille sera de 15000 octets.
Plus le nombre de couleurs sera important, plus le poids de l’image sera élevé.
Certains types de fichiers ne peuvent pas utiliser toutes les profondeur de couleur. Ainsi le
type GIF ne travaille qu’en 256 couleur, comme le type PNG, alors
que le JPEG peut travailler dans toutes les profondeurs de couleur.

III ) Travailler sur les images Bitmap.

A ) Commencer avec une nouvelle image.
Commençons par ouvrir une nouvelle image. Il faut alors
renseigner la boite de dialogue sur les dimensions de base (en
pixels), la résolution, la profondeur de couleur et la couleur du

Page 4 sur 8
Christian Breban – SOA – 2001
fond. Ces valeurs déterminerons la qualité de la production finale. Ici la résolution de 72 ppp
privilégie un travail d’une image pour l’écran.
L’information sur la mémoire vive permet de visualiser l’occupation du système par
l’ouverture de cette nouvelle page.

B ) Les outils de base

Le logiciel fonctionne toujours avec deux couleurs actives, la couleur qui est utilisée pour le
tracé (bouton gauche de la souris) et la couleur de fond (bouton droit de la souris). On peut
changer ces couleurs facilement en cliquant sur l’icône de couleur et en sélectionnant une
autre couleur. On peut aussi intervertir les couleurs en cliquant sur la flèche d’inversion.
Les différents outils de traçage sont les même dans tous les logiciels de traitement d’image
bimap. Un produit comme « MSPaint » livré avec Windows permet de se faire une première
idée de ces outils. On y retrouve :
un pinceau (ou brosse) pour dessiner à main libre, on peut en changer la forme, la
taille, la couleur ; la texture, la densité, l’opacité.
Une gomme qui peut fonctionner de façon global en remplaçant toute couleur par
la couleur de fond ou travailler de façon sélective en supprimant une seule couleur,
choisie par l’utilisateur.
Un outil de sélection qui peut prendre une forme géométrique, suivre un tracé à la
souris ou suivre les contours déterminés par une sélection colorée.
Une loupe (ou zoom qui permet de travailler les détails d’une zone sélectionnée.
Un petit éditeur de texte qui permet de taper un texte et de le placer en temps que
pixels sur notre dessin.
Une pipette (sélecteur de couleur) qui permet de sélectionner une couleur existant
dans le dessin pour l’utiliser comme couleur active ou couleur de fond.
Un pot de peinture qui permet de remplir des surface fermées avec la couleur
sélectionnée.
Un ensemble de forme prédéfinies (carré, cercle, …)
Ce qui différentie un logiciel de base et un logiciel avancé sont les capacités de
gérer finement les différents outils, de pouvoir travailler avec des calques,
d’intégrer en standard un ensemble de filtres prédéfinis. Nous allons travailler sur deux points
spécifiques : la correction des couleurs et la notion de masque (ou calque).

C ) La correction des couleurs.

Les images provenant d’un appareil de numérisation (scanner, appareil photo) nécessitent
souvent des corrections de couleur pour affiner le rendu, mais aussi pour intégrer le ton global
de l’image à celui d’un document ou d’un site Web.
Les outils de corrections manuels (le traitement par filtre n’est jamais satisfaisant pour un
résultat de qualité) sont basés sur des comparaisons entre différentes propriétés de l’image.
On peut ainsi visualiser l’image en tant qu’ensemble de tonalités qui se répartissent en trois
groupes (sombre – intermédiaire – claire). Ainsi l’image ci-dessous sera décomposée par le
logiciel en trois groupes.

Page 5 sur 8
Christian Breban – SOA – 2001
 Sombre Intermédaire claire

Le travail qui suit prend en compte cet

histogramme.

%"Contraste –Luminosité – Intensité

Le contraste va corriger la différence existant entre les pixels les plus clairs et les plus
sombres. L’augmentation des contrastes consistera à « étirer » l’histogramme, c’est à dire de
diminuer les valeurs intermédiaires et d’augmenter les valeurs tonales extrêmes. Voici le
résultat d’un contraste élevé.

On peut facilement envisager que de

ramasser les valeurs de l’histogramme dans
les tonalités intermédiaires va donner une
image moins contrastée.

Le travail sur la luminosité agit de façon uniforme sur tous les pixels d’une image. Ainsi
augmenter la luminosité revient à augmenter
les valeurs intermédiaires de l’histogramme
et à augmenter beaucoup les valeurs claires.

Quand à l’intensité, elle intervient principalement sur les valeurs extrêmes d’une image.
Augmenter l’intensité étend les valeurs tonales vers les valeurs claire, assombrir étend les
valeurs tonales vers les valeurs sombres.

Page 6 sur 8
Christian Breban – SOA – 2001
 %"Gamma
L’indice de gamma permet de travailler sur la façon dont les tons sont affichés à l’écran.
L’impression est donnée par une augmentation ou une diminution du noir présent dans
l’image, en agissant sur les tonalités intermédiaires. Une augmentation de gamma :

%"Egalisation des tons.

Cette technique permet de travailler sur les tonalités en prenant en compte les canaux
chromatiques de l’image (RVB ou TSL). Cette technique est plus fine et plus précise que les
précédentes. Pour une image en niveau de gris on doit travailler sur un seul histogramme,
alors que pour une image en couleur on doit travailler sur les trois histogramme (RVB ou
TSL).

D ) Les modifications des propriétés de l’image.

Toute modification des propriétés d’une image bitmap l’altère de façon définitive. Il faut donc
éviter de trop tâtonner et il vaut mieux anticiper les résultats des modifications choisies.
%"Redimensionner une image
Cette modification est celle qui altère le plus l’image, il faut donc mieux éviter son utilisation
et prévoir la taille de l’image dès sa conception ou sa numérisation. Dans tous les cas les
résultats sont meilleurs lors d’une réduction d’image que pour un agrandissement. Il faut
penser à cocher la case assurant une proportionnalité des nouvelles dimensions. De toute
façon, il ne faut pas oublier que pour une page Web, on doit utiliser une image dont les
dimensions seront telles qu’elles doivent apparaître sur la page. Une image trop grande que
l’on devra réduire sera souvent très « lourde », une image trop petite agrandie perdra
beaucoup de qualité.
%"Modification de la profondeur des couleurs.
Cette modification s’avère souvent nécessaire lors de l’enregistrement d’une image numérisée
que l’on veut enregistrer en format GIF. Il ne faut pas oublier que le format ne permet que
l’utilisation de 256 couleurs.
%"D’autres modifications sans risques
Toutes les opérations basées sur des modifications mathématiques n’altèrent pas l’image. Ce
sont les symétries, rotations, …

IV ) Les calques et masques

Quand on veut travailler sur une partie de l’image sans toucher au reste ou pour incorporer
une image sous forme d’un calque superposé ou utilise les fonctions avancées de masquage.
A ) Sélection d’une zone de masque.
Elle se fait par les outils suivants :
Outils prédéfinis = ils sont géométriques (rectangle, cercle, ellipse, …) et permettent de
sélectionner une zone que l’on peut isoler pour y travailler, que l’on peut copier pour la coller
comme nouvelle image ou comme nouvelle sélection dans une image existante.
Lasso = il permet de sélectionner une zone à l’aide d’un contour tracé à la souris, un exercice
de haute voltige qu’il vaut mieux tenter sur une image agrandie au zoom, de façon a mieux
voir les limites des pixels.
Baguette magique = elle permet de
sélectionner des zones suivant le principe de
tolérance des couleurs (RVB OU TSL). Il
est toujours possible de sélectionner les
propriétés de cet outils pour arriver à un
résultat optimum.

Page 7 sur 8
Christian Breban – SOA – 2001
La zone apparaît en pointillés et on peut alors travailler sur cette sélection.

B ) Travail sur le masque.

La zone sélectionnée peut alors être
modifiée sans que le reste de l’image soit
atteint. Ainsi, on peut passer à un travail au
niveau des teintes pour faire ressortir les
détails du masque.
On peut aussi prendre un nouveau masque dans une image et le coller comme nouvelle
sélection dans une image existante.
Nous sélectionnons les cactus à placer dans notre paysage urbain, par copier coller comme
sélection dans l’image.

Le reste du travail est lié à votre imagination ;-)

Page 8 sur 8
Christian Breban – SOA – 2001