tecfa
presentation people dispositif projects ressources




Intégrer les images dans ses pages WEB


Réalisé avec KompoZer (disponible sur Mac - PC et Linux)


Contenu

  1. Le problème
  2. Comment intégrer des images,
  3. Comment choisir les formats graphiques,
  4. Compresser avec ou sans pertes
  5. Comment optimiser une image pour le WEB
  6. Comment installer une image en fond de page ?
  7. Comment obtenir Kompozer ?

Figure 1 : L'illustration définit le style de la page,
c'est l'image de vous-même...

Le problème

Qualité

Pour qu'une image soit agréable à regarder, il faut souvent qu'elle s'affiche avec des couleurs très variées. 16 couleurs est un minimum très austère, 256 couleurs est un cas fréquent, mais la qualité photographique exige des milliers de couleurs. (Pour des raisons informatiques ce sera souvent 16 millions de couleurs)

Taille

Cependant plus une image exploite une palette de couleurs large, plus la taille du fichier est grande. En effet, pour chaque point de l'image (Pixel) on doit définir laquelle des nombreuses couleurs possibles est à afficher.
C'est dire que les images en millions de couleurs sont souvent de taille énorme. (plusieurs MégaBytes).

Or sur internet, vu la surcharge fréquente, les accès par modem, et par égard pour la patience des usagers, il faut limiter autant que possible la taille des fichiers composant une page. Les photos sont donc compressées.

On a donc un compromis à trouver entre qualité et taille.


Comment intégrer des images ?

Le plus simple est de copier l'image (depuis le scanner, l'application de dessin où elle a été crée, etc.) puis de la coller dans le dossier associé à la page HTML (souvent on crée un dossier images à l'emplacement du fichier HTML ; puis, dans KompoZer, cliquer sur l'icône Image image et indiquer le chemin pour accéder à cette image.

  propriété de l'image
Figure 2 : Le choix de l'image à intégrer dans la page

Transparence du fond et cadre.


Figure 3 : L'image avec fond transparent ou cadre :
soit l'image se marie à la page dans son ensemble, ou au contraire s'en isole.

Il est possible de régler la transparence du fond et le cadre à partir d'un logiciel de traitement d'image, par exemple Gimp (fonctionne sur les trois plate-formes PC - MAC et Linux). Il est disponibles sur les oridnateurs de la FAPSE.


Comment choisir les formats graphiques ?

On appelle format le type de structure du fichier. Sur internet, afin de limiter la taille on compresse les fichiers, il y en a essentiellement deux GIF et JPEG (pour le moment...) :

On préférera le format JPEG pour les photos, parce qu'il rend mieux les fines nuances de gris et de couleurs, et le GIF pour les images provenant de dessins, plus techniques etc. Dans le doute le GIF ira très bien.

 


Figure 4 : Images typiques à traiter en GIF (gauche) et JPEG (droite)


Compression : avec perte / sans perte

Voir aussi : l'optimisation des images pour le web.

Comment la compression est-elle possible ?

Il y a souvent dans les fichiers des informations répétitives : par exemple dans une image, il y a peut-être dans le ciel des rangées entières de pixels de la même couleur bleue. Au lieu d'enregistrer pour chacun de ces (par exemple 300) pixels un numéro représentant cette couleur (par exemple 213), on peut mettre un code signifiant : "mettre ici 300 fois la couleur N°213". C'est beaucoup plus compact. A cette méthode assez simple (RLE Run Length Encoding) s'ajoutent d'autres méthodes plus complexes qui recherchent des séquences répétées, ou d'autres formes de redondances. (Elles ont pour nom LZW, etc.) On arrive souvent à diminuer de moitié la taille des fichiers. C'est le type de compression employée dans le format GIF

Compression avec ou sans perte ?

Alors que pour la compression des fichiers en général on emploie des méthodes permettant de reconstituer le fichier d'origine avec une exactitude absolue (Compression sans perte), pour les images, on peut gagner encore plus en compressant d'une manière qui perd des détails que l'oeil ne voit de toutes façons pas. On arrive alors à faire d'une image de 2 Mb un fichier de moins de 100kb. C'est le type de compression employée dans le format JPEG
Cette compression avec perte indécelable ne doit pas être effectuée plusieurs fois, sinon la dégradation devient vite sensible. Rouvrir une image compressée JPEG pour la modifier et la re-compresser n'est pas bon. sur On compressera donc les images tout à la fin du traitement de l'image.


Comment optimiser une image pour le WEB ?

Voir aussi : l'optimisation des images pour le web.


- F. Lo - adapté par M.V.