Accueil

Formation

Nano plate-forme
Programmation
Automation
HTML
1- Préambule
2- Introduction
3- Exercice
4- Page Web ?
5- Texte
6- Images
7- Couleurs
8- Répertoires
9- Hyperliens
10- Tableaux
11- Formulaires
12- Cadres
PHP

Sénégal
Asbl
Sur le chemin...
Téléchargement
Dernière mise à jour : le dimanche 4 mai 2003

Les images

Comme partout, les images ont un rôle capital sur un site Web. Leur choix et leur disposition sur les pages se feront donc avec le plus grande soin.

Le copyright

Le copyright protège les oeuvres. C'est normal que n'importe qui ne puisse pas s'attribuer le travail et la créativité, en quelque sorte la propriété, d'un artiste. On peut s'inspirer mais pas voler. Vous veillerez donc à respecter cette règle dans le choix de vos images.

Deux possibilités s'offrent à vous:

  1. Créer vos images vous-mêmes
  2. Accéder à des sites distribuant des images libres de tous droits

Voici quatre sites offrant des images (plus ou moins sans droits suivant les utilisations, lire les notices):

Pour les images d'arrière-plan (voir plus bas), visitez les sites suivants:

Considérations techniques

Il faut savoir que chacune de vos images devra passer par le câble, ce qui ralentira considérablement le temps de chargement de votre page.

Un point essentiel dans la conception d'un site Web est le "poids" des éléments à charger.

Au niveau des images, il faut donc veiller à agir de façon très rigoureuse:

  • Au niveau de la taille de l'image (essayez de les choisir petites, c'est plus mignon)
  • Au niveau du cadrage (crop en anglais): recadrez vos images qui ont des bords trop larges
  • Au niveau de la résolution:
    • Si ce sont des images à imprimer en bonne qualité: 300 dpi (dots per inch) ou ppp (points par pouce)
    • Si ce sont des images destinées uniquement à être affichées à l'écran, se limiter à 78 dpi.
  • Au niveau du nombre de couleurs (certains logiciels permettent de le réduire jusqu'à une limite tolérable)
  • Au niveau des formats:
    • Le format ".bmp" est de loin le plus lourd, il n'est d'ailleurs pas accepté par les navigateurs
    • Le format ".jpg" est le plus courant, il code d'office en 16 millions de couleurs
        Attention, veillez à convertir vos images en JPEG au "dernier moment", quand vos traitements sont terminés. Traiter une image alors qu'elle est déjà en JPEG lui fait parfois "reprendre du poids".
    • Le format ".gif" est léger et permet deux choses
      • les images animées
      • les images avec une couleur transparente (pour ne pas voir les bords de l'image sur les fonds colorés)
    • il existe beaucoup d'autres formats moins connus. Si vous avez une âme d'explorateur...

Ajouter une image

L'ajout d'une image dans une page Web se fait grâce à une balise unique <IMG> assortie du paramètre SRC qui permet de mentionner la SouRCe de l'image.

L'affichage de l'image animée suivante (qui s'appelle "abc.gif") donne ceci


et s'affiche grâce à la commande

<IMG SRC="abc.gif">


Attention, cette image ne s'affichera que si elle est dans le même répertoire que la page qui l'appelle. Au cas où l'image se trouverait dans un autre répertoire, il faudrait en tenir compte dans le chemin d'accès de SRC. Ce problème sera analysé dans le chapitre suivant Les répertoires.

Dimensions de l'image

Toute image a deux dimensions en pixels: sa largeur (WIDTH) et sa hauteur (HEIGHT).

Lorsque vous demandez l'affichage d'une image sans mentionner ses dimensions, le texte de la page se charge d'abord comme si les images à afficher étaient de dimensions nulles. Alors que le visiteur a commencé à lire le texte, celui-ci fait des bonds, fait des bonds au fur et à mesure que les images se chargent. Cet effet est très déplaisant. Le concepteur de pages Web veillera donc à indiquer, dans chaque balise d'affichage d'image, les dimensions réelles en pixels de celle-ci (à consulter dans un logiciel de traitement d'images). Le chargement réservera alors à cette image la place prévue et l'image se chargera sans provoquer de dilatation de texte intempestive.

Attention, le navigateur adapte l'aspect de l'image aux mesures données. Il s'agit donc de donner les mesures réelles de l'image. Si une mesure est fausse (la largeur double par exemple), le navigateur étirera l'image sur le double de sa largeur normale et l'image apparaîtra complètement déformée.

Voici trois exemples de la même image:

  1. affichée avec ses dimensions réelles
  2. affichée avec une largeur et une hauteur de moitié de la taille réelle (ce qui fait que l'image garde ses proportions)
  3. affichée avec une hauteur double de l'image originale





Attention, quelles que soient les dimensions demandées, l'image garde toujours son poids (faites un clic droit sur chaque image et affichez ses Propriétés, vous verrez que les dimensions varient mais que la taille du fichier est toujours la même).

Admettons que vous ayez une image dont le fichier soit volumineux (128 Ko par exemple), le fait de demander son affichage à des dimensions plus petites (la moitié de la largeur et la moitié de la hauteur comme ci-dessus) ne réduira pas la taille du fichier et les 128 Ko de l'image seront chargés.

Si vous désirez faire un genre d'album photo avec des réductions qui se chargent plus rapidement et ensuite les photos à la taille réelle en fonction de la demande du visiteur, vous devez prévoir pour chaque photo, séparément, la photo normale et la réduction (qui sera "plus légère"), celle-ci ayant été réalisée grâce à un logiciel de traitement d'image.

Mise en page d'une image

Alignement horizontal

Dans une page Web, par défaut, l'image se positionnera toujours contre la marge gauche de la page.

Il est toutefois possible de centrer l'image en la faisant précéder de la balise <CENTER>.

A ce moment, l'image sera centrée, mais également tout ce qui la suit. Pour éviter cela, il faudra faire suivre l'affichage de l'image par la balise </CENTER>.

Habillage d'une image par du texte

Par défaut, une image occupe tout l'espace horizontal de la page sur laquelle elle est affichée.

Il est toutefois possible de demander son alignement à gauche ou à droite tout en habillant l'image par le texte qui suit.

Ipso facto duplicat sic transit fluctuat nec mergitur nihil obstat imprimatur ecce homo sapiens nihil novi sub sole ipso facto duplicat sic transit fluctuat nec mergitur nihil obstat imprimatur ecce homo sapiens


C'est réalisé grâce à la commande suivante

<img src="images/angel.gif" align=left>
Vient ici le texte à placer.


L'alignement à droite sera donné, en toute bonne logique, par la balise align=right

Ipso facto duplicat sic transit fluctuat nec mergitur nihil obstat imprimatur ecce homo sapiens nihil novi sub sole ipso facto duplicat sic transit fluctuat nec mergitur nihil obstat imprimatur ecce homo sapiens




Ipso facto duplicat sic transit fluctuat nec mergitur nihil obstat imprimatur ecce homo sapiens nihil novi sub sole ipso facto duplicat sic transit fluctuat nec mergitur nihil obstat imprimatur ecce homo sapiens


Sans être un esthète averti, cette disposition est nettement moins harmonieuse, et ceci pour deux raisons:

  1. Les problèmes d'alignement du texte, qu'on le justifie à gauche ou à droite (la justification totale n'est pas disponible en HTML)
      Il faut toutefois remarquer que ce phénomène est variable en fonction de toute une série de facteurs. Il est atténué par
    • une proportion de texte plus grande que la proportion de l'image sur la largeur de la page
    • une taille de caractères plus petite
    • l'utilisation de mots plus courts (!)
      En fait, les mêmes problèmes que ceux qui créent les "cheminées" dans la mise en page classique.
  2. Lorsque vous disposerez vos images, veillez toujours à ce que l'oeil du lecteur soit ramené vers le centre de la page et non expulsé en dehors (l'angelot à droite regardant encore à droite provoque la fuite de l'oeil en dehors de la page)

En cumulant l'alignement à gauche pour une image et l'alignement à droite pour une autre, il est possible d'habiller deux images avec du texte qui figurera au centre de la page.

Il suffit pour cela de déclarer l'insertion des deux images avec leurs alignements respectifs et ensuite de taper le texte. Voici ce que ça peut donner:

Ip so fac to du pli cat sic tran sit fluc tuat nec mer gitur ni hil ob stat im pri matur ecce homo
sap iens ni hil novi sub sole Ip so fac to dup licat sic tran sit fluc tuat nec mer gitur nihil ob stat im pri matur ecce homo sap iens

Voici les balises qui ont été utilisées suivies des explications:

<IMG SRC="angel6r.gif" HSPACE=10 ALIGN=LEFT><br>
<IMG SRC="angel6l.gif" HSPACE=10 ALIGN=RIGHT><br>
Ip so fac to du pli cat sic tran sit fluc tuat nec mer gitur ni hil ob stat im pri matur ecce homo<BR CLEAR=ALL>sap iens ni hil novi sub sole Ip so fac to dup licat sic tran sit fluc tuat nec mer gitur nihil ob stat im pri matur ecce homo sap iens

Passons donc en revue les différents éléments des balises:

  • "HSPACE=10" demande de réserver un espace horizontal de 10 pixels de part et d'autre de l'image (cela évite que le texte se colle à l'image et devienne difficilement visible)
  • L'équivalent existe verticalement grâce à "VSPACE=10"
  • Comme on l'a dit plus haut, "ALIGN=LEFT" permet de placer l'image à gauche et de l'habiller de texte sur sa droite
  • Pour la seconde image, "ALIGN=RIGHT" demande de placer l'image à droite en l'habillant avec le texte sur la gauche
  • Etant donné que ces deux commandes sont placées sur deux images qui se suivent, le textes qui suit se positionnera entre les deux images.
  • La commande "<BR CLEAR=ALL>" demande de cesser l'habillage et de recommencer le reste du texte au niveau ou les deux images sont terminées "<BR CLEAR=ALL>"
  • Si les images sont de longeurs différentes, on peut remplacer le "ALL" par "LEFT" (qui recommence le texte à partir du moment où l'image de gauche est terminée) ou "RIGHT" (qui recommence le texte à partir du moment où l'image de droite est terminée)

Il est impossible de prévoir tous les cas. Vous en savez suffisamment pour vous débrouiller en fonctions des configurations qui se présenteront dans vos pages.

Encadrer une image

Si vous le voulez vraiment, vous pouvez encadrer vos images dans une bordure dont vous pouvez choisir l'épaisseur.

Un cadre comme ceci


et s'affiche grâce à la commande

<IMG SRC="new28.gif" BORDER=5>


Prévoir un texte de remplacement

Vous pouvez, en cas de problème d'affichage de vos images, prévoir un texte de remplacement qui permettra au visiteur de comprendre quelle image aurait dû s'afficher, cela permet aussi de faciliter la tâche du concepteur afin de trouver à quelle image se trouve le(s) problème(s).

Un cadre comme ceci

Flûte de paon


et s'affiche grâce à la commande

<IMG SRC="f_paon.gif" ALT="Flûte de paon">


Aligner une image sur un texte (ou l'inverse!)

Lorsque vous désirez positionner les légendes d'images sur la droite de l'image, ou inclure une petite image dans un texte, la hauteur de l'image par rapport au texte est importante. Des commandes permettent de placer le texte au niveau du bas de l'image, de son milieu ou du haut.

Des légendes alignées comme ceci

Pour faire de bons sandwiches :

1. Placez la tranche du dessous

2. Placez la garniture

3. Placez la tranche du dessus


se réaliseront grâce aux commandes

<P><B>Pour faire de bons sandwiches :</B>
<P><IMG SRC="sandwic1.gif" ALIGN=BOTTOM>
1. Placez la tranche du dessous
<P><IMG SRC="sandwic1.gif" ALIGN=MIDDLE>
2. Placez la garniture
<P><IMG SRC="sandwic1.gif" ALIGN=TOP>
3. Placez la tranche du dessus

Placer une image d'arrière-plan

Dans la balise "<BODY>", vous pouvez placer deux commandes qui permettent soit

  1. d'avoir une couleur de fond unie dans l'arrière-plan grace à la commande "BGCOLOR=nom ou code d'une couleur (voir chapitre suivant "Les couleurs").
  2. d'avoir une image qui se répète jusqu'à couvrir l'entièreté de l'arrière-plan grâce à la commande "BACKGROUND="nom d'un fichier image""

Vous veillerez, toutefois, pour la clarté et le bon goût de votre site, de respecter les quelques règles suivantes:

  • prendre des images relativement neutres
  • prendre des images permettant de former un arrière-plan uniforme (pensez aux raccords de papier-peint)
  • choisissez une image qui conserve la lisibilité du texte

Placer un trait horizontal

Il est parfois utile de placer un trait horizontal sur sa page pour en séparer deux parties bien disctinctes, ou pour souligner le fait que la page ne va pas plus bas.

Il existe une commande toute faite pour cela qui est <HR> qui est l'abréviation de Horizontal Row.

"<HR>" peut être assorti d'un certain nombre de paramètres:

  • "SIZE=épaisseur en points" qui détermine l'épaisseur du trait (par défaut: 1)
  • "WIDTH="..%"" qui détermine la longueur du trait en pourcentage par rapport à la largeur de la page (par défaut: 100%)
  • "ALIGN=LEFT, RIGHT ou CENTER" qui détermine la position du trait par rapport aux marges pour autant qu'il ait une longueur plus petite que la largeur de la page (par défaut: CENTER)

Cette balise est assez simple à mettre en oeuvre, je ne ferai donc pas de démonstration, vous pouvez essayer par vous-mêmes.

Choisir des images comme puces

Vous pouvez éventuellement choisir des images comme puces, ce qui vous permettra de personnaliser vos listes en fonction des sujets abordés.

Si vos voulez obtenir ceci,

Soyons méthodiques :
Premièrement
Deuxièmement
Troisièmement
Quatrièmement


se réaliseront grâce aux commandes

<P><B>Soyons méthodiques :</B>
<BR><IMG SRC="arrow27.gif"> Premièrement
<BR><IMG SRC="arrow27.gif"> Deuxièmement
<BR><IMG SRC="arrow27.gif"> Troisièmement
<BR><IMG SRC="arrow27.gif"> Quatrièmement

◊ ◊ ◊

© Rupert Meurice de Dormale 2003