Trucsweb.com

Trucsweb.com

Infographie

Indexation des images

RDFFav

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 indexation indexed photoshop graphique graphic corel gif jpeg jpg png save as copy convert mode rgb export paletted gif89a file bitmap fhichier photos smoothing dither diffusion interlace compuserveIndexation des images - avec Adobe Photoshop 4.0 et Corel Photo-Paint 8

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

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


sp
 A U T R E S   D O C U M E N T S

spInternational Color Consortium (ICC)
spThe Browser Safe Palette (BSP)
spThrough the 6x6x6 Color Cube - An Interactive Voyage
spCharles Poynton - Color technology
spConvertie une couleur en HEX - Lonster"s RGB to HEX translator
spConversion RGB/HEX - The Joy of Hex
spThe Browser-Safe Color Palette
 
sp
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 6618 - Pages vues : 19863
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@