images - stephane rampacek

IMAGES
Nous allons donc voir comment intégrer une image dans une page web. Cela se fait
très facilement avec une balise très simple d'utilisation.
I Généralités sur les images
Une image peut donc être dans différents formats : .gif .jpg .png
Ce sont presque uniquement ces 3 formats de fichiers qui seront utilisés. Chacun a ses
particularités, ses avantages et ses inconvénients.
Ce qu'il faut savoir avant de choisir le format d'image, c'est qu'il faut toujours avoir
l'image ayant une taille la plus petite possible (10ko maximum pour une image de type logo
ou animation de page).
Les formats .gif et .png permettent de faire des images animées. La différence entre
ces deux formats est sur le nombre de couleurs possibles. Le format .gif n'accepte que 256
couleurs alors que le .png n'a pas cette limite. Le format .jpg n'accepte pas les animations et
est un format dégradant c'est-à-dire que plus l'image sera compressée, moins l'image sera
belle.
II Intégrer une image dans un page web
Pour intégrer une image dans une page web, on utilisera la balise <IMG>. Elle s'utilise
toute seule c'est-à-dire que la balise de fermeture </IMG> n'existe pas.
Cette balise ne s'utilise pas sans attribut. On utilisera toujours l'attribut SRC="…" qui
accepte pour valeur l'adresse de l'image.
Prenons un exemple : on veut intégrer l'image "logo.gif" dans une page. On utilisera
alors la balise suivante :
<IMG SRC="logo.gif">
On peut décider de retailler l'image dans la page web. Par exemple, si on a une image
qui a pour taille 200x100 pixels et que l'on veut quelle s'affiche juste en 100x50 pixels. On
utilisera alors les attributs WIDTH="…" et HEIGHT="…". WIDTH="…" sert à fixer la
largeur de l'image et HEIGHT="…" sert à fixer la hauteur de l'image.
Pour notre exemple, la balise sera de la forme :
<IMG SRC="logo.gif" WIDTH="100" HEIGHT="50">
Il faut tout de même savoir que pour que l'image aille plus vite à se charger, il vaut
mieux la retailler au préalable à l'aide d'un logiciel de retouche d'image.
Enfin, on peut aussi décider d'ajouter une bordure à l'image grâce à l'attribut
BORDER="…". Cet attribut attend comme valeur un chiffre qui correspond à l'épaisseur de la
bordure en pixel. Une bordure normale a une épaisseur de 1 pixel. Dans ce cas, la balise sera
de la forme :
<IMG SRC="logo.gif" BORDER="1">
Stephane RAMPACEK, le 10/04/2002
www.stephane-rampacek.fr.st
1
III Utilisation de la balise <IMG>
On peut utiliser la balise <IMG> entourées des balises <CENTER> et </CENTER> si
l'on veut centrer l'image.
L'ensemble de balise sera donc de la forme :
<CENTER"><IMG SRC="logo.gif"></CENTER>
Si l'on veut transformer l'image en lien, on peut l'encadrer des balises <A> et </A>.
Pour changer la couleur de la bordure de l'image, il suffit d'encadrer la balise <IMG>
par <FONT> et </FONT> en ajoutant l'attribut COLOR="…" à la balise <FONT>.
Par exemple, si l'on veut un bordure bleu, on utilisera l'ensemble de balises suivants :
<FONT COLOR="#0000FF"><IMG SRC="logo.gif" BORDER="1"></FONT>
Stephane RAMPACEK, le 10/04/2002
www.stephane-rampacek.fr.st
2