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 attributs indispensables

  • src pour l'adresse relative de l'image
  • alt pour l'accessibilité. Est utilisé par les logiciels qu'utilisent les personnes malvoyantes
  • width et height pour informer le navigateur de la place occupée par l'image, car celle-ci sera toujours chargée après le code html, le browser sait donc à l'avance la place à réserver. Cela évite des soubresauts dans le chargement de la page.

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, pour les photos;
  • png, Portable Network Graphics, pour les dégradés de couleur, les couleurs pleines, pour les images transparentes, .
  • svg, Scalable Vector Graphics, format vectoriel pour des formes simples
  • gif, Graphics Interchange, de moins en moins utilisé, reste utile pour des petites animations;
  • ico pour les favicons et les icônes, format graphique Microsoft

Préparer les images

La taille et le poids de l'image sont définits avant de l'insérer car les attributs WIDTH et HEIGHT n'ont aucune influence sur le poids de l'image!

Trouver des images (libres de droit)

Le site Unsplash propose des images libres de droit.

Compresser/dimensionner les images

Il existe une série de logiciels en ligne permettant de préparer les images , I love image par exemple.
Cette petite application permet de compresser, dimensionner, concertir, etc.

Le contraste général

Le contraste permet d'améliorer la lisibilité, le site Color contrast checker permet d'évaluer la qualité du contraste entre les couleurs de fond et les couleurs de texte.


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">

Quiz

Les images 1

Les images 2

Etablir le chemin vers une image