|
|
Insertion d'une image
Enfin voici venu le moment de placer une image dans une page, et pour faciliter la manœuvre je vous propose d'adopter celle-ci :
C'est une image GIF 89a, 16 couleurs, dont la taille fichier est de 360 octets,
la mémoire utilisée de 960 octets, sa dimension de 42x40 pixels,
et s'appelle v167.gif.
C'est pratiquement ce qui se fait de "plus léger", et je suppose bien
sûr que vous savez copier cette image, en cliquant (clic droit) dessus
dans la fenêtre de votre navigateur.
Soyez attentifs :
Je vais vous donner le code élémentaire de base pour insérer une image dans une page, pour le cas où vous auriez décidé de créer un site ultra réduit, avec 3 ou 4 images et 1 ou 2 pages seulement :
Dans cette hypothèse il n'est pas utile de créer un sous-dossier "images" dans votre répertoire, et vous allez tout réunir à sa racine.
et pour que tout soit bien clair, je reprends le langage d'une page :
<HTML>
<HEAD>
</HEAD>
ceci est un exemple, que vous pouvez copier intégralement et visualiser dans votre navigateur, en local.
</P> <IMG SRC="v167.gif"> </BODY>
</HTML>
Noter en vert le codage du é par é puis vous devrez coder le signe < par < et le signe > par > ce que je ne fais pas pour éviter de rendre la lecture trop compliquée.
le Tag IMG est le diminutif du terme IMaGe.
l'Attribut SRC est le diminutif de SouRCe.
Mais vous avez décidé au départ de créer un beau site avec de nombreuses images. Pour gérer convenablement votre répertoire vous avez donc créé un sous-dossier "images, comme indiqué dans les paragraphes antérieurs. Et en conséquence à l'avenir les exemples présentés tiendront compte de ce choix.
Sachant que les images sont classées à part, il faut donc indiquer au navigateur lorsqu'il va lire votre texte en HTML, où il doit aller les chercher c'est à dire lui spécifier qu'elles sont stockées dans ce sous-dossier "images".
Voici comment va se présenter maintenant votre programmation :
<HTML>
<HEAD>
</HEAD>
ceci est un exemple, que vous pouvez copier intégralement et visualiser dans votre navigateur, en local.
</P><IMG SRC="images/v167.gif"> </BODY>
</HTML>
Vous constatez, en rouge, que le nom du sous-dossier "images" à été rajouté et séparé du nom de l'image par un slash /.
Taille de l'image à l'affichage
Il me paraît indispensable maintenant de vous donner le nom d'un logiciel d'édition d'images, qu'il vous sera aisé de trouver en shareware sur les CD.Rom qui accompagnent les revues spécialisées. Par ex :
- GraphicConverter pour Macintosh.
- Imageview ou Paint Shop Pro pour Windows.
Pas de polémique sur ces choix de logiciels, il en existe d'autres et il ne vous est pas interdit de les essayer pour les adopter peut-être. Mais quand on débute il est je crois plus facile d'avoir un petit conseil.
Une image est caractérisée par sa taille qui s'exprime en pixels. Que vous l'utilisiez dans sa dimension d'origine comme celle qui nous sert de démonstration dans cette page, ou que vous décidiez de diminuer sa dimension d'affichage par rapport à sa dimension origine, il est recommandé de donner ces informations au navigateur.
Pourquoi ?
- Si le navigateur trouve pour chaque image les indications concernant la dimension sous laquelle elle doit être affichée, il n'aura pas ce calcul à effectuer au préalable et l'affichage sera plus rapide sur l'écran.
- S'il faut réduire la taille de l'image avant de l'afficher, ces indications sont alors indispensables.
- C'est grâce à ces logiciels d'édition d'images que vous pouvez retrouver différentes caractéristiques d'une image, dont la taille.
L'image de référence de cette page fait 42x40, soit une largeur
de 42 pixels et une hauteur de 40 pixels.
L'image du "Mexicain" de la page précédente fait 146 pixels
de large pour 180 pixels de hauteur. Si vous savez retrouver la source d'une
image avec votre navigateur, vous pouvez contrôler ces valeurs.
- N.B. Le fait de réduire les dimensions
d'une image à l'aide de ces attributs, est sans effet sur la quantité
de données transmises. Le navigateur reçoit en premier la totalité
de l'image origine puis éventuellement la réduit aux dimensions
mentionnées.
En clair cela veut dire que ce n'est pas la sur la transmission de l'image
depuis le serveur jusqu'au client qu'il y aura gain de temps vu quelle est
transmise en totalité, mais l'affichage sur l'écran par contre
sera accéléré et c'est le premier souhait du visiteur.
Nuance !
Attribut height=40 pour la hauteur
ce qui donnera :
Certains surfeurs, pour accélérer la visualisation des pages ne sélectionnent pas l'option "affichage des images" lors de la configuration des "Préférences" de leur navigateur. C'est pourquoi il est intéressant de signaler au visiteur ce qu'elles représentent par l'ajout d'un logotype, et sil s'agit d'un schéma ou d'une carte.... qui l'intéresse il lui suffit de cliquer sur "image" de son menu du navigateur pour la voir apparaître.
ALT : diminutif de ALTERNATIVE qui peut se traduire
par le "choix offert".
Par principe habituez-vous à placer cet attribut, même si pour
une icône comme celle de cette page, il n'y aura pas assez de place
pour voir apparaître le logotype et de plus certains robots de référencement
s'en servent.
Voici direz-vous quelques avancées agréables pour commencer à meubler votre document, et faire prendre l'air aux chiens que vous avez peut-être déjà en réserve. Mais les sujet n'est pas encore épuisé et nous abordons ensuite le positionnement des images dans le document et ensuite viendra le moment de placer le texte harmonieusement.
Si en commençant votre site vous êtes en panne d'images, je vous en ai placé quelques unes à cet endroit à titre de dépannage :
cliquez >>>> Gif, Jpg, Images.
|
|
