Informatique


Les images

Aller à


Le dossier _images

L'ensemble des images du site seront regroupées au sein d'un dossier dédié (par exemple _images) car:

  • il est fréquent qu'une même image soit utilisée dans plusieurs pages d'un même site, enregistrer cette image dans plusieurs dossiers différents n'a pas de sens, de plus, de la place sera inutilement occupée sur le serveur;
  • la gestion des images en est facilitée;
  • l'actualisation du site est également plus rapide, on pourra actualiser un dossier entier sans pour autant recharger les images puisque celles-ci se trouvent dans un dossier bien particulier.

La balise <img>

La balise <img> permet d'insérer une image dans un document html.

Attributs
classpour attribuer une classe
idpour attribuer un identificateur
srcl'adresse relative au fichier dans lequel il faut charger l'image
titlepour afficher une infobulle au survol de l'image par la souris
altdéfinit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorecte ou si l'image n'est pas encore téléchargée)
borderpour une bordure, border=0 si on veut empêcher une bordure
heighthauteur de l'image (uniquement en px)
widthlargeur de l'image (uniquement en px)
usemapnom de la carte placée en calque sur l'image


Les formats utilisés avec <img>

Le standard HTML ne fournit pas de liste exhaustive des formats pris en charge par les browsers.

Les formats les plus utilisés sont:

  • jpeg ou jpg, Joint Photographic Experts Group;
  • gif, Graphics Interchange;
  • png pour les images transparentes, Portable Network Graphics.
  • svg, Scalable Vector Graphics
  • ico pour les favicons et les icônes, format graphique Microsoft

Bonnes pratiques

Une image peut servir pour matérialiser un lien hypertexte, un cadre bleu est placé autour de l'image, pour le supprimer il faut attribuer la valeur 0 à l'attribut BORDER.

Il y a lieu de se préoccuper de la taille et du poids de l'image avant de l'insérer car les attributs WIDTH et HEIGHT n'ont aucune influence sur le poids de l'image!
Pour diminuer le poids de l'image il faut tout d'abord modifier ses dimensions dans un logiciel de traitement d'images et ensuite l'utiliser dans le document HTML.
Les valeurs associées aux attributs WIDTH et HEIGHT sont totalement libres. Il faut cependant savoir que changer les dimensions de l'image risque de modifier plus ou moins fortement la qualité de l'image, il y a donc lieu de manipuler ces attributs avec prudence.


Exemples

Soit l'arborescence suivante avec:
  • l'image mypic.jpg dans le dossier _images
  • le fichier fic1.htm dans www
  • le fichier fic2.htm dans sud
  • le fichier fic3.htm dans 2017
  • le fichier fic4.htm dans ostende
  • le fichier fic5.htm dans travail
  • le fichier fic6.htm dans france
  • le fichier fic7.htm dans wallonie
Etablir les commandes permettant de placer l'image dans chaque fichier.

	<!-- pour fic1.htm --><img src=_images/mypic.jpg >
	<!-- pour fic2.htm --><img src=../../../_images/mypic.jpg >
	<!-- pour fic3.htm --><img src=../../_images/mypic.jpg >
	<!-- pour fic4.htm --><img src=../../../../_images/mypic.jpg >
	<!-- pour fic5.htm --><img src=../_images/mypic.jpg >
	<!-- pour fic6.htm --><img src=../../_images/mypic.jpg >
	<!-- pour fic7.htm --><img src=../../../_images/mypic.jpg >

Utiliser un favicon

Vous devez utiliser des images .png pour créer vos favicons.

Pour construire l'image, le plus simple est d'utiliser une application en ligne du type générateur de favicons de 1&1, il suffit de fournir l'image au site et celui-ci vous renvoie les .png correspondants.

Ensuite vous intégrer la ligne suivante dans le <head> du site.
Idéalement l'image favicon doit être située dans le dossier racine du site afin d'être détectée automatiquement.

Démo
<link rel="icon" type="image/png" href="favicon-16x16.png">