You are on page 1of 25

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-

Vert. L’information contenue dans l’image est plus importante. 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. Bleu (RVB) ou Red. 75 Hz (Hertz) : l'image est réaffichée 75 fois par seconde (elle paraît fixe). 1024x768. Taille d’un écran o Diagonale mesurée en pouces (de 13 à 21 pouces) -3- . 800x600. 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. 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. exemple. o Plus le nombre de points affichés par centimètre est grand  : • • • • Plus l’image est précise et agréable à regarder.30/11/04 AIM L’écran informatique Technologie d’affichage des couleurs : • • • o Synthèse additive des 3 couleurs fondamentales : Rouge.

30/11/04 AIM Pour tout savoir sur votre écran : Sous MacOS Sous MacOSX. le sous-menu Informations système Apple -4- . du menu pomme et ouvrir Moniteurs Sous MacOS9 ouvrir le Tableau de Bord (menu pomme) puis Moniteur et son Dans le menu Pomme. aller dans Préférences Système….

voir Affichage puis Configuration -5- .30/11/04 AIM Sous Windows : Dans Panneau de configuration.

30/11/04 AIM -6- .

832 x 624. …. 6Mo.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.) • -7- . La quantité de couleurs simultanément affichables. 4 Mo.…) La définition de l’écran (ex : 640 x 480. • • o La profondeur d’écran disponible dépend de : • La quantité de mémoire vidéo du micro-ordinateur : VRAM (ex : 2Mo.

o Codage dit en « couleurs réelles ». -8- . ¬ Si l’image comporte plus de 256 couleurs.7 millions de couleurs différentes. correspondant à leur place dans la table. images de haute qualité. 1 pour Blanc Image Noir et Blanc. 8 bits (1octet) par couleur R. V. 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. o Codage 8 bits : 256 niveaux de gris ou de couleurs différentes o Codage 24 bits soit 16. ¬ En attribuant un n° d’index à chacune de ces couleurs.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. les manquantes sont remplacées par des couleurs avoisinantes. mode RVB Rouge Vert Bleu. B. Image tramée permet d’obtenir des niveaux de gris.

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- .

Mo (KiloOctets.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.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.a.10 - . 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. MegaOctets) .

elle occupera tout l'écran. o Elle est d’autant plus « petite » que la définition de l’écran est élevée.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". mais les pixels seront plus grands. .11 - . Si la définition est. occupera toute la surface de l'écran o 17". o Pour la création de pages Web. par exemple. il suffit de générer des images à une résolution entre 72 et 100 ppp. dépend de la définition choisie : • Si la définition est de 800 x 600. 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.

• De nombreux moniteurs sont encore en 15" de diagonale écran. Ne pas oublier que les éléments de décor : fonds. • Ex : Une image 10 X 15 cm en 200 dpi. 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.30/11/04 AIM Des Images dans les pages Web Conséquences pour les pages Web : o Pensez à ceux qui consultent vos pages Web. si vous voulez « servir » vos pages au plus grand nombre. boutons. • Penser à la fluidité lors de la consultation de vos pages Web. traits de séparations sont également des images et qu’elles ont un « poids ».9 Mo . en mode RVB son poids est environ de 2. • Pour une publication sur le Web. est composée de 960 000 points. une image basse résolution sera suffisante. • • Affichage des images à l’écran Moniteur 15 pouces. images. à 72 ppp. voir 17 pouces pour les configurations plus riches ? Affichage en milliers de couleurs. 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.12 - . sons. tenez compte des configurations informatiques les moins riches. 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. Quelque soit le sujet représenté (sous-bois feuillu plein de couleurs ou nappe blanche). Elle donne à l'impression (papier) des détails et des transitions plus subtils. . animations. en général. l'image sera affichée sur un écran.

Painter. journal.30/11/04 AIM Origine des images En général les documents dont vous disposerez seront à numériser : o Photographie. PNG.a. au moment du téléchargement de la page Web écrite au format html. FreeHand. JPEG (ou JPG). ou Internet Explorer.d du nombre de points par pouce que l’imprimante est capable de reproduire. GraphicConverter (partagiciel MacOS). qui réalise l’affichage de l’image à l’écran. c. ou navigateur tel que NetScape-Communicator. revue.13 - . Sur le Web : o Au moment de la création ou de l’acquisition d’une image. acceptés par les navigateurs sont : GIF. les plus courants. Photoshop. diapositive ou négatif. o Il faudra donc « fabriquer » des images à ces formats normalisés  . • 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 . il faut tenir compte de la résolution de sortie. PaintShopPro ( partagiciel Windows) Destination des images Où allez-vous publier : o C’est le « browser ».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. Impression papier « Fabriquer » les images à insérer dans une page Web o Les formats d’images.

PaintShop Pro (Windows) DeBabelizer (MacOS et Windows) etc …: ¬ Dans le domaine de l’Open Source. PNG ou JPEG (JPG) (entre autres). De fabriquer une image à une résolution choisie : ¬ Selon la destination : publication Web ou impression papier  • .14 - . logiciels sous Licence Libre : • • The Gimp ImageMagick ¬ Et bien sûr Photoshop. de sauver l’image dans un fichier au format GIF. ¬ Par exemple les « shareware » (partagiciciels) : • • • Graphic Converter (MacOS). application créée par l’éditeur Adobe.30/11/04 AIM • Grâce à des logiciels de « traduction » d’un format graphique quelconque à un format standard sur le Web. o Ces logiciels vous permettent • De lire un grand nombre de formats de fichiers « image » en entrée. et en sortie.

PaintShop vous permettra de modifier taille en pixels et résolution d’une image. baguette magique … .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. en vue de son utilisation sur le Web . crayon. pot de peinture. Vous retrouverez également tous les outils classiques pinceau.15 - . gomme.

16 - . la taille exprimée en pixel En bas la taille de l’image. . éditée à 72 pixels par pouce (résolution écran).30/11/04 AIM Graphic Converter sur Mac En haut.

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

car l’image est recalculée au moment de l’affichage. épaisseur du trait. o Des formules mathématiques définissent des formes.18 - . ou augmenter sa résolution altère sa qualité. connaissant les paramètres suivants du tracé : unité de longueur. o Peut importe le périphérique de sortie et sa résolution. FireWorks (Macromedia) permettent de réaliser des images vectorielles. modifier sa taille. o Sa dimension et sa résolution sont fixées à l’origine.30/11/04 AIM Deux catégories d’images Il existe deux méthodes de description d’une image dans un système informatique : o L’image est construite point par point comme une mosaïque. Images Vectorielles o Des logiciels de dessin tels qu’Illustrator (Adobe). courbes et même les caractères d’un texte. o L’agrandissement se fait sans perte de qualité. points de départ et d’arrivée. Fireworks est plus particulièrement dédié à la création d’images vectorielles pour le Web . Comme les photos Les images Noir&Blanc Images tramées pour donner des images en niveaux de gris Les images couleurs Images Bitmap. 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 .

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. Le mode entrelacé o Donne l’impression que l’affichage est plus rapide. boutons. très utile pour les logos. o Autre méthode : utiliser des logiciels de mise en page Web conviviaux (WYSIWYG) tels que GoLive. lorsqu’une image est chargée : Les premiers octets transférés permettent d’afficher en faible résolution. c’est à dire d’en faire un lien dynamique. DreamWeaver … .19 - . 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. Les « cartes clickables » o Il est possible d’associer une portion d’une image à une URL.30/11/04 AIM Déco : les petits plus Les dessins transparents o Le fond de l’image est transparent.

à 50% de la taille originale. La résolution de numérisation sera : 600 x 1/2 = 300ppp Résolution d’entrée Image bitmap 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 Numérisation d’une photographie couleur destinée à un site Web : • • .30/11/04 AIM Numériser un document Dessin au trait o C’est la résolution du périphérique de sortie (imprimante ou affichage écran pour page Web) Résolution de sortie 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.20 - .

environ 400 000 cellules : format A4/4 1024 x 768pixels. o Prise de vue d’images sous forme numérique : • • • • En 16 millions de couleurs 640 x 480 pixels.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). Les logiciels Photoshop. 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é. o Les fichiers sont compressés. PaintShopPro. • actuellement de 1 à plus de 5 millions de pixels. ou petit appareil de lecture de cartes de stockage. 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. fonction anti-yeux rouges o Connexion • Transfert des données sur le disque dur grâce à un câble (usb ou série). il vous permet aussi de retoucher les images.21 - . o Flash. GraphicConverter. permettent de retoucher les images. Un logiciel fourni avec l’appareil permet de rapatrier les images sur votre disque dur.

o pict (format propriétaire Mac) o bmp (format propriétaire PC) o Les standards du Web : o jpeg. La qualité obtenue reste bonne avec des taux de compression pouvant aller jusqu’à 1 :20. gif animés. JPEG est une méthode de compression avec perte. le processus consiste à séparer l’information des couleurs et l’information de luminosité des pixels. avec le JPEG. Un effet de mosaïque. 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. En gros. Cette association a défini la compression JPE. 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. Le JPEG a été mis au point pour répondre à un besoin : obtenir des images de qualité photographique. gif transparents .30/11/04 AIM Les formats de fichiers images Les formats de fichiers image les plus courants dans le monde des micros : o tiff. 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. ou jpg «Joint Photographic Expert Group» est une association regroupant des représentants d’organismes de normalisation nationale. 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.22 - .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. o gif. Les opérations de compression/décompression sont rapides. ou tif (Mac &PC) Format d’image reconnu par les Mac et les PC.

Le format GIF utilise une méthode de compression d’images Unisys/Lempel Zev Welch (LZW). Il y a deux versions du format GIF : 87a et 89a. Celui-ci constituera la « langue » du fichier qui le rendra compréhensible ou pas par les logiciels utilisés. Ils ont tous deux l’avantage d’enregistrer les images de manière compactée. Le format GIF est un format d’images 8 bit. JPEG est plus performant avec des images complexes (type photographies. GIF est approprié aux images avec peu de couleurs (schémas. graphiques. Les fichiers PNG contiennent des informations sur les caractéristiques de la plate-forme de création de l'image donc le . o Il est possible également de créer des images « interlacée ». o La version 89a a ajouté des options au format 87a et prmet la transparence. il est utile de choisir un « format » approprié. elle est très répandue sur l’Internet. 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é. o La version 87a . plans. l’usager peut se faire une idée de l’image à mesure qu’elle se charge sur son écran. etc…). avec de nombreuses nuances).23 - .30/11/04 AIM Le format GIF « Graphic Interchange Format» a été inventé par Compuserve. Il peut représenter jusqu’à 256 couleurs (2 à la puissance 8). ne supporte pas la transparence. 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. elles tiennent donc moins de place sur le support de sauvegarde. deux formats sont assez universellement reconnus : Le format JPEG et le format GIF. Lors du décodage. Actuellement. Au moment d’enregistrer une image.

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). et contrairement au JPEG il supporte des images 32 bits (16 millions de couleurs + 256 niveaux de transparence). contrairement au JPEG.be/PNG/ http://fr. voir les url : http://antp.org/wiki/PNG ) . Contrairement au GIF.wikipedia. du même type que le GIF ou le PCX.24 - .30/11/04 AIM logiciel de visualisation peut s'adapter automatiquement et assurer un affichage de qualité. Selon Tim Berners-Lee. il supporte des images en 24 bits (16 millions de couleurs).

htm .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).inra.25 - . 1 octet (ou byte ou caractère) = 8 bits 1 kilo-octet (Ko) 1 méga-octet (Mo) 1 giga-octet (Go) 1 téra-octet (To) = 1024 octets = 1024 Ko = 1024 Mo = 1024 Go Une adresse pour plus d’informations : http://www.fr/tours/doc/graphisme.tours.