De la compatibilité d'un site
Compatibilité des graphiques
HomeUp

Compatibilité des graphiques
 
Conseils usuels
  • Utilisez l'attribut "alt" de la balise image pour les browsers dont l'option graphique n'est pas activée
  • Préférez toujours le codage hexadécimal des couleurs plutôt que le nom de couleurs.
  • Prenez la main sur l'arrière-plan par défaut du browser de votre visiteur par l'attribut "bgcolor" de la balise <BODY>.
  • Utilisez le plus possible des images en 16 couleurs. Cela diminue le temps de chargement et le risque de problèmes d'affichage.
  • Testez votre site sous diverses résolutions d'écran 640x480, 800x600 et 1024x768 [pour rappel, sous Windows Panneau de configuration/Affichage/ Configuration/Espace du bureau].Certains prétendent que la résolution 1024x768 est la plus commune sur le Web mais d'après d'autres sources, c'est la résolution 800x600 qui l'emporte encore. Alors ?...
Pour les spécialistes

Vous avez peut-être remarqué que vos superbes images, visionnées en interne sur votre ordinateur, deviennent ternes voire banales, une fois que vous visitez votre site à partir du Net.

Plusieurs éléments peuvent intervenir :

  • Le nombre de couleurs traitées sur votre machine n'est pas forcément identique à celui de l'ordinateur de votre lecteur. Les couleurs ont un format de 8,16 ou 24 bits, ce qui correspond à une palette de 256, 65.536 et 16.777.216 couleurs
    [pour rappel sous Windows, Panneau de configuration/Affichage/Configuration/ Palette de couleurs].

    Votre superbe image jpeg chouchoutée sur votre ordinateur en 16 millions de couleurs sera peut-être vue sur un ordinateur avec un affichage de 256 couleurs. Le système adapte alors les couleurs de votre image selon les couleurs les plus proches de sa palette. Ce qui va entraîner une perte inévitable et incontrôlée de qualité.
  • Du temps où les systèmes Windows et Macintoch étaient en réelle concurrence, ils ont retenu chacun leur propre palette de 256 couleurs.

    Et hélas (trois fois), il n'y a que 216 couleurs communes à ces deux palettes.
    A l'époque, Netscape a, assez logiquement, adopté pour son Navigator, une palette avec ces 215 couleurs dites "sûres" [Net safe colors]. Les autres couleurs sont obtenues par un effet de "tramage" qui peut à son tour modifier la qualité de votre image.

    Qu'est -e que ce tramage [dither, dithering] ? Prenons la couleur orange. Mais vous n'avez à votre disposition que des stylos de couleur rouge et jaune. Pour illustrer la couleur orange, la seule solution est de remplir la surface à colorier avec des petits points jaunes et rouges. C'est ce que fait le système lorsqu'il doit afficher une couleur qui n'est pas dans sa palette.

    Il est important de noter que cet effet de "tramage" ne se produit pas si votre image est vue avec une palette supérieure en nombre de couleurs. Pour exemple, une image en 256 couleurs sur un système en 65.536 ou en 16 millions de couleurs.

    Voici la palette des 215 couleurs "sûres" [Net safe colors] pour les images du Web.

    Vous pouvez télécharger ici la palette netscape.pal (1K) ou la palette explorer.pal (1K) [miracle... pour une fois, c'est la même]. Palette que vous pouvez utiliser pour vos images Web, par exemple dans Paint Shop Pro avec le menu Couleurs/ Charger une palette. En outre, évitez toujours d'utiliser l'option de tramage lorsque vous diminuez le nombre de couleurs d'une image.

  • Et pour vous assommer tout à fait, si dans un affichage en 256 couleurs, vous utilisez 2 images. La première image ayant une première palette de 256 couleurs et la seconde image une autre palette de 256 couleurs différentes de celles de la première, le système ne pourra utiliser, pour la seconde image, que les couleurs de la deuxième images qui sont communes à la première palette. Les autres couleurs seront converties selon les couleurs les plus proches de la première palette... Méfiez-vous donc aussi de l'option "couleurs optimisée" car elle crée une palette différente pour chaque image.


 

Moralité

N'oubliez pas qu'en Html, vous n'avez jamais le contrôle absolu de votre document (comme avec votre traitement de texte par exemple).

Home