Espace collaboratif formateurs:ModuleSI003Cours1

Description

Support de cours FFTI Transfer - Agence universitaire de la Francophonie
Ce support de cours de l’Agence universitaire de la Francophonie est distribué sous licence GNU
FDL.
Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de
la Licence GNU Free Documentation License, Version 1.2 ou ultérieure publiée par la Free
Software Foundation. Une copie de cette licence appelée GNU Free Documentation License est
disponible sur http://www.gnu.org/copyleft/fdl.html
Initiation à linfographie
Formats d’images
Images Bitmaps et Images vectorielles
Il existe deux familles distinctes d’images numériques : les images de type bitmap, c’est à dire
point par point et les images de type vectoriel, c’est à dire à base de composants géométriques.
Une image bitmap est stockée sous forme de pixels, un pixel étant une unité élementaire. Une
image de type bitmap est tout d’abord définie par le nombre de pixels qui la compose : par
exemple sur le graphique de gauche, l’image est composée de 10 pixels de haut et de 10 pixels
de large, soit 100 pixels (10 fois 10). Ensuite, l’image est définie par le nombre de couleurs que
peut prendre chaque pixel. Si on stocke chaque pixel sur un bit, alors seules deux variantes sont
possibles : le pixel est etteind ou allumé. En stockant chaque pixels sur 1 octets, c’est à dire 8
bits, on peut coder 2 exposant 8 couleurs différentes, chaque bit pouvant prendre 2 valeurs
différentes. Avec un codage sur 8 octets, on peut ...

Sujets

• cours
• cours de

Informations

• Publié par: Irnya
• Nombre de lectures: 82
• Langue: Français

Extrait

Ce support de cours de l’Agence universitaire de la Francophonie est distribué sous licence GNU

FDL.

Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de

la Licence GNU Free Documentation License, Version 1.2 ou ultérieure publiée par la Free

Software Foundation. Une copie de cette licence appelée GNU Free Documentation License est

disponible sur http://www.gnu.org/copyleft/fdl.html

Initiation à linfographie

Formats d’images

Images Bitmaps et Images vectorielles

Il existe deux familles distinctes d’images numériques : les images de type

bitmap

, c’est à dire

point par point et les images de type

vectoriel

, c’est à dire à base de composants géométriques.

Une image bitmap est stockée sous forme de pixels, un pixel étant une unité élementaire. Une

image de type bitmap est tout d’abord définie par le nombre de pixels qui la compose : par

exemple sur le graphique de gauche, l’image est composée de 10 pixels de haut et de 10 pixels

de large, soit 100 pixels (10 fois 10). Ensuite, l’image est définie par le nombre de couleurs que

peut prendre chaque pixel. Si on stocke chaque pixel sur un bit, alors seules deux variantes sont

possibles : le pixel est etteind ou allumé. En stockant chaque pixels sur 1 octets, c’est à dire 8

bits, on peut coder 2 exposant 8 couleurs différentes, chaque bit pouvant prendre 2 valeurs

différentes. Avec un codage sur 8 octets, on peut coder 256 couleurs. Avec un codage de chaque

pixels sur 3 octets, on peut coder 256 x 256 x 256 soient environ 16 millions de couleurs !

- 1 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

Le principal inconvénient des images de type bitmap réside dans le fait que ces images

supportent difficilement l’agrandissement. En effet, si on agrandit à 200% une image bitmap,

chaque pixel élementaire sera transformé en un carré de 2 pixels par 2 pixels; ce qui ne sera

vraiment pas trés joli ! On voit ainsi sur le graphique de droite que l’agrandissement d’un cercle

rend visible les pixels qui constituent le bord du cercle.

Une image de type vectoriel n’est pas stockée sous forme de pixels mais sous forme d’éléments

géométriques d’où la terminologie vectorielle. Pour coder un cercle, au lieu de coder chaque pixel

de l’image, on se contentera d’utiliser des instructions du style : cercle dont la position du centre

est (x=10,y=10) et dont le rayon est 5. Ainsi si on veut agrandir l’image vectorielle de 200%, on se

contentera de doubler la valeur du rayon et le bord du cercle sera parfaitement conservé, sans

aucune distorsion. L’inconvénient des images vectorielles c’est qu’on ne peut stocker que des

éléments géométriques élémentaires et que si on veut représenter une image compliquée, on

sera obligé de stocker un trés grand nombre d’éléments géométriques : on aura alors une image

trés volumineuse et nécessitant beaucoup de ressources de calcul pour l’affichage.

Par conséquent, les images vectorielles sont utilisées principalement pour des schémas ou des

compositions pour lesquels on peut réaliser des transformations sans engendrer des distortions

(plan d’un architecte par exemple, dessins animés, etc...). Les images bitmaps quand à elles sont

utilisées pour représenter des photographies.

Un logiciel tel que Photoshop fonctionne avec des images bitamps et un logiciel tel que Illustrator

ou Corel Draw! des images vectorielles.

Format d’images utilisées pour le Web

Les navigateurs Internet ne reconnaissent que 2 format d’images, tout deux étant des formats de

type bitmaps : les formats JEPG et les formats GIF. Depuis quelque temps, les navigateurs

reconnaissent également le format PNG qui est un format vectoriel dans lequel on peut combiner

des images bitmaps. Cependant du fait que tout le monde n’utilise pas forcément les dernières

versions des navigateurs, il est fortement recommandé de n’utiliser ques des images de type

JPEG et GIF.

Avant de parler des différences entre ces deux formats d’images, nous allons discuter rapidement

- 2 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

de la compression d’image. Il existe deux grandes catégories de compression : la

compression

avec perte d’informations

et la

compression sans perte d’information

. Comment peut on

compresser une image sans perdre l’information qui la constitue ?Tout simplement en codifiant la

redondance d’information ! Imaginons que vous disposiez d’une photographie numérique de 900

par 600 pixels d’un personnage prise à l’extérieur. Une bonne partie de la photo sera occuppée

par le ciel qui a une couleur uniforme. La première rangée de pixel étant entièrement constituée

de pixels bleu, au lieu de stocker bleu, bleu, bleu, bleu, bleu, etc... 900 fois de suite, on peut se

contenter de dire compression - couleur bleu - répéter 900 fois : on vient de compresser par 300

la première rangée de pixels sans perdre de l’information (la première case mémoire indique qu’il

s’agit d’un code de compression et non de la couleur d’un pixel, la seconde indique la couleur qui

va être répétée et la troisième le nombre de répétition). Evidemment pour que la compression sur

une image soit significative, il faut que l’image comporte un grand nombre de redondance de

couleur, ce qui est la plupart du temps le cas. Typiquement le taux de compression sera plus

faible sur une photo du public d’un match de foot qui comporte peu de zones de couleurs

continues que sur une photo de type paysage. Si l’on veut réduire encore le poids d’une image, il

est possible d’effectuer une compression avec pertes d’informations. Prenons par exemple, une

photographie d’une boule de billiard éclairée par un lampe : la couleur de la boule n’est pas

uniforme et le bord comprend de nombreuses variantes de couleurs assez similaires. L’idée est

donc de coder les variantes de couleurs trés proches par une même couleur : on perdra alors de

l’information par rapport à l’image originale mais si l’oeil humain n’est guère capable de voir la

différence, ce n’est pas trés grave.

Format GIF :

chaque pixel est codé sur 8 bits, ce qui signifie que l’on ne peut avoir que 256 variantes de

couleur sur une même image (ce qui est la plupart du temps insuffisant pour des

photographies);

compression de l’information sans perte;

permet de gérer une couleur transparente (c’est à dire invisible);

permet de réaliser des animations;

- 3 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

Format JPEG :

chaque pixel est codé sur 3 octets en RGB (Red, Green, Blue) / RVB (Rouge, Bleu, Vert), ce

qui signifie que l’on peut avoir plus de 16 millions de couleurs différentes sur une même

image; ce qui permet des rendus photographiques;

la compression de l’information s’effectue avec perte de l’information mais le niveau de perte

est paramétrable;

ne gère ni les fonds transparents ni les animations.

Comment choisir entre GIF et JPEG ?

Tout dépend du contenu de l’image que vous souhaitez enregistrer. Dans tous les cas, il faut bien

avoir à l’esprit que pour un site Web, la vitesse de téléchargement d’une page est cruciale : avec

un modem, on télécharge à 2 ou 3 Ko par seconde et il est nécessaire d’effectuer un compromis

entre qualité et vitesse de téléchargement. Voici quelques règles d’ordre général :

pour une photographie, privilégier le format jpeg plutôt que GIF (le résultat est meilleure et

moins volumineux);

pour une image comportant du texte, privilégier le format GIF (avec du JPEG, le texte risque

d’être flou);

pour réaliser des animations (du genre banderole animée), du texte, un fond transparent,

utiliser le format GIF;

une image JPEG enregistrée avec une qualité de 100% signifie qu’il n’y a pas de perte

d’information mais le résultat sera trés volumineux; une image JPEG avec une qualité de

70% permet un résultat correct pour un fichier bien moins volumineux; selon le type d’image,

on peut descendre jusqu’à 50% mais en dessous le résultat est généralement médiocre.

- 4 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

GIF -

9 Ko

JPG qualité 100 -

23 Ko

JPG qualité 70 -

3 Ko

Meilleur compromis

Exemple d’une photographie exportée selon différents formats

GIF -

9 Ko

Meilleur choix

JPG qualité 100 -

23 Ko

JPG qualité 70 -

3 Ko

Exemple de texte exporté selon différents formats

Exportation d’images pour le Web

Pour les travaux pratiques, vous devez disposer d’un logiciel de traitement d’images. Vous pouvez

utiliser Adobe Photoshop (la référence des infographistes mais produit cher et compliqué pour les

débutants), GIMP l’excellent logiciel libre ou encore Macromedia Fireworks (particulèrement

adapté à la création de sites Web, propose des options pour s’intégrer directement avec l’éditeur

HTML Dreamweaver et permet à la fois des manipulations bitmaps et vectorielles). Si vous

disposez déjà d’un logiciel de traitement d’images, utilisez le, sinon vous pouvez télécharger

Fireworks, version d’évaluation limitée à 30 jours (19 Mo).

Cliquez avec le bouton droit au dessus de la photographie de la guèpe (format JPG qualité 100 -

23 Ko) ci-dessus puis sur "Enregistrez l’image sous..." Ouvrez ensuite l’image avec votre logiciel

de traitement d’images. Sous Fireworks, cliquez sur "Fichier", "Assistant d’exportation" et

comparez différents formats (GIF et JPEG) et différents niveaux de compression : les deux

fenêtres de l’assistant d’exportation vous permettent de visualiser le rendu tout en affichant la

taille de l’image résultante en Ko, ainsi qu’une évaluation du temps de téléchargement avec un

modem. Faites de même avec l’image de texte ci-dessus (à partir de l’enregistrement de l’image

- 5 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

au format GIF).

Par la suite, lorsque vous aurez l’habitude de sélectionner le format présentant le meilleur

compromis qualité / poids de l’image, il est plus rapide d’utiliser "Aperçu avant exportation..." dans

le menu "Fichier" plutôt que "Assistant d’exportation..."

La problématique de la dimension des images à exporter

Lors de la réalisation d’un site Web, se pose un problème délicat : nous ignorons tout de la

configuration des postes informatiques de nos visiteurs. Certains visiteurs disposent d’écran 14 ou

15 pouces, d’autres de 17 pouces ou plus. La résolution de l’écran des visiteurs peut être de 640

par 480 pixels, 800 par 600, 1024 par 768 ou d’avantage encore ! Comme nous le verrons lors

des modules "SI004 - Utilisation d’un éditeur HTML WYSIWYG" et "SI005 - Mettre en forme des

pages complexes avec des tableaux", lors de la réalisation de l’interface graphique d’un site, nous

devons effectuer un compromis sur la résolution de l’interface. Si nous effectuons une interface

graphique dont la largeur est adapté à une résolution graphique de largeur 1024 pixels, alors les

visiteurs disposant d’écrans de petites tailles dervont recourir en permanence à la barre de

défilement horizontal pour visualiser les pages dans leurs intégralités, ce qui est particulièrement

désagréable. Au contraire si notre interface graphique est concue pour une largeur de 640 pixels,

les détenteurs de grands écrans vont se sentir frustrés. Un compromis généralement adopté

consiste à optimiser un site pour une largeur d’écran de 800 pixels. Nous verrons par la suite dans

les modules SI004 et SI005 qu’en utilisant des tableaux de largeur 100%, il est possible de

réaliser des interfaces graphiques qui s’adaptent automatiquement aux résolutions supérieures.

Exemple de l’organisation d’une page HTML

- 6 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

Si l’on considère le schéma ci-dessus qui représente l’organisation d’une page HTML. Imaginons

que cette page soit optilisée pour une résolution de 800 pixels et qu’une colonne de 200 pixels est

dédiée au menu de navigation. La largeur maximale des images que peut contenir la zone dédiée

au contenu de la page ne peut dépasser 800 - 200 pixels soit 600 pixels. En outre, il faut prévoir

le cas où le contenu est conséquent et nécessite à recourir à la barre de défilement vertical. Il faut

donc soustraire des 600 pixels, la largeur de la barre de défilement : en principe la largeur est de

35 pixels mais selon les systèmes d’exploitations (Windows, Unix, Macintosh) et le type de

Navigateur employé par le visiteur (Internet Explorer, Netscape, Opéra, Mozilla, Safari, etc..), la

largeur de la barre d’ascenseur peut être plus grande. Il est donc prudent de réserver 50 pixels

pour la barre de défilement. Il ne nous reste donc plus que 550 pixels maximum pour la largeur

des illustrations. Si cette largeur est dépassée, alors le visiteur devra recourir à la barre de

défilement horizontale avec un écran de résolution 800 par 600 pixels.

Il faut donc être trés vigilant sur les dimensions des images utilisées. En outre plus une image est

petite, moins elle sera volumineuse et donc plus rapide à télécharger. Comment publier une photo

sur le Web ? Tout d’abord vous avez intérêt à utiliser une photographie de la meilleure résolution

possible, puis vous recadrez l’image en ne conservant que la partie pertinente (par exemple, pour

un personnage, il est judicieux de recadrer la photo en effectuant un copier-coller vers un

nouveau document afin de ne conserver que le personnage et supprimer les parties non

pertinentes), ensuite vous devez redimensionner l’image afin que sa taille soit compatible avec les

dimensions requises. Il est également utile de recourir au réglage automatique des couleurs afin

d’optimiser le contraste et la luminosité de la photographie, surtout s’il s’agit d’une image scannée

(sous Fireworks, sélectionner l’image, cliquez sur "Filtre", puis "Régler la couleur",puis "Niveaux

automatiques". Si cela n’est pas suffisant ou ne s’avère pas concluant, jouez avec les paramètres

"Luminosité/Contraste" du menu "Régler la couleur").

- 7 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

Exemple de traitement d’une photographie scannée de grande dimension pour l’adapter au Web

Travailler avec un logiciel de traitement d’images

La plupart des logiciels de traitement d’image sont trés gourmands en mémoire et ressource de

calcul : les images créers et manipulées peuvent rapidement devenir trés encombrantes. Pour

vous donner un ordre d’idée, une image au format A4 pour une impression de qualité pèsera

entre 30 et 60 Mo, et pourra nécessiter jusqu’à 5 fois cette place en mémoire vive. Pour le Web,

nous ne travaillerons généralement qu’avec des images de formats restreints; ce qui ne nécessite

donc pas forcément de disposer d’un PC avec beaucoup de mémoire vive.

Les logiciels tels que Photoshop, GIMP ou Fireworks affichent la quasi totalité des outils et

palettes au premier lancement. Il est préférable de réorganiser son espace de travail et d’avoir

sous la main les éléments que vous utiliserez le plus souvent. Il vous suffit pour cela de déplacer

les palettes à l’aide de la souris et de les positionner où bon vous semble. Pour l’infographie, un

écran de 17" ou plus est souhaitable afin de disposer de suffisament d’espace de travail pour

afficher à la fois votre espace de travail et les outils et palettes courantes.

Première composition graphique sous Fireworks :

- 8 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

Lancez Fireworks, puis dans le menu fichier, cliquez sur "Nouveau". Spécifiez alors la largeur et

hauteur de votre feuille de travail ainsi que la couleur du fond. Si vous ne savez pas à l’avance le

format d’image (ce qui est probable); créez une image de par exemple 500 par 500 pixels : la taille

de votre document pouvant être ajusté à tout moment. Chaque icône de la palette d’outils

représente un outil spécifique. Lorsque qu’une flèche vers le bas est affiché dans la partie

inférieure d’un icône, cela signifie qu’en cliquant dessus et en maintenant le bouton de la souris

enfoncé, on accède à différentes options : ainsi en cliquant sur l’icône rectangle, un menu

contextuel s’afficher et permet de sélectionner d’autres formes de base telles que cercle,

polygone, rectangle à bord arrondi.

Sélectionnez l’outil rectangle à bord arrondi et dessinez dans votre document de travail un

rectangle quelconque. Pour modifier la couleur de bordure et de fond de votre rectangle, cliquez

sur les icônes de la partie couleur de votre palette d’outil (le rectangle doit être sélectionné).

Toute une série de palettes différentes est accessible à partir du menu "Fenêtres" de Fireworks.

En sélectionnant la fenêtre "Informations", vous visualisez la largeur, la hauteur, la position

- 9 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

horizontale et la position verticale de votre objet. Vous pouvez modifier les proportions et/ou la

position de votre objet directement à partir de cette fenêtre en modifiant les informations

numériques. En sélectionnant la fenêtre "Objet", vous avez accès aux propriétés de l’objet courant

(c’est à dire l’objet sélectionné). Ainsi la fenêtre des propriétés associées à votre rectangle à

bords arrondis permet de modifier le niveau d’arrondis.

Créez ensuite une nouvelle forme : par exemple un cercle. Choisissez une couleur différente de

l’objet précédent. Utilisez ensuite la flèche blanche de la palette d’outil pour sélectionner tantôt le

rectangle, tantôt le cercle : un simple clic sur un objet suffit à le sélectionner. Si vous souhaitez

sélectionner plusieurs objets, dessiner avec l’outil de sélection (icône flèche blanche) un rectangle

qui recouvre les différents objets : tous les objets englobés dans la sélection sont alors

sélectionnés et vous pouvez par exemple les déplacer simultanément.

Cliquez sur "Fichier" puis "Ouvrir" et ouvrez l’image de la guèpe que vous avez enregistré

précédemment sur votre disque dur. Un nouveau document s’affiche : sélectionnez l’image bitamp

en cliquant dessus avec l’outil de sélectionner puis faites un copier-coller (à partir du menu

édition) dans votre document comportant le rectangle et le cercle : vous disposez maintenant

d’une image comportant à la fois des éléments vectoriels (le cercle et le rectangle) et une image

bitmap (la guèpe). Sélectionner l’image bitmap, puis à partir du menu "Modification" puis

"Disposez" et "Arrière plan", vous placez l’image de la guèpe en arrière plan et vous êtes alors en

mesure de déplacer le cercle ou le rond devant la guèpe.

Attention, une fois que vous aurez exporter au format GIF ou JPEG votre création, il ne vous sera

plus possible d’intervenir dessus : en effet, l’image sera alors entièrement sauvegardé sous forme

de pixels, et il n’y aura plus de différenciation entre les différents éléments de votre composition

(le cercle, l’image de la guèpe et le rectangle ne ferront plus qu’un).

Par conséquent, lors de

toute création graphique, vous devez sauvegarder vos compositions au format de votre

logiciel de traitement d’images dans un répertoire spécifique qui servira à stocker vos

sources et vous permettra donc de modifier par la suite vos créations sans avoir tout à

refaire !

Maintenant que nous avons vu les concepts fondamentaux de la manipulation graphique, nous

allons passer à la création de pages Web avec un éditeur html Wysiwyg avant de passer à la

suite.

Support de cours distribué sous license GNU FDL

- 10 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie

Dernière mise à jour : 2004-06-01 13:42:01

Copyright (c) AUF 2004

Agence universitaire de la Francophonie, programme TIC et appropriation des savoirs

Formations de Formateurs aux Technologies de l’Information TRANSFER -

http://www.transfer-tic.org

- 11 -

Support de cours FFTI Transfer - Agence universitaire de la Francophonie