|
 
a
création d'un site web implique de nombreuses étapes, dont une essentielle,
sinon fondamentale, son design.
" SAM Le Graphiste " n'a pas la prétention de vous apprendre
ce que peut être un " beau site " (tous les goûts sont dans
la nature, les mauvais aussi) mais il contribuera (du moinsje l'espère)
à vous aider à le réaliser le plus efficacement possible.
On
ne peut, maintenant, concevoir de site web sans images ne serait-ce qu'afficher
un logo ou créer une barre de navigation, ou bien encore appuyer une démonstration
(une belle image vaut mieux qu'un grand discours).
Ainsi, pour ce premier numéro nous allons découvrir (pour certains
se sera une révision), la composition d'une image numérique. Par
la suite nous verrons comment ces images seront perçues par " le client
", (en fonction de la résolution de son écran, du navigateur
utilisé) également comment les compresser, suivant le type de format
utilisé et puis, comment les manipuler.
Bien connaître tous ces éléments vous permettra de réaliser
des images légères, donc faciles à charger, à rendre
votre site plus attrayant et bien plus encore.
Les images et
le pixel
Bitmap
et vectoriel
- Les images
vectorielles sont des descriptions d'images mathématiques. (un cercle,
un carré, une courbe, etc…)
Celles-ci ne sont pas utilisées dans des pages HTML. ( A moins d'applications
particulières, comme " Flash ")
Dans ce cas le fichier sera, en général, moins volumineux qu'un
fichier d'une image bitmap.
- Les images
" bitmap " sont des images constituées d'une infinité
de points : les pixels.
Ceux-ci sont organisés en grille de :
x
pixels en largeur
y
pixels en hauteur
z
pixels en profondeur
Les deux premières valeurs déterminent la résolution image
La troisième (z) détermine la résolution écran.
C'est cette dernière qui nous intéresse puisque nos images seront
affichées sur l'écran du client.
La différence entre bimap et vectoriel peut se comparer pour la première
à une photo, la seconde à un dessin industriel.
Profondeur
de couleur
- Nombre
de bits par pixel
Ce nombre va caractériser l'affichage des couleurs à l'écran
et donc sa précision. Plus ce nombre sera important plus le nombre de couleurs
sera important.
Le minimum d'affichage sera 1bit, soit un pixel allumé (blanc) soit éteint
(noir) = 2 puissance1
Le maximum sera de 32 bit, soit 2 puissance 32 (dont 8bits pour la couche alpha)
| Profondeur |
Exposant |
Nombre de couleurs |
|
1
|
2
puissance 1 |
2 |
| 2 |
2
puissance 2 |
4 |
| 3 |
2
puissance 3 |
8 |
| 4 |
2
puissance 4 |
16 |
| 5 |
2
puissance 5 |
32 |
| 6 |
2
puissance 6 |
64 |
| 7 |
2
puissance 7 |
128 |
| 8 |
2
puissance 8 |
256 |
| 16 |
2
puissance 16 |
16 bits RVB |
| 24 |
2
puissance 24 |
24 bits RVB |
| 32 |
2
puissance 32 |
24 bits RVB
+ 8 bit couche Alpha |
Les
différents types d'images.
2 types principalement utilisés pour l'Internet.
- Les
images GIF
qui sont des images indexées.
Elles font référence à une palette de 256 couleurs (le cube
des couleurs). Chaque image GIF a une palette de couleur spécifique et
à chacune de ces couleurs est associé un nombre.
Exemple pour les couleurs principales:
|
HEXADECIMAL
|
|
RVB
|
| FF FF FF |
.... |
255 255 255 |
| FF FF 00 |
.... |
255 255 0 |
| 00 FF FF |
.... |
0 255 255 |
| 00 FF 00 |
.... |
0 255 0 |
| FF 00 00 |
.... |
255 0 0 |
| FF 00 FF |
.... |
255 0 255 |
| 00 00 FF |
.... |
0 0 255 |
| 00 00 00 |
.... |
0 0 0 |
Dans une
page HTML se sont les nombres Hexadécimaux qui seront utilisés pour
décrire la couleur de votre police ou bien celle du background d'un tableau
ou du <body>, etc…
Seuls les navigateurs utilisent ce cube de 256 couleurs ; il est donc indispensable
de visualiser vos images dans ceux -ci.
Nous verront par la suite l'utilité de ce cube de 256 couleurs.
- Les images
JPG qui sont des images RVB.
Ces images quant à elles utililisent les 8 bits de chaque couleur, 8 pour
le rouge, 8 pour le vert, 8 pour le bleu (soit 24 bits).
Jean-Jacques
Andreau
Graphiste indépendant,
http://andreau.jeanjacques.free.fr
Tél. : 05 56 05 34 37
Tous
droits réservés - Reproduction même partielle interdite sans
autorisation préalable
|
