Infographie

Indexation des images

Indexation des images - avec Adobe Photoshop 4.0 et Corel Photo-Paint 8

Avant d’entreprendre la réalisation du site il faut comprendre qu’est-ce que l’indexation et pourquoi indexer les images. L’image est, avec le vidéo et le son, ce qu’il y a de plus lourd en informatique. Il n’est pas rare de rencontrer des images qui pèsent plus de 100M alors qu’un site tient souvent sur 2M et qu’il est conseillé d’avoir des pages n’excédant pas 30k. Ces images sont pour la plupart en millier de couleurs ou même, pour les utilisateurs du Macintosh, en million de couleurs. Indexer revient à reproduire ces images en 256 couleurs, ce qui les rend beaucoup plus légères. Vous pouvez bien sûr utilisé tout simplement la fonction indexed color de Photoshop et convert to => paletted (8bit) de Corel, mais il faut savoir que les logiciels ce contente de les indexer en 256 couleurs. 256 couleurs c’est bien mais il n’y a que 216 couleurs de compatible entre les Mac et les PC, et qu’il est possible de rendre les images en beaucoup moins de couleurs. J’arrive très souvent à indexer mes images en 32 couleurs, 16 couleurs voir 8 couleurs (4-bit), quand aux icônes, 8 ou 3 couleurs suffisent amplement.

Cette page vous montre les 216 couleurs : http://ziff.shore.net/~courses/thom/bgcolors.htm

Le format des images indexés est le GIF ou le GIF89a. C’est le format qui selon moi donne les meilleurs résultats. Vous pouvez aussi vous renseigner sur le Format PNG, plusieurs logiciel existe pour convertir vos images avec ce format libre. Un autre format largement utilisé sur le Web est le JPG ou JPEG. Au lieu d’indexer les images, le JPG compresse les donnés selon plusieurs qualités, faible, moyenne bonne et excellante ou selon une échelle de 1% à 100%. J’utilise le JPG pour des images avec beaucoup de dégradés ou pour des photographies ou des image vraiment très grande. Le format EPS/PSD de Photoshop ou plusieurs autres peuvent avec un module externe être utilisés mais avec les restrictions qu’implique les Plug-in...

Note le tutoriel à été fait pour Corel 7 et Photoshop 3 ou 4.0. La version 5.5 de Photoshop est sensiblement la même à ce niveau
.
Convertir vos images en "JPG".

PHOTOSHOP
1- Menu FILE
2- Choix SAVE A COPY
3- Sélectionnez le format JPEG (*.JPG,*.JPE)
4- Ajouter l’extension .jpg à votre fichier si il n’est pas ajouté‚ automatiquement
5- Bouton SAVE
6- Choisissez la qualité de compression.
7- Bouton OK

COREL
1- Menu FILE
2- Choix EXPORT
3- Sélectionnez le format JPEG Bitmaps (JPG)
4- Ajouter l’extension .jpg à votre fichier si il n’est pas ajouté automatiquement.
5- Bouton SAVE
6- Ajustez la qualité de compression. Avec Corel, la qualité est sélectionné avec un pourcentage mais à l’inverse de Photoshop. 100% est la compression maximal ou low/faible. Le smoothing ne change pas grand chose mais il peut être ajusté pour diminuer encore plus le poid de l’image. Optimize optimise la compression mais Progressive donne une meilleurs qualité d’image. Utilisez le format Standard, je ne sais pas à quel point le format Optimal est compatible.
7- Bouton OK.


-----------------------------------
Convertir vos images en "GIF".

Note le tutoriel à été fait pour Corel 7 et Photoshop 3 ou 4.0. La version 5.5 de Photoshop est sensiblement la même à ce niveau sauf qu’il existe un module pour convertir vos images pour le Web, je ne l’utilise pas car il n’est n’arrive pas à faire un indexation aussi forte que la façon manuelle.

PHOTOSHOP
1- Menu IMAGE => MODE => Indexed color.
2- Vous pouvez choisir la Palette Web mais je conseille d’utiliser Adaptative. L’option Dither est la méthode d’indexation des couleurs. (comment et quel couleur remplacer). Diffusion est plus ou moins meilleurs selon l’image. J’utilise pratiquement toujours "Diffusion" car les dégradés font de meilleurs résultats avec "Diffusion".
3- Bouton OK
2- Menu IMAGE => MODE => RGB color.
3- Répéter l’étape 1 et 2 en diminuant le nombre de couleurs. Je refais souvent l’étape 1 avec 256 couleurs puis 150 couleurs, 100, 75, 50 jusqu’à ce que mon image soit au minimum acceptable de couleurs. C’est à votre discrétion. Avec la version 5 et 5.5, il n’est plus n’écessaire de diminuer les couleurs par étape, vous pouvez utiliser un minimum de couleur en partant et voir le résultat en temps réel pour vérifier que l’image est encore belle.
4- Menu FILE => SAVE AS
5- Sélectionnez le format CompuServe GIF (*.GIF)
6- Ajouter l’extension .gif à votre fichier si il n’est pas ajouté automatiquement.
7- Bouton SAVE
8- L’option Interlaced permet à votre image d’être affiché en deux étape. Comme on voit sur le Web. L’image est tout d’abord flou puis elle devient clair. C’est l’Interlace, afficher une ligne sur deux pour accélérer sont affichage puis les autres lignes.

COREL
1- Menu IMAGE => CONVERT TO => Paletted (8-bit).
2- Je conseille d’utiliser à l’image de Photoshop la Palette Adaptative et de diminuer la quantité de couleur jusqu’au minimum de couleurs acceptable.
3- Bouton OK
4- Menu SAVE => SAVE AS
5- Sélectionnez le format CompuServe Bitmap (GIF)
6- Ajouter l’extension .gif à votre fichier si il n’est pas ajouté automatiquement.
7- Bouton SAVE
8- L’option Interlaced permet à votre image d’être affiché en deux étape. Comme on voit sur le Web. L’image est tout d’abord flou puis elle devient clair. C’est l’Interlace, afficher une ligne sur deux pour accélérer sont affichage puis les autres lignes.
9- L’option Transparency permet d’avoir une image avec des zone transparente. Je vais traiter ultérieurement de ce sujet.
10- Bouton OK.

Autres détails importants.

Si votre image est déjà en format GIF il n’est pas nécessaire de faire ces étapes. Vous pouvez directement la sauvegarder en format GIF à moins de vouloir l’optimiser encore plus. Même chose pour le format JPG.

----------------------------
Création d’images destinés au Web

Pour créer des images pour le Web il faut avant tout suivre quelques règles.

1- Faire attention aux dégradés ainsi qu’aux Lighting effects et Lens flare. Ils sont très dur à Indexer.

2- Sauvegardez vos image original en mode RGB pour vos Back-up.

3- Utilisez une palette de 256 couleurs dès le début. Je vous conseille, pour les utilisateurs de Photoshop, la Palette Satan qui contient les 216 couleurs compatible du Mac/PC.

Télécharger la palette satan (216 couleurs)
Pour PC : WEB216.ZIP
Pour Mac : 216clut.sit.hqx

A U T R E S   D O C U M E N T S International Color Consortium (ICC) The Browser Safe Palette (BSP) Through the 6x6x6 Color Cube - An Interactive Voyage Charles Poynton - Color technology Convertie une couleur en HEX - Lonster"s RGB to HEX translator Conversion RGB/HEX - The Joy of Hex The Browser-Safe Color Palette