CPTIC-Info'

Intégrer les images dans ses pages WEB

Comment intégrer des images,

Comment choisir les formats graphiques,

Comment optimiser une image pour le WEB,


Réalisé avec Home Page disponible sur Mac et PC)

Pour illustrer vos pages.

HPageIcon WIDTH=
Home Page

Versions démo. disponibles au CPTIC sur le réseau au CPTIC

F. Lombard
CP 3144 1211 Genève 3
Tél. 388.33.02
Adresse Mailbox: lombard-f


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 Claris Home Page ?



Fig. 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. es 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 document HTML; Home Page se chargeant de faire la conversion (au format GIF). Evidemment, la conversion est standard, donc parfois peu optimale.

Notons que les images crées par home Page sont placées dans un dossier défini dans les Préférences, menu Image :


Fig 2 : Le choix du dossier où les images sont stockées.

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.

On paramètre la transparence de fond et le cadre à partir de la palette d'image :


Fig 4 : Double-cliquer sur l'image amène la palette d'image.

Le nombre de pixels dans la case Border détermine la largeur du cadre, (avec zéro pour aucun cadre).

Dans cette palette on peut cliquer le bouton Set pour modifier l'image afin de rendre les parties blanches transparentes :


Fig 5 : Le bouton set ouvre une fenêtre qui permet de sélectionner une couleur de transparence.


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.

 


Fig 6 : 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.

Les utilitaires de conversion les plus courants :

Notons aussi :

Comment installer une image en fond de page ?

Dans le menu Edit, choisir Document options :


Fig 8 : Sélectionner l'image de fond de page.

Comment obtenir Claris Home Page ?

Evidemment sur le WEB, à Home Page MAC (PC)


CPTIC / F. Lombard

Dernière mise à jour : 18 octobre 2000