Zone <infographie>
       

 Zone <infographie> est un site de références sur l'infographie et la création de sites web.

 Références sur l'infographie et la création de sites web

  Formats de fichiers
  Transparence
  Résolution
  Tonalité et palettes
  Couleurs, motifs
  Images cliquables
  GIFs animés
  HTML
  rgb-hexadécimal
 

  Techniques sur l'infographie et la création de sites web

  Création de motifs
 

 Liste de liens sur l'infographie et la création de sites web

  L'infographie et le web

 


  Tonalité et palettes

Modifié le 22.06.2006

Système de couleurs indexées, tonalité et palettes.

Choix d'un système de couleurs indexées et exemples

Plusieurs variables entrent en ligne de compte lors du choix d'un système de couleurs indexées pour une image:
Le type d'image (photographique ou graphique)
La carte vidéo du système hôte (8, 16 ou 24 bits)
Le système d'opération utilisé sur la plate-forme hôte (Windows, Mac OS, autre...)
L'interprétation de l'image indexée par le logiciel fureteur (Netscape ou autre).

Il n'y a pas de problème d'affichage des images avec les sytèmes qui utilisent une carte vidéo 16 ou 24 bit, ce qui est le cas de la majorité des ordinateurs d'aujourd'hui, par contre certains problèmes peuvent survenir sur les systèmes qui utilisent une carte 8 bit.

Ces systèmes utilisent une table de couleurs indéxées qui peut contenir un maximum de 256 couleurs. Lors de l'affichage d'une page WEB sur de tels systèmes, les couleurs sont allouées suivant le principe du "premier arrivé, premier servi", pour chaque image, jusqu'à ce que la limite de 256 couleurs soit atteinte. Par exemple si une page affiche une image qui contient 206 couleurs, il ne reste que 50 couleurs disponibles pour les images suivantes. Si l'on affiche ensuite une image qui contient 60 couleurs, il nous manquera 10 couleurs. Les couleurs les plus proches parmi les couleurs déjà utilisées seront alors utilisées. On peut se servir de Photoshop pour minimiser ces problèmes d'affichage:

  • Combiner toutes les images devant apparaître dans une page en une seule grande image. Utiliser cette image pour générer une palette.
  • Convertir cette image en couleur indéxée, et utiliser la palette adaptive. Photoshop garde alors cette palette en mémoire pour un usage ultérieur.
  • Réouvrir les images individuelles pour cette page.
  • Convertir ces images en couleur indéxée et utiliser l'option Previous,de cette façon toutes les images possèdent la même palette adaptive (de la grande image combinée).
  • Sauvegarder les images au format GIF.

Attention
Avec une carte vidéo de 8 bit, le navigateur Netscape affiche toutes les images avec une palette de 216 couleurs (Web Safe Colors).

  1. En règle générale (pour les images photographiques ou possédant beaucoup de couleurs) on obtiendra les meilleurs résultats en utilisant une palette ADAPTIVE et DIFFUSION dither à 8 bits. (La plupart des images photographiques supportent très bien une réduction de la palette jusqu'à 7 bits, on peut même descendre jusqu'à 6, 5 ou 4 bits).On obtient la meilleure réduction tonale possible pour notre image à partir de Photoshop. L'avantage de ce système est aussi le suivant:
    Bien que l'image apparaisse avec du grain (dither) sur les systèqui affichent en 256 couleurs, l'image est automatiquement optimisée pour les systè utilisants une carte d'affichage vidéo 16 ou 24 bits, c'est-à-dire que tout effet de grain disparait alors de l'image.Voici un exemple d'image utilisant une palette adaptive et l'option diffusion dither.
  2. Pour les fichiers graphiques (cartes, logos, ou images possédant peu de couleurs) on obtiendra les meilleurs résultats en utilisant la palette ADAPTIVE et DIFFUSION=NONE. (Pour certaines images, en particulier celles qui comportent des dégradés de couleurs, il serait préférable d'utiliser l'option DIFFUSION=DITHER). On peut aussi diminuer la résolution tonale à 7, 6, 5, 4, 3, 2, ou 1, bits par pixels, dépendant du type d'image.
  3. Attention
    Pour éviter un effet de dithering dans les plages de couleurs unies, on devrait idéalement choisir de créer l'image à partir des 216 couleurs de Netscape ou "Web Safe Colors". Toutefois, l'on peut considérer aujourd'hui que comme la majorité des systèmes utilisent une carte vidéo 24bits, l'utilisation des "web safe colors" n'est plus nécessaire.
    Haut

Tonalité

Les images GIF qui sont affichées par les logiciels de navigations possèdent une résolution tonale maximum de 8 bits par pixels soit un maximum de 256 couleurs. On peut aussi choisir de préparer et de faire afficher des fichiers GIF de résolution tonale moindre.Les images de format JPEG par contre peuvent afficher une résolution tonale de 24 bits par pixels, soit 16,7 millions de couleurs.

bits par pixels 1 2 3 4 5 6 7 8 24
nombre de couleurs 2 4 8 16 32 64 128 256 16,7 millions


Haut
Couleurs indexées et palettes

Lors de la préparation d'un fichier GIF dans un logiciel comme Photoshop on doit convertir l'image en mode Indexed Color, pour pouvoir ensuite effectuer la sauvegarde.Le mode de couleur indexée permet de remplacer la palette 24 bits d'une image par une palette de 256 couleurs ou moins.Dans ce procédé d'indexation on utilise les 256 couleurs (ou moins) que l'on retrouve le plus souvent dans l'image, pour fabriquer une version 8 bits de celle-ci. L'image indexée peut sembler très proche de l'original, la plupart des images couleurs ne comportant en fait qu'une partie de la palette de 24 bits.Le logiciel Photoshop offre plusieurs options de sauvegardes au format Indexed Color:

Résolution

L'option résolution permet de diminuer la tonalité de l'image en la restreignant à un système inférieur à huit bits par pixel. La plupart des images photographiques peuvent supporter sans trop souffrir un système à 7 bits par pixels, on peut descendre encore en dessous pour les graphiques et illustrations en applat.

Palette

System
La palette système force l'utilisation de la palette de couleurs par défaut du système hôte (par exemple: la palette standard du système Apple ou Windows). Indiquée pour cartes, graphiques, etc.

Exact
La palette exacte apparait uniquement si le nombre des couleurs dans l'image est inférieur ou égal au nombre de couleurs dans l'image indexée finale.
Ex.: Une image qui comprendrait uniquement 124 couleurs.

Adaptive
L'option adaptive va permettre à l'ordinateur qui reçoit l'image de varier sa palette de couleurs en fonction de celle de l'image affichée. Indiquée pour les systèqui ne peuvent pas afficher en plus de 256 couleurs.

Custom
L'option custom va permettre de choisir une palette précise lors de la création des fichiers GIF. On peut s'en servir pour donner une unité tonale à l'ensemble des images utilisées sur un site. On peut ensuite sauvegarder cette palette custom, et plusieurs autres différentes, dans le menu MODE > COLOR TABLE.

Previous
Cette option permet de baser la palette de couleur d'une image sur la palette de l'image précédente. Utile pour uniformiser la palette d'une série d'images.
Haut

Dither

None
La palette indexée peut utiliser un système de dithering pour l'affichage des images. Dans ce syst&egraveme, des pixels de deux couleurs différentes sont juxtaposés pour créer l'impression de la présence d'une troisième couleur. Le résultat final donne une image qui semble avoir un grain élevé. L'option None n'utilise pas de méthode de dithering.

Diffusion
Avec cette option un système de dithering est effectivement utilisé lors de la création du fichier en couleurs indexées. Cette option donne les meilleurs résultats, mais son défaut est le poids relativement plus élevé du fichier, compte tenu du nombre plus élevé de couleurs dans celui-ci.
Haut

Différences entre l'affichage sur Windows et Macintosh

Pour éviter de mauvaises surprises il faudrait idéalement pouvoir vérifier ses pages WEB à la fois sur plateformes Macintosh et Windows.La palette système utilisée par Windows étant beaucoup plus foncée que celle du Macintosh.Il est possible pour les graphistes travaillant sur Macintosh (la plupart) de corriger leurs images en prévision de leur affichage sur des systèWindows (la majorité des usagers).

Il faut utiliser la boîte de dialogue Color Balance du menu IMAGE > ADJUST. Augmenter le niveau des couleurs d'environ plus 50. Il peut être nécessaire d'aller jusqu'à plus 100, dépendant du type d'image.

Haut

 

 

Publicité:

Résolution

Une image numérique est constituée de pixels. La résolution définit le nombre de pixels par unité de longueur. La résolution s'exprime en dpi (dot per inch) ou ppp (point/pixel par pouce).

Les appareils photo numériques proposent des résolutions en millions de pixels. Dans la pratique, une image dont la résolution est de 2 millions de pixels, est composée d'une trame de 1600 x 1200 pixels.

Quelle résolution adopter ?
Il faut choisir la résolution en fonction du résultat visé.

Impression papier : si l'impression sur papier est l'objectif visé, adopter une résolution de 300 dpi ou ppp pour une qualité optimale. Une résolution inférieure à 150 dpi est insuffisante.
Visualisation sur écran : dans ce cas une résolution de 72 dpi ou ppp est suffisante.

 


 
 

Zone <infographie>, une présentation d'Création de sites web au Québec, une compagnie du Québec qui offre des services en création de sites web.

Si vous avez des questions sur le contenu du site où si vous avez des besoins en infographie, création de sites web, ou référérencement de sites web, contactez le site Internet d'Orénoque interactif, ou écrivez-vous: Questions sur l'infographie et la création de sites web.


PARTENAIRES:
Top-Ten Guides: More Than Just Gift Ideas - Les Guides Top-Ten: plus que des idées de cadeaux