Vous pouvez également insérer des images pratiquement dans tout élément de votre page : une image peut donc se trouver en plein milieu d’un texte, ou ce dernier s’enrouler en colonnes autour du dessin.
Avant d’envisager de diffuser une image sur Internet, vous devez prendre certaines précautions (comme d’ailleurs avec pratiquement tout contenu) : veillez à toujours respecter scrupuleusement la législation sur le copyright et les droits d’auteur. Pour pouvoir diffuser une image sur votre site, vous devez vérifier que vous avez le droit de le faire : soit elle est libre de droits, soit vous avez obtenu l’accord de son propriétaire
Figure 6.13: L’emploi d’un filigrane.
Figure 6.14: L’emploi d’un filigrane de faible taille (ici 129×159 pixels) est une solution possible, indépendante de la taille de l’écran employé.
(auteur), soit enfin vous en êtes vous-même l’auteur. Même dans ce dernier cas, si l’image est une photographie représentant d’autres personnes, vous devez obtenir leur autorisation formelle.
Depuis bien longtemps, HTML permet l’inclusion d’images à l’aide de l’élément IMG. Cet élément incorpore une image dans le document courant, à l’emplacement de la définition de l’élément. Dépourvu de contenu, il est généralement remplacé dans la ligne par l’image que désigne l’attribut src, les images alignées à gauche ou à droite qui
« flottent » hors de la ligne faisant exception.
Nous allons modifier l’apparence de la page secondaire Région en insérant une image. Pour simplifier, nous allons employer une image dont disposent normalement tous les utilisateurs de machines Windows XP : une de celles se trouvant dans le dossier Echantillons d’images du dossierMes images. Avant de commencer, il faut vous livrer à quelques travaux préparatoires :
1 Ouvrez l’Explorateur Windows, naviguez jusqu’à votre dossier MonSite et créez-y un sous-dossier, nommé Images: vous y placerez toutes les images employées sur le site. C’est une bonne habitude à prendre pour éviter de surcharger le répertoire principal.
Subdivisions
Vous pourriez même aller encore plus loin et subdiviser le sous-dossierImagesen plusieurs sous-dossiers :gif(les images GIF statiques), gifanim(les gif animés),icone(les icônes et boutons) etJPEG(les photos).
2 Choisissez Démarrer > Mes images, puis cliquez sur le dossier Echantillons d’images.
3 Sélectionnez l’imageCoucher de soleil.jpg, puis choisissez dans la barre de menuEdition >Copier.
4 Revenez dans votre dossier MonSite/Images, puis collez l’image de coucher de soleil en choisissant Edition>Coller.
5 Procédez de la même façon pour les images Hiver.jpg et Nénuphars.jpg.
Vous êtes maintenant prêt à insérer des images sur votre site.
6 Ouvrez le Bloc-Notes, puis ouvrez le fichier region1_4_3.html.
7 Modifiez d’abord le numéro de version :
<META name ="version" content="1.6.1">
8 Profitez-en pour modifier le lien vers la page d’accueil en fonction du nom du fichier actuel :
<A href="pageacc1_6_1.html">Retour vers la page d’accueil
</A>
9 Placez-vous maintenant dans la première cellule de la première ligne, et remplacez le contenu texte «...Une image sera placée ici...» par un élémentIMG, comme suit :
<TD rowspan="3"><IMG src="Images/Coucher de soleil.jpg">
</TD>
Remarquez que la balise IMG est dépourvue d’élément de fermeture : son contenu est défini par la valeur de l’attribut src, un URI. Cet attribut indique au navigateur où trouver l’image, comme l’attributhref de l’élémentA indique où trouver la ressource liée à une ancre.
Sensibilité à la casse
Respectez avec soin la casse dans l’URI de l’élémentIMG, comme pour tout URI. Certains navigateurs et/ou serveurs sont sensibles à la casse des URI. Tous ne l’étant pas, votre site pourrait fonctionner parfaitement en local, mais plus du tout une fois en ligne. Une bonne habitude consiste à n’employer que des minuscules pour les noms des fichiers image.
Cette sensibilité à la casse étant susceptible de concerner également l’extension, vérifiez celles de vos fichiers image : certains programmes de dessin enregistrent automatiquement les fichiers avec une extension en majuscules.
XHTML
En XHTML, cette instruction s’écrirait :
<img src="Images/Coucher de soleil.jpg" />
10Enregistrez le fichier sous le nomregion1_6_1.html, puis examinez cette page dans votre navigateur.
Archivez…
L’habitude prise ici d’attribuer aux fichiers un nom comportant le numéro de version n’a pour but que d’éviter les recouvrements de fichiers et de permettre d’étudier les versions précédentes. Pour un site réel, cette méthode n’est guère à recommander, la modification des noms de fichiers entraînant des risques de liens rompus et imposant de mettre continuellement à jour ces liens. Mieux vaut archiver les anciens fichiers, puis les modifier sans changer leur nom.
L’aspect n’est pas extraordinaire, et ce pour plusieurs raisons. Nous ne commenterons pas le choix de l’image, puisqu’il a fallu employer une image préexistante sur la majorité des systèmes : le choix est très limité.
En revanche, cette image semble de taille un peu exagérée, « écrasant » tout le tableau et nécessitant un écran de grande taille. En examinant le fichier image, vous voyez que celle-ci mesure 800 × 600 pixels : une taille imposante, sans doute démesurée par rapport à nos besoins. Il
Figure 6.15: Insertion d’une image
faudrait l’afficher en taille plus réduite. C’est ce que permettent les attributsheightet widthde l’élémentIMG.
11Modifiez comme suit l’élément IMG en ajoutant les attributs heightet width:
<TD rowspan="3">
<IMG src="Images/coucher de soleil.jpg " width="267"
height="200">
</TD>
12Enregistrez à nouveau le fichier sous le même nom puis examinez la page dans votre navigateur.
Nous avons ici divisé la taille d’affichage de l’image par 3. L’aspect est nettement plus satisfaisant (remarquez que nous avons conservé exactement la même taille de fenêtre que pour la capture d’écran précédente).
Ces deux attributs méritent quelques commentaires supplémentaires :
j Leurs valeurs sont exprimées en pixels.
Figure 6.16: Insertion d’une image à taille déterminée
j Les deux attributs ne sont pas obligatoires si vous souhaitez modifier la taille d’une image de façon proportionnelle : ne saisir queheight="200"suffit à réduire la taille de l’image d’un tiers en hauteur et en largeur. La présence des deux attributs permet en outre de modifier le ratio de l’image, ce qui est parfois utile.
j Ces attributs ont été employés ici pour réduire la taille de l’image, mais ils auraient tout aussi bien pu servir à l’augmenter. Selon le rapport d’agrandissement retenu, attendez-vous à une perte de qualité (pixellisation de l’image).
j Lorsque vous incluez ces attributs, la page Web semble se charger plus vite : le navigateur est en mesure d’afficher le texte avant d’avoir fini de charger la page, car il connaît la place à réserver à l’image. En leur absence, le visiteur est confronté à une page blanche pendant le chargement de l’image, le navigateur ne sachant pas la place libre dont il dispose pour afficher le texte. Ce phénomène est presque imperceptible en local, mais devient évident lorsque la page est téléchargée depuis le Web.
En pratique, vous chargez ici une image d’un « poids » environ neuf fois supérieur à ce qui est nécessaire : 800×600 pixels, soit 480 000 pixels, alors que vous n’exploitez qu’une image de 266 × 200 pixels, soit 53 200 pixels. Malgré la compression JPEG, le temps de chargement est environ neuf fois supérieur aux besoins. Mieux vaut toujours redimensionner les images à la taille souhaitée à l’aide d’un programme de dessin (nous reviendrons par la suite sur ce thème). En revanche, conservez donc les attributsheightetwidthpour accélérer l’affichage de la page.
13Lorsque vous insérez une image, vous devez penser aux agents utilisateurs non visuels. Servez-vous de l’attribut alt pour proposer une alternative textuelle dès le début du chargement de l’image :
<IMG src="Images/coucher de soleil.jpg " width="267"
height="200"
alt="Coucher de soleil sur le lac de Linciel">
14Enregistrez à nouveau le fichier sous le même nom puis examinez la page dans votre navigateur.
L’attribut alt spécifie le texte de remplacement qui est restitué si l’image ne peut s’afficher. Les agents utilisateurs doivent restituer le texte de remplacement quand ils ne gèrent pas les images, ne
reconnaissent pas un certain type d’image ou ne sont pas configurés pour les afficher.
Remarquez qu’Internet Explorer affiche le texte alternatif dans une infobulle lorsque le pointeur de la souris est placé sur l’image.
C’est une des nombreuses erreurs liées au manque de respect d’Internet Explorer vis-à-vis de la spécification HTML 4.01 : la valeur de l’attribut alt ne devrait être affichée que lorsque l’agent utilisateur ne peut afficher l’image. Pour afficher un commentaire dans une infobulle, vous devez employer l’attributtitle.
15Servez-vous de l’attribut title pour proposer un commentaire affiché dans une infobulle lorsque le pointeur se trouve sur l’image :
<IMG src="Images/coucher de soleil.jpg "
width="267" height="200"
alt="Coucher de soleil sur le lac de Linciel"
title="Un coucher de soleil sur le lac de Linciel">
16Enregistrez à nouveau le fichier sous le même nom puis examinez la page dans votre navigateur.
Remarquez que nous avons volontairement différencié les valeurs des attributs alt et title. Tant Internet Explorer que Firefox affichent désormais le commentaire dans une infobulle. Internet Explorer
Figure 6.17: Image avec texte alternatif
n’affiche le contenu d’un éventuel attribut alt qu’en l’absence de l’attributtitle.
Figure 6.18: Emploi de l’attribut title.
Figure 6.19: Emploi de l’attribut title. Tant Internet Explorer que Firefox affichent correctement ce commentaire dans une infobulle lorsque le pointeur se trouve sur l’image.
Vous pouvez également recourir à l’attribut longdesc pour relier l’image à une description plus détaillée. Cet attribut se comporte comme une ancre :
<IMG src="image.jpgf" alt="Schéma du moteur "
longdesc="schémamoteur.html">
L’élémentIMGpossède d’autres attributs qui permettent de jouer sur les paramètres de restitution d’une image :
j L’attributalignpermet d’aligner l’image, de la même façon que pour un paragraphe. Vous pouvez utiliser les valeurs center, right ou left. Si vous placez du texte après le graphisme, celui-ci coulera autour de l’image alignée à droite ou à gauche, donnant un aspect similaire à celui d’un magazine.
j L’attributborderpermet de définir la largeur du cadre entourant l’image. En choisissantborder="0", l’image sera dépourvue de cadre.
6.3. Images animées
Pour ajouter de l’éclat à une page, il est possible d’utiliser des gifs animés. Il s’agit d’un type d’image GIF qui peut être animé en combinant plusieurs images en un unique fichier GIF, selon le standard défini en 1987 par Compuserve. L’image effectue lors de sa restitution un cycle à travers les différentes images élémentaires.
Même si les animations GIF n’offrent pas le niveau de souplesse et de contrôle proposé par d’autres formats d’animation, il a connu et connaît encore un immense succès largement dû au fait qu’il est reconnu par l’immense majorité des navigateurs. En outre, les fichiers de gifs animés sont généralement plus petits que d’autres fichiers d’animation, comme les applets Java. Ce type d’image est souvent employé pour les bannières publicitaires, pour attirer des visiteurs sur une page, mais peut également servir à attirer l’attention sur des parties précises d’une page ou comme boutons de barre de navigation.
GIF89a, comme GIF, possède une palette de couleurs comprise entre 2 et 256 couleurs. Plus la palette est petite et plus le fichier est de petite taille. Si votre image GIF n’emploie que 4 couleurs, vous pouvez réduire en conséquence la palette à 4 couleurs (2 bits) et ainsi diminuer la taille du fichier de près de 75 %.