AIM

Les Images
Tout travail sur une image numérique doit être précédé d’une
réflexion sur l’utilisation future de cette image et donc sur le
média qui sera chargé de la diffuser.

Rosetta
Sonde de l'Agence Spatiale Européenne (ESA)
dont le but est d'explorer la comète Churyumov Gerasimenko.

Observatoire de Paris-Meudon – 5, place J. Janssen – 92195 Meudon Principal Cedex

http://www.obspm.fr/aim
30/11/04 AIM

Sommaire
Sommaire______________________________________________________________________ 2
L’écran informatique ____________________________________________________________ 3
Pour tout savoir sur votre écran : Sous MacOS _______________________________________ 4
Sous Windows : _________________________________________________________________ 5
La profondeur d’écran ___________________________________________________________ 7
Codage des couleurs _____________________________________________________________ 8
La mesure des images ___________________________________________________________ 10
Une image sur l'écran___________________________________________________________ 11
Des Images dans les pages Web ___________________________________________________ 12
Origine des images _____________________________________________________________ 13
Logiciel de retouche et traitement des images ________________________________________ 15
Deux catégories d’images ________________________________________________________ 18
Déco : les petits plus ___________________________________________________________ 19
Numériser un document _________________________________________________________ 20
Appareil photo-numérique _______________________________________________________ 21
Les formats de fichiers images ____________________________________________________ 22
Pour mémoire _________________________________________________________________ 25

-2-
30/11/04 AIM

L’écran informatique
Technologie d’affichage des couleurs :
o Synthèse additive des 3 couleurs fondamentales :

• Rouge, Vert, Bleu (RVB) ou Red, Green Blue (RGB)

• Absence des 3 couleurs = Noir

• Somme des 3 couleurs (maximum d’intensité)= Blanc

o Image à l’écran = succession de points colorés

(pixels : picture element)
Les deux seuls éléments qui caractérisent un pixel sont donc ses coordonnées spatiales et les informations sur la
couleur qu’il doit figurer.
o Plus le nombre de points affichés par centimètre est grand  :

• Plus l’image est précise et agréable à regarder,

• L’information contenue dans l’image est plus importante,

• Donc pour traiter l’image le processeur aura plus de travail

• Le temps de transfert de l’image sur le réseau sera plus important

Définition d'un écran :

o Nombre de points que l’on peut afficher sur la surface de l’écran
( exemple : 640x480, 800x600, 1024x768, 1600x1200 )

Résolution d’écran :
o Nombre de points par pouce
ppi : points par pouces ou dpi : dot per inch ( exemple : 72 ppi )

o Ecran multi-fréquence :
Plusieurs définitions sont disponibles sans redémarrage de l’ordinateur

o Fréquence d'affichage, exemple, 75 Hz (Hertz) :

l'image est réaffichée 75 fois par seconde (elle paraît fixe).

Taille d’un écran

o Diagonale mesurée en pouces (de 13 à 21 pouces)

-3-
30/11/04 AIM

Pour tout savoir sur votre écran : Sous MacOS

Sous MacOSX, aller dans Préférences Système…, du menu pomme et ouvrir Moniteurs
Sous MacOS9 ouvrir le Tableau de Bord (menu pomme) puis Moniteur et son

Dans le menu Pomme, le sous-menu Informations système Apple

-4-
30/11/04 AIM

Sous Windows :
Dans Panneau de configuration, voir Affichage puis Configuration

-5-
30/11/04 AIM

-6-
30/11/04 AIM

La profondeur d’écran
« Richesse » de l’affichage à l’écran :
o La profondeur d’écran indique :

• La quantité d’information couleur affectée pour chaque pixel du

fichier affiché à l’écran,

• La quantité de couleurs simultanément affichables.

o La profondeur d’écran disponible dépend de :

• La quantité de mémoire vidéo du micro-ordinateur :

VRAM (ex : 2Mo, 4 Mo, 6Mo,…)

• La définition de l’écran (ex : 640 x 480, 832 x 624, ….)

-7-
30/11/04 AIM

Codage des couleurs

Chaque pixel est codé :
Il « porte » une certaine quantité d’information de « couleur » :
Par exemple
o Codage 1 bit par pixel : 0 pour Noir, 1 pour Blanc
Image Noir et Blanc.
Image tramée permet d’obtenir des niveaux de gris.

o Codage 8 bits : 256 niveaux de gris ou de couleurs différentes

o Codage 24 bits soit 16,7 millions de couleurs différentes, mode RVB

Rouge Vert Bleu.

o Codage dit en « couleurs réelles », images de haute qualité, 8 bits

(1octet) par couleur R, V, B.

o Couleurs indexées : pour diminuer le poids de l’image

on ramène un codage 24bits -> à 8bits

• Une table de couleurs (palette ou LUT) est créée

¬ En déterminant le nombre de couleurs différentes utilisées dans

l’image,

¬ En attribuant un n° d’index à chacune de ces couleurs,

correspondant à leur place dans la table.

¬ Si l’image comporte plus de 256 couleurs, les manquantes sont

remplacées par des couleurs avoisinantes.

-8-
30/11/04 AIM

Remarque : l’espace colorimétrie du

codage RVB (écran) est différent de
l’espace colorimétrique du codage
CMJN (impressions).
Attention donc aux couleurs choisies
et tenir compte de leur destination.

Extrait de la documentation
Adobe Photoshop

-9-
30/11/04 AIM

La mesure des images

Taille

o En nombre de pixels

• Taille = nombre de pixels en X x nombre de pixels en Y

ex : une image de 500 x 500 pixels (largeur x hauteur) = 100 000
pixels

o En mesure spatiale et résolution

• Résolution =
nombre de pixels par unité de longueur.
Points Par Pouce : ppp, ou Dot Per Inch : dpi

• Taille =
nombre de pixels en X x nombre de pixels en Y à Résolution donnée
(en ppp)

• c.a.d Taille = NX x NY pixels x résolution,

ex : 560 x 400 à 72 ppp

Poids du fichier image

o Il dépend de la quantité d’information codée :

• Type de codage des couleurs en chaque pixel de l’image

• Taille en nombre de pixels 

• Il se mesure en Ko, Mo (KiloOctets, MegaOctets)

- 10 -
30/11/04 AIM

Une image sur l'écran

Une image de 800 pixels de large par 600 pixels de haut :
sur un écran
o 15", occupera toute la surface de l'écran

o 17", dépend de la définition choisie :

• Si la définition est de 800 x 600, elle occupera tout l'écran, mais les
pixels seront plus grands,

• Si la définition est, par exemple, 1200 x 1600 elle n'occupera qu'une

partie de l'écran.

Conclusion :

o La même image n’aura pas la «même taille en cm» sur tous les écrans.

o Elle est d’autant plus « petite » que la définition de l’écran est élevée.

o Pour la création de pages Web, il suffit de générer des images à une

résolution entre 72 et 100 ppp.

- 11 -
30/11/04 AIM

Des Images dans les pages Web

Conséquences pour les pages Web :
o Pensez à ceux qui consultent vos pages Web, tenez compte des
configurations informatiques les moins riches, si vous voulez « servir »
vos pages au plus grand nombre.

• Affichage des images à l’écran

• Moniteur 15 pouces, voir 17 pouces pour les configurations plus

riches ?

• Affichage en milliers de couleurs, voir en 256 couleurs

o Le temps de transfert dépend du poids du fichier transféré

• La page Web contient de l’information qui peut être sous forme de

texte, images, sons, animations.

• Ne pas oublier que les éléments de décor : fonds, boutons, traits de

séparations sont également des images et qu’elles ont un « poids ».

Penser à la fluidité lors de la consultation de vos pages Web,

o c’est à dire au temps de transfert des données
de la machine serveur de la page Web à la machine cliente de
l’internaute.

• Ex : Une image 10 X 15 cm en 200 dpi, est composée de 960 000

points, en mode RVB son poids est environ de 2,9 Mo . Quelque soit le
sujet représenté (sous-bois feuillu plein de couleurs ou nappe
blanche).

Rappelez-vous que :
Une image codée sur 24 bits est plus lourde qu’une image codée sur 8 bits
car : Poids de l’image = ( Nbre de pixels en X ) x ( Nbre de pixels en Y ) x
(Nbre de bits du codage )
• Une image haute résolution utilise d'avantage de pixels sur une même
surface.
Elle donne à l'impression (papier) des détails et des transitions plus subtils.
• Pour une publication sur le Web, une image basse résolution sera
suffisante, l'image sera affichée sur un écran, en général, à 72 ppp.
• De nombreux moniteurs sont encore en 15" de diagonale écran.

- 12 -
30/11/04 AIM

Origine des images

En général les documents dont vous disposerez seront à numériser :
o Photographie, revue, journal, diapositive ou négatif.

• A numériser à l’aide d’un scanner à plat

o Photographies numériques :

• Lues sur les CD-Photo

• Appareil photo-numérique (capteurs CCD)

o Animation : vidéo - Capture d’images vidéo

• Caméscope numérique

• Ou bien grâce à une carte d’acquisition vidéo 

o Images réalisées à partir de logiciels de dessin

Tels Illustrator, FreeHand, Photoshop, Painter, GraphicConverter

(partagiciel MacOS), PaintShopPro ( partagiciel Windows)

Destination des images

Où allez-vous publier :
Sur le Web :
o C’est le « browser », ou navigateur tel que NetScape-Communicator, ou
Internet Explorer, qui réalise l’affichage de l’image à l’écran, au moment
du téléchargement de la page Web écrite au format html.

Impression papier
o Au moment de la création ou de l’acquisition d’une image, il faut tenir
compte de la résolution de sortie, c.a.d du nombre de points par pouce
que l’imprimante est capable de reproduire.

« Fabriquer » les images à insérer dans une page Web

o Les formats d’images, les plus courants, acceptés par les navigateurs
sont : GIF, JPEG (ou JPG), PNG.

o Il faudra donc « fabriquer » des images à ces formats normalisés 

- 13 -
30/11/04 AIM

• Grâce à des logiciels de « traduction » d’un format graphique

quelconque à un format standard sur le Web.

¬ Par exemple les « shareware » (partagiciciels) :

• Graphic Converter (MacOS),

• PaintShop Pro (Windows)

• DeBabelizer (MacOS et Windows) etc …:

¬ Dans le domaine de l’Open Source, logiciels sous Licence Libre :

• The Gimp

• ImageMagick

¬ Et bien sûr Photoshop, application créée par l’éditeur Adobe.

o Ces logiciels vous permettent

• De lire un grand nombre de formats de fichiers « image » en entrée,

et en sortie, de sauver l’image dans un fichier au format GIF, PNG ou
JPEG (JPG) (entre autres).

• De fabriquer une image à une résolution choisie :

¬ Selon la destination : publication Web ou impression papier 

- 14 -
30/11/04 AIM

Logiciel de retouche et traitement des images

PaintShop Pro sur Windows

Comme tous les logiciels de retouche et de traitement des images, PaintShop vous
permettra de modifier taille en pixels et résolution d’une image, en vue de son
utilisation sur le Web ;
Vous retrouverez également tous les outils classiques pinceau, crayon, gomme, pot de
peinture, baguette magique …

- 15 -
30/11/04 AIM

Graphic Converter sur Mac

En haut, la taille exprimée en pixel En bas la taille de l’image, éditée à 72 pixels par
pouce (résolution écran).

- 16 -
30/11/04 AIM

Photoshop sur MacOs et Windows

En haut, la taille exprimée en pixel (la petite chaîne indique que les proportions en X
et Y sont gardées intactes).
En bas la taille de l’image, en cm, une fois imprimée sur une imprimante de résolution
1000 pixels par pouces.
Vous retrouvez les outils de dessins : pinceau, crayon, pot de peinture, outil texte …
Notez qu’à chaque fois que vous utilisez l’outil texte, un calque s’ouvre, contient
votre texte ; ceci est très pratique pour le modifier, le déplacer, le transformer
(rotation, torsion …)

- 17 -
30/11/04 AIM

Deux catégories d’images

Il existe deux méthodes de description d’une image dans un système
informatique :
Images Bitmap.
o L’image est construite point par point comme une mosaïque.

o Sa dimension et sa résolution sont fixées à l’origine, modifier sa taille,

ou augmenter sa résolution altère sa qualité.

Comme les photos

Les images Noir&Blanc
Images tramées pour donner des images en niveaux de gris
Les images couleurs

Images Vectorielles
o Des formules mathématiques définissent des formes, courbes et même
les caractères d’un texte.

o L’agrandissement se fait sans perte de qualité, car l’image est re-

calculée au moment de l’affichage.

o Peut importe le périphérique de sortie et sa résolution.

o Les fichiers générés sont de taille plus faible 

Ex : Tracer un L dans un logiciel de dessin vectoriel se réalise en 2

vecteurs , connaissant les paramètres suivants du tracé : unité de longueur,
points de départ et d’arrivée, épaisseur du trait.

o Des logiciels de dessin tels qu’Illustrator (Adobe), FireWorks

(Macromedia) permettent de réaliser des images vectorielles.
Fireworks est plus particulièrement dédié à la création d’images
vectorielles pour le Web

- 18 -
30/11/04 AIM

Déco : les petits plus

Les dessins transparents
o Le fond de l’image est transparent, très utile pour les logos, boutons. Si
l’image est insérée dans une page Web, le fond choisi pour la page
apparaît comme étant le fond de l’image.

Le mode entrelacé
o Donne l’impression que l’affichage est plus rapide, lorsqu’une image est
chargée :

Les premiers octets transférés permettent d’afficher en faible résolution, au

fur et à mesure du transfert l’affichage atteint la pleine résolution.

Les Gifs animés

o Image animée = pile d’images au format gif donnant l’impression d’une
animation. Le navigateur affiche les images les unes après les autres.

Les « cartes clickables »

o Il est possible d’associer une portion d’une image à une URL, c’est à dire
d’en faire un lien dynamique.

o Autre méthode : utiliser des logiciels de mise en page Web conviviaux

(WYSIWYG) tels que GoLive, DreamWeaver …

- 19 -
30/11/04 AIM

Numériser un document
Dessin au trait
Résolution de sortie
o C’est la résolution du périphérique de sortie (imprimante ou affichage
écran pour page Web)

Résolution d’entrée
o Correspond au choix de la résolution pour scanner :

Résolution d’entrée = Résolution de sortie x Facteur de redimensionnement

Ex : Numériser une image représentant un logo :

Pour l’imprimer sur une imprimante de résolution 600ppp, à 50% de la
taille originale,
La résolution de numérisation sera : 600 x 1/2 = 300ppp

Image bitmap
Numérisation d’une photographie couleur destinée à un site Web :
o Paramétrer le logiciel qui vous permet de numériser le document :

• Mode couleur (RVB)

• Périphérique ton continus (les écrans sont capables de restituer

plusieurs couleurs par pixel, sans avoir besoin de recourir au
tramage)

• Résolution de sortie 72 ppp (résolution de l’écran)

• Selon le logiciel de numérisation vous aurez à indiquer :

¬ Soit la résolution d’entrée

ResEntrée = resSortie x facteurAgrandissement

¬ Soit l’échelle à appliquer

Echelle =( LargeurDésirée / LargeurActuelle) x 100

- 20 -
30/11/04 AIM

Appareil photo-numérique
Capteurs et résolution
o Des capteurs CCD remplacent le film

o La définition de l’image obtenue dépend du nombre de capteurs CCD

(Charge Coupled Device),

• actuellement de 1 à plus de 5 millions de pixels.

o Prise de vue d’images sous forme numérique :

• En 16 millions de couleurs

• 640 x 480 pixels, environ 400 000 cellules : format A4/4

• 1024 x 768pixels, environ 800 000 cellules : format A4/2

• etc …

Qualité optique
o Objectif semblable à celui des appareils photo classiques

Autres caractéristiques de l’appareil :

o Mémoire et capacité. Le stockage des photos se fait dans la mémoire de
l’appareil.

o Format des fichiers en général TIF (ou TIFF) et JPEG.

o Les fichiers sont compressés.

o Flash, fonction anti-yeux rouges

o Connexion

• Transfert des données sur le disque dur grâce à un câble (usb ou

série), ou petit appareil de lecture de cartes de stockage.

• Un logiciel fourni avec l’appareil permet de rapatrier les images sur

votre disque dur, il vous permet aussi de retoucher les images.

• Les logiciels Photoshop, GraphicConverter, PaintShopPro, permettent

de retoucher les images.

- 21 -
30/11/04 AIM

Les formats de fichiers images

Les formats de fichiers image les plus courants dans le monde des micros :
o tiff, ou tif (Mac &PC)
Format d’image reconnu par les Mac et les PC. Très bonne qualité d’image
numérique qui est également souvent utilisé comme format d’image lors
d’acquisition par les appareils photo-numériques ou les scanners, avec le
JPEG.

o pict (format propriétaire Mac)

o bmp (format propriétaire PC)

o Les standards du Web :

o jpeg, ou jpg

«Joint Photographic Expert Group» est une association regroupant des

représentants d’organismes de normalisation nationale. Cette association a
défini la compression JPE. Le JPEG a été mis au point pour répondre à un
besoin : obtenir des images de qualité photographique.

JPEG est une méthode de compression avec perte, certaines informations de

l’image sont supprimées lors de la compression et ne seront pas récupérées
lors de la décompression. En gros, le processus consiste à séparer
l’information des couleurs et l’information de luminosité des pixels.
L’algorithme de compression identifie certaines zones dans l’image où les
couleurs sont très similaires et supprime les différences qui sont invisibles à
l’œil nu.

Les opérations de compression/décompression sont rapides. La qualité

obtenue reste bonne avec des taux de compression pouvant aller jusqu’à 1 :20.
Un effet de mosaïque,qui se traduit par l’apparition de blocs lors de la
décompression peut apparaître selon le taux de compression choisi et sembler
désagréable pour l’usager.

Le format JPEG est un bon choix pour l’affichage des images photographiques
et des images contenant plus de 216 couleurs et dégradés car le nombre
importatnt de couleurs possible compense largement pour la perte
d’information que ce type de compression entraîne et dépasse nettement celle
du format GIF limité à ses 256 couleurs.

o gif, gif animés, gif transparents

- 22 -
30/11/04 AIM

Le format GIF « Graphic Interchange Format» a été inventé par Compuserve.

Le format GIF utilise une méthode de compression d’images Unisys/Lempel
Zev Welch (LZW). Le format GIF est un format d’images 8 bit.

Il peut représenter jusqu’à 256 couleurs (2 à la puissance 8).

Il y a deux versions du format GIF : 87a et 89a.

o La version 87a , ne supporte pas la transparence.

o La version 89a a ajouté des options au format 87a et prmet la

transparence, elle est très répandue sur l’Internet.

o Il est possible également de créer des images « interlacée ».

Lors du décodage, l’usager peut se faire une idée de l’image à
mesure qu’elle se charge sur son écran.

Au moment d’enregistrer une image, il est utile de choisir un « format »

approprié.

Celui-ci constituera la « langue » du fichier qui le rendra compréhensible ou

pas par les logiciels utilisés.

Actuellement, deux formats sont assez universellement reconnus :

Le format JPEG et le format GIF.

Ils ont tous deux l’avantage d’enregistrer les images de manière compactée, elles
tiennent donc moins de place sur le support de sauvegarde.

JPEG est plus performant avec des images complexes (type photographies, avec de
nombreuses nuances).

GIF est approprié aux images avec peu de couleurs (schémas, plans, graphiques, etc…).
Mais attention le format GIF n’est pas libre de droit !

Il est donc intéressant de passer au format PNG, ce format est de plus en plus
utilisé et peut être utilisé libre de droits.

o Png

La spécification PNG (Portable Network Graphics) permet de disposer de

spécifications de codage d’image et de compression fonctionnant sur toutes
les plates-formes du marché. Les fichiers PNG contiennent des informations
sur les caractéristiques de la plate-forme de création de l'image donc le

- 23 -
30/11/04 AIM

logiciel de visualisation peut s'adapter automatiquement et assurer un

affichage de qualité.

Selon Tim Berners-Lee, directeur du W3C et inventeur du WWW «PNG

représente une avance significative dans la conception graphique sur le Web
et nous sommes très enthousiastes quant aux possibilités qu'il laisse
entrevoir».

Il s'agit d'un format de compression d'images sans perte (lossless), du même

type que le GIF ou le PCX, contrairement au JPEG.

Contrairement au GIF, il supporte des images en 24 bits (16 millions de

couleurs), et contrairement au JPEG il supporte des images 32 bits (16
millions de couleurs + 256 niveaux de transparence).

voir les url :

http://antp.be/PNG/

http://fr.wikipedia.org/wiki/PNG )

- 24 -
30/11/04 AIM

Pour mémoire

Unité de capacité de mémoire

1bit = la plus petite quantité d’information utilisable par un

microprocesseur (0 ou 1).
1 octet (ou byte ou caractère) = 8 bits
1 kilo-octet (Ko) = 1024 octets
1 méga-octet (Mo) = 1024 Ko
1 giga-octet (Go) = 1024 Mo
1 téra-octet (To) = 1024 Go

Une adresse pour plus d’informations :

http://www.tours.inra.fr/tours/doc/graphisme.htm

- 25 -