Support de cours au format PDF

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