La balise <IMG> est très importante pour la manipulation
des images. On peut lui associer de nombreux attributs.
La première particularité de cette balise est
qu'elle ne se referme pas.
Dans sa forme la plus simple, elle est composée de deux éléments
:
<IMG> La
balise image elle même : elle signale au navigateur
la nécessité de charger une image.
SRC Cet
attribut signifie source de l'image. Il indique le
nom du fichier graphique que vous voulez placer dans la
balise ainsi que son emplacement.
Exemple : <IMGSRC="nom_de_mon_image.gif">
2. Les formats
à utiliser sur le web
Un des éléments les plus importants à considérer
lorsque vous construisez vos pages web est le poids en koctets
de celles-ci mais égalemment le poids de vos images.
En effet, plus vos images auront un poids important, et plus
le temps de téléchargement de ces images sera
long et pénible pour les internautes.
Il est donc impératif d'utiliser des formats d'images
qui utilise un taux de compression élevé.
Les deux formats d'image les plus courants sur le web sont les
formats GIF (.gif) et JPEG/JPG (.jpeg ou .jpg).
Le format GIF ( Graphic
Interchange Format )
Il s'agit d'un format où la taille des fichiers est
réduite au minimum avec l'utilisation de 256 couleurs.
C'est un format compressé qui présente l'intérêt
de pouvoir être organisé en couches ( gif entrelacé
).
Sur une page web, une image GIF peut apparaître
de piètre qualité au début de l'affichage
et pendant que le client prend connaissance des textes,
celle-ci s'améliore jusqu'à devenir parfaite
( elle est écrite sur la page couche après
couche ).
de plus, les images au format GIF peuvent être
transparentes, voir animées.
Ce format convient aux images de taille assez petite ou
bien aux images où le nombre de couleurs et de nuances
est limité.
Pour insérer un logo, une icône ou même
une banderole, il est imbattable rapport qualité
/ taille.
Exemple de gif avec et sans couleur de transparence :
( Ici, la couleur noire est la couleur de transparence ).
Avec Transparence Sans
Transparence
Nombre de couleurs :
Comme tout fichier graphique, le nombre de couleurs joue
sur le rapport taille / qualité du fichier.
Voici une image enregistrée sous un format gif avec
différentes palettes de couleurs.
128 couleurs
-
8 Ko
64 couleurs
-
6 Ko
16 couleurs
-
4 Ko
8 couleurs
-
3 Ko
Le format JPEG ( Joint
Photographics Experts Group )
Ce format est beaucoup plus compressé que le format
GIF mais il ne bénéficie pas de cette
structure en couche décrite plus haut.
Le format JPEG utilise des couleurs 24 bits ( millions
de couleurs ) et est idéal pour afficher des visuels
très nets, de façon très réaliste.
Ce format ne permet pas la transparence mais il gère
beaucoup plus de 256 couleurs.
Le taux de compression d'une image peut être déterminé
entre 1 et 99%.
Exemples d'images compressées :
Taux de 10% -
8 Ko
Taux de 30% -
5 Ko
Taux de 60% -
3 Ko
Taux de90% -
2 Ko
Accessoirement, il existe égalemment
le format PNG même si celui-ci est encopre très
peu utilisé. Ce format permet d'afficher un nombre de
couleurs très important comme le format JPEG tout en permettant
la transparence des fichiers.
3. Les principaux
attributs de la balise <IMG>
L'attribut SRC
:
Cet attribut permet de spécifier l'URL complète
( chemin ) du fichier.
Ex :<IMG SRC="nom_de_fichier.gif">
"nom_de_fichier" doit bien sûr être
remplacé par le nom de votre image et son extension
(.gif ou .jpeg)
Si votre fichier se trouve dans un autre répertoire
que votre page HTML, par exemple dans un répertoire
"images", cela donne :
<IMG SRC="images/nom_de_fichier.gif">
Attention, comme sous UNIX, on utilise le slash ( /
).
Si par contre, votre image se situe deux répertoires
plus haut que votre fichier HTML dans un dossier nommé
"images", on écrira :
<IMG SRC="../../images/nom_de_fichier.gif">
Enfin, il est possible, bien que déconseillé,
de charger une image sur un autre site; il vous faut pour
cela l'adresse complète du serveur.
Si vous saisissez cette adresse dans votre navigateur, vous
apercevrez l'image ci-dessous :
L'attribut WIDTH et HEIGHT
Précisez la taille de l'image au navigateur :
En spécifiant la taille de l'image au navigateur, celui-ci
charge plus rapidement votre page, en effet il n'a pas à
la recalculer, de plus si jamais le visiteur a désactivé
le chargement des images, la mise en page ne sera pas perturbée.
Ces dimensions correspondent à la taille en pixels
de l'image.
Ainsi, l'image est chargée avec une largeur ( width
) de 128 pixels et une hauteur ( height )de 97 pixels.
Vous pouvez agrandir ou rétrécir l'image en
modifiant les attributs WIDTH et HEIGHT mais
attention, l'image ne sera pas chargée plus rapidement
si vous diminuez sa hauteur ou sa largeur ( ou les deux
), bien au contraire.
L'attribut ALT
Cet attribut permet de fournir un texte de rechange à votre
image si le navigateur n'affiche pas l'image.
Deux avantages :
- Si le visiteur désactive le chargement des images, il
pourra quand même deviner le sens des images.
- Vous pouvez par ce biais fournir une légende à une image
lorsque le pointeur de la souris passe au-dessus de cette
image.
En spécifiant une valeur à l'attribut BORDER
de 1 à x, vous insérer une bordure à
votre image.
Cet attribut est utile lorsque vous assignez un lien hypertexte
à une image; en effet, une bordure bleue disgratieuse vient
automatiquement se positionner autour de l'image.
En donnant la valeur 0 à l'attribut BORDER, labordure
disparait.
HSPACE et VSPACE
Avec les attributs HSPACE=x et VSPACE=x, (x
étant un nombre de pixels) vous pouvez fixer un espace
vertical et horizontal autour de votre image.
Exemple : <IMG SRC="city.gif"
WIDTH="178" HEIGHT="174"
HSPACE="25" VSPACE="45">
L'alignement des images ( Attribut
ALIGN )
Par défaut, l'image est placée sur une ligne et, le texte
s'il est présent est aligné sur le bas de
l'image.
Exple : <P ALIGN="center"><IMG
SRC="city.gif" WIDTH="128"
HEIGHT="84">La
ville de San Francisco - Côte ouest des USA.</P>
La
ville de San Francisco - Côte ouest des USA.
L'attribut ALIGN possède 9 valeurs.
Les différentes valeurs de
l'attribut ALIGN :
Les différentes
valeurs de l'attribut ALIGN pour la balise IMG
ALIGN="middle"
( texte au milieu )
ALIGN="left"
( aligne l'objet sélectionné sur la marge
gauche et place le texte qui l'entoure à sa droite)
San
Francisco
La
ville de San Francisco est située sur la côte de
Californie, environ 640 km au nord de Los Angeles. Elle est
située au bord d'une grande baie qui forme un vaste port
naturel partiellement abrité par la chaîne montagneuse
côtière.
ALIGN="bottom"
( texte en bas )
ALIGN="right"
(aligne l'objet sélectionné sur la marge
droite et place le texte qui l'entoure à sa gauche
)
San
Francisco
La
ville de San Francisco est située sur la côte de
Californie, environ 640 km au nord de Los Angeles. Elle est
située au bord d'une grande baie qui forme un vaste port
naturel partiellement abrité par la chaîne montagneuse
côtière.
ALIGN="top"
( texte en haut )
ALIGN="baseline"
(aligne la ligne de base du teste sur le bas de l'objet
sélectionné)
San
Francisco
San
Francisco - Golden Bridge
ALIGN="absbottom"
( texte en bas absolu )
ALIGN="toptext"
( aligne l'objet sélectionné sur le haut
du caractère le plus élevé de la
ligne du texte )
San
Francisco
San
Francisco
ALIGN="absmiddle"
( texte au milieu absolu )
San
Francisco
4. Exercices
pratiques
Essayez de reconstituer le code HTML de l'exemple ci-dessous
:
Pour cela, vous pouvez utiliser les images de votre choix ou
bien celles que j'ai moi même choisi.
( Clic droit sur l'image et "enregistrer l'image sous"
).
Pour le texte vous pouvez saisir le celui de votre choix.
Pour reproduire les effets de l'exemple, vous devez utiliser
les attributs ALIGN, VSPACE, HSPACE, ALT
etc...
En cliquant sur le bouton ci-dessous, vous pourrez visualiser
le résultat à atteindre :