Les images dans un site web

Les contraintes

imageDécrivons pour le comprendre, le processus de création et de diffusion des images sur le web.

Les images sont mises au point sur l’ordinateur du concepteur. Elles sont ensuite téléchargées avec les fichiers des pages HTML qui les utilisent sur le serveur qui va en assurer la diffusion. Aucune contrainte sérieuse à ce niveau.

Il va falloir ensuite acheminer les images, à chaque requête vers les internautes.

La requête parvient au serveur, elle est traitée, les fichiers nécessaires doivent être recherchés, lus et envoyés sur le réseau. Le navigateur de l’internaute doit interprété le fichier HTML reçu et afficher les images associées.

On peut identifier des problèmes liés au matériel et à l’infrastructure.

Le temps d’acheminement de la requête puis des fichiers renvoyés par le serveur dépend du modem utilisé, des équipements du fournisseur d’accès et surtout de l’état du réseau au moment de la connexion.

Est dans cette difficulté d’acheminer rapidement les données que réside le principal frein à la diffusion d’un contenu riche (vidéo, animations, images haute résolution, sons,). La situation est en train d’évoluer avec l’arrivée du haut débit (ADSL, câble, boucle radio,) mais les difficultés restent réelles et les disparités géographiques importantes.

La conclusion est claire, nous devons faire les pages les plus « légères » possible. On peut estimer quine taille moyenne de 40 ko est aujourd’hui raisonnable. Ce conseil doit être suivi en tenant compte du contexte. Attitude de l’internaute dépend de nombreux facteurs. Sans doute ne patientera-t-il pas longtemps si la page d’accueil d’un site inconnu ne s’affiche pas rapidement mais on peut penser qui sera plus patient en attendant l’affichage de la page d’accueil de TF1 ou de Canal Plus. En fait sa patience croit avec l’intérêt cil porte aux informations cil attend.

La restitution des images sur les écrans des internautes posent également problème. Elle dépend du calibrage des écrans, de la résolution de l’affichage, de la profondeur d’affichage (nombre de couleurs pouvant être affichées).

Les magmas sont également différents d’un « monde » à l’autre. Une image créée sur Mac paraîtra nettement plus sombre sous Windows* mais plus claire que sur une station de travail SI.

On peut également identifier des problèmes liés au logiciel.

Le navigateur doit être capable d’afficher le format cil reçoit. Sil n’en est pas capable, deux cas peuvent se présenter : soit il sera possible de charger un plut-in étendant les fonctions du navigateur, soit il faudra renoncer à vois les images.

Dans la pratique il faudra se contenter pour les images fixes des formats JPEG et GIF.

Les solutions

En ce qui concerne le temps de traitement par le serveur, il faut des machines suffisamment rapides et en nombre suffisant, c’est un critère de choix quand on doit choisir un hébergeur.

En ce qui concerne le temps de chargement, il faut réduire au maximum la taille des fichiers. On peut y parvenir de 3 manières différentes :

en compressant les données

en réduisant le nombre de couleurs

en faisant les deux à la fois.

Pour la fidélité de l’affichage, la seule solution est d’incorporer un profil ICI dans chaque fichier image. Cette solution n’est pas utilisée couramment aujourd’hui et il faudra sans doute plusieurs années pour quelle le soit.

Nous avons implicitement admis jusque maintenant que les images étaient traitées sur le mode bitmap. On peut aussi envisager un traitement vectoriel.

Le format PDF est une bonne solution déjà largement utilisée. Il est bien adapté à la diffusion de documents créés avec des logiciels de PAO (Express, Pacemaker, In Design). Il permet également de réaliser des documents facilement imprimables et des formulaires complexes.

Le PDF n’apporte néanmoins rien de nouveau à la diffusion des images proprement dit et il ne peut remplacer HTML. Notons également cil nécessite pour être lu, le logiciel gratuit Acrobat Leader et si l’on ne veut pas quitter le navigateur un plut-in adapté.

Il existe d’autre voies de recherche adaptées aux images animées, comme SVG et Flash.

Notons enfin que l’utilisation des feuilles de style en cascade pourrait limiter l’utilisation des images pour le titrage.

Nous décrirons maintenant les formats utilisés.

GIF

Est le GIF87A qui est apparu sur le réseau Compuserve. Nous utilisons actuellement le format GIF89A qui est une amélioration du précédent. Il utilise une compression LZW.

Ce format permet en particulier d’intégrer de la transparence et d’enregistrer plusieurs images dans le même fichier qui vont se succéder à l’écran, créant ce que l’on appelle une GIF animée.

Le format GIF ne permet l’enregistrement que de 256 couleurs choisies parmi les 16 millions qui peuvent exister dans limage d’origine. Les données en 256 couleurs sont ensuite compressées sans perte. Il est bien adapté aux logos, aux dessins, aux images de synthèse mais ne convient généralement pas aux photographies.

Avantages :

efficacité

universalité

entrelacement possible pour un affichage progressif.

possibilité d’animation.

Possibilité de transparence sur une couleur.

Inconvénients :

limitation à 256 couleurs.

algorithme de compression dépassé par les recherches actuelles (ondelettes, fractales)

méthode sous copyright.

JPEG (Joint Photographie Expert Croup)

Le JPEG repose sur une compression avec pertes en millions de couleurs. La différence entre limage décompressée et limage originale peut être imperceptible si l’on choisit un niveau de qualité convenable.

Il est mal adapté aux images en niveaux de gris ou à celles qui contiennent des à plats, il convient par contre très bien pour les photographies.

Avantages :

efficacité,

universalité,

pas de réduction du nombre de couleurs,

possibilité d’un parentérale de la compression,

possibilité d’un décodage progressif.

Inconvénients :

apparition de matrices 8 x 8 à fort taux de compression,

destruction importante de limage quand on adopte un taux de compression trop élevé.

PNG

Est un format qui répond aux besoins actuels en intégrant les résultats des recherches menées ces dernières années mais il est peu utilisé.

Avantages :

algorithme de compression plus performant que celui du format GIF,

possibilité de transparence variable (enregistrée sur une couche alpha),

utilisation dune palette 8 ou 24 bits.

affichage progressif possible,

inclusion possible de métadonnées : gamma, auteur, légende,

libre de tout brevet.

Inconvénients :

Pas de possibilité d’animation.,

non universel.

Nous avons réalisé une page présentant des exemples d’utilisation de ces 3 formats. (Attention page lourde !)

* Ancien système d’exploitation peu performant encore utilisé sur certaines machines.