à continuer

voir http://www.webstyleguide.com/graphics/index.html

===== La palette de couleurs générique =====

Le nombre des couleurs réelles est infini, ce qui n'est gérable par aucune machine ; on travaille donc avec des palettes de couleurs qui sont des ensembles finis de couleurs discrètes que les machines peuvent manipuler.

• Les systèmes de palettes de couleurs diffèrent d'une machine cliente à l'autre ; par exemple entre un Macintosh et un PC, seulement 216 couleurs sont communes aux deux plateformes.
• Un autre élément doit vous inciter à limiter le nombre de couleur (ou le nombre d'images). Si le système ne peut afficher que 256 couleurs et que plusieurs images exigent des couleurs differentes (leur palettes de couleurs sont differentes), un compromis s'opérera et entrainera des distorsions incontrôlables.
• Dans le cas d'un écran de profondeur couleur de 8 bits et non de 24 bits, la même image ne sera pas aussi bonne étant donné la juxtaposition. On appelle juxtaposition le procédé de simulation des couleurs non offertes par un écran d'ordinateur. Des canevas sont créés afin de simuler les couleurs manquantes, par mélange de valeurs de pixels sur l'échelle de gris avec des pixels couleurs. Une image aura la même apparence sur un écran 8 bits ou 24 bits, pourvu qu'elle ait été créée à l'aide des couleurs comprises dans la palette de 216 couleurs offertes par les navigateurs.

==== Conclusion partielle ====

Compte tenu de ces informations, il n'est pas vraiment nécessaire que l'image à télécharger ait une profondeur et une taille importante.

===== Format de fichiers graphiques =====

Il s'agit de choisir le meilleur format pour les images.

On distingue généralement deux types de formats graphiques. Les images vectorielles et les images bitmap ou matricielles. Les images vectorielles composent l'image en vecteurs qui sont des commandes qui permettent de dessiner des formes particulières. Le codage d'une ligne contient par exemple le point de départ, le point d'arrivée, l'épaisseur, le motif, la couleur de la ligne. L'intéret d'un tel format est qu'il permet un redimensionnement de l'image sans des effets indésirables tels que l'apparition de crénelage.

– continuer la réorganisation Jusqu'à présent, les pages web sont exclusivement composées d'images matricielles. Aussi faudra-t-il convertir une image vectorielle en image bitmap. Celles-ci sont composées de pixels (1 pixel = unité graphique atomique) qui sont arrangées selon une grille.

Lors d'un agrandissement de l'image ou lorsqu'elle est affichée sur un écran en basse résolution, les pixels apparaissent comme de petites aires carrées de couleur (crénelage).

Chaque pixel a une profondeur (bit depth) qui représente le nombre de couleurs différentes qu'il peut avoir. Tous les navigateurs Web actuels assurent le soutien des deux principaux formats de fichiers graphiques BITMAP suivants : GIF (Graphics Interchange Format) et JPEG (Joint Photographic Experts Group).

Ces deux formats de fichiers graphiques peuvent stocker des images en mode point (images matricielles) aux fins de transfert et d'affichage sur le Web. haut de la page Le format GIF

Le format GIF est capable de stocker de multiples images dans le même fichier, ce qui permet la création de fichiers GIF animés. Aussi, ces fichiers peuvent stocker des données sous forme GIF entrelacé.

Dans le cas des fichiers GIF classiques (non entrelacés), les images sont téléchargées une rangée de pixels à la fois, en commençant par le début de l'image jusqu'au bas de celle-ci. Après téléchargement de 50 % de l'image, l'on ne peut voir que la moitié de celle-ci.

Quand le fichier est stocké comme image entrelacée, toute l'image semble se télécharger d'un seul coup, ce qui crée un rendu flou qui devient net par la suite ou encore donne l'impression d'animation. Toutefois, malgré les apparences, les fichiers GIF entrelacés ne se téléchargent pas plus rapidement que les fichiers GIF classiques.

Une version plus récente de ce format, soit GIF89a, permet au concepteur de sélectionner une couleur dans la palette adaptative et de la rendre transparente ou invisible. Habituellement, la couleur ainsi rendue transparente constitue le fond de l'image.

Le format de fichier graphique GIF est toujours comprimé à l'aide de l'algorithme LZW (Lempel-Ziv-Welch) qui n'est pas gratuit. En effet, des droits de licence sont exigés pour chaque progiciel assurant l'implémentation de l'algorithme LZW. Cet algorithme est une méthode de compression sans perte qui retire les données inefficaces, sans entraîner par ailleurs une perte de données. Cette méthode de compression s'avère le plus efficace dans le cas de la compression d?images graphiques présentant de grandes zones de couleurs homogènes. Elle ne prête pas tellement bien à la compression d'images complexes s'apparentant à des photographies. haut de la page Le format PNG

Un nouveau format se diffuse sur l'internet : c'est le PNG (Portable Network Graphics) qui est maintenant supporté par plusieurs navigateurs. Il tendra à remplacer le format GIF. Il a été conçu pour le WWW et il est gratuit. haut de la page Le format JPEG

Le format de fichiers graphiques JPEG est utilisé pour stocker des images renfermant 24 bits de données (2^24), pour un total de 16 millions de couleurs possibles. À l'instar du format GIF, le format JPEG peut stocker des données dans un ordre entrelacé, ce que l'on appelle le format JPEG progressif. Le format JPEG utilise une technique mathématique évoluée de compression graphique. Le concepteur peut choisir le niveau de compression appliqué à un graphique. D'importants rapports de compression sont possibles. Toutefois, plus la compression JPEG est élevée, plus la qualité de l'image se détériore. Il importe de toujours stocker une image originale non comprimée quand on utilise la compression JPEG, car des données se perdent.

Ce procédé est qualifié de compression avec perte. En présence d'une compression trop grande, des points ou des taches étranges qui n'étaient pas visibles sur l'original, commencent à apparaître, ce que l'on nomme des artefacts. La compression JPEG ne fonctionne pas bien dans le cas de graphiques à contour net ou de couleurs claires (phénomène rare en photographie). Des canevas de bruit se développent autour des bords des objets et des zones de transition entre les couleurs prononcées. En comparaison du format GIF, le format JPEG permet de créer des fichiers plus petits à téléchargement plus rapide, pourvu que l'on consente à une baisse au plan de la qualité de l'image. haut de la page La règle de décision

En général, le format de fichier GIF (ou PNG) devrait être utilisé dans le cas d'images graphiques comme des cartes, des icônes, des logos, etc. ou toute image qui présente de longues bandes horizontales de la même couleur.

Le format JPEG ne doit servir que dans le cas d'images de qualité photographique (tons continus), où presque chaque pixel constitue une couleur différente.

haut de la page Quelques outils graphiques libres(GPL) ou shareware et disponibles sous linux:

Une classification peut être proposée : haut de la page La manipulation d'images

avec GIMP: GPL (gimp)

avec XV: shareware (xv)

avec XPaint: GPL (xpaint)

avec ImageMagick (display ou convert)

avec ghostview (gv)

D'autres logiciels dont l'utilisation sort du cadre du projet d'expression web : haut de la page Le dessin vectoriel

avec QCad

avec Sketch

avec XFig: GPL (xfig)

haut de la page La modélisation 3D

avec Blender

avec xfPovRay

avec Giram

haut de la page Lien de référence

===== Quelques règles générales =====

• Pas trop d'images dans la page d'acceuil car cette dernière sera longue à charger alors que l'internaute n'aura pas encore eu la possiblité de prendre connaissance de l'intérêt de votre site.
• Si plusieurs images sont nécessaires pour la compréhension des idées défendues dans une page et que cela implique un temps de chargement susceptible d'être jugé important , il vaut mieux le signaler dans la tête du document puisque le navigateur affiche les textes avant les images.
• Il est aussi possible d'afficher une version réduite i.e. un fichier de taille vraiment plus petite à l'écran qui fera un lien vers la véritable image. L'internaute motivé pourra alors la charger de manière volontaire.
• Le navigateur qui connait les dimensions (''<img src=“xxx.xxx” height=“yy” width=“zz”>) d'une image à télécharger, la représente par un cadre et affiche le texte qui la suit. Ceci permet à l'internaute de se faire une idée du contenu de la page. Ainsi, selon son intérêt, il pourra attendre le chargement complet de l'image ou au contraire passer à un autre site/page.
• A noter que le compromis se fait moins entre temps de chargement et qualité de l'image, car l'image affichée est un état stable, tandis que l'image en train d'être téléchargée est un état transitoire. Il doit se faire plutôt entre le temps de chargement et le nombre d'images de la page.
• Il faut noter que la qualité visible par l'internaute de l'image dépend du format de cette image. Un choix entre les differents formats doit s'opérer.

Yale University Manual “Web Style Guide” - Une présentation très pédagogique avec de nombreux liens utiles (le livre est disponible en librairie).