Conception & Réalisation de sites Web

Les images

Préparer ses images

Il est important de garder à l'esprit que les pages que nous mettons sur Internet sont vues à distance par nos visiteurs. Leurs navigateurs téléchargent un à un tous les fichiers composants notre page. Des fichiers images trop volumineux ralentissent les temps de chargement de notre site Web ce qui peut décourager les visiteurs.

Par conséquent, avant de mettre une photo en ligne, nous veillerons à l'enregistrer dans l'un des 3 formats d'optimisations suivants :

  • Jpeg (fichiers en .jpg) généralement utilisé pour des photos ou des images avec des dégradés de couleurs
  • Gif (fichiers en .gif) généralement utilisé pour des illustrations avec des applats de couleurs.
  • Png (fichiers en .png) généralement utilisé pour des images avec des ombres sur fond transparent

Ces formats sont des formats d'optimisation permettent de réduire le poid des fichiers images. Par conséquent, ce sont les seuls qui sont acceptés par les navigateurs.

La plupart des logiciels de retouche d'image proposent une option de type "enregistrer pour le web" qui vous permettra de choisir le meilleur format de compression pour une image donnée. Vous pouvez également réduire les dimensions d'une image pour alléger son poids.

Une fois votre image optimisée, il faut la placer dans votre site. Vous pouvez choisir de la mettre dans le même répertoire que votre page Web, ou dans un répertoire de votre choix.

La balise «img»

Nous pouvons ajouter des images grâce à la balise «img». Comme les balises «hr» et «br», elle ne peut avoir aucun contenu. Nous l'écrirons donc :

<img />

... plutôt que :

<img></img>

La balise img s'utilise avec les attributs suivants :

  • l'attribut src (obligatoire) précise le chemin vers le fichier image à afficher. Si l'image est dans le même répertoire que le fichier HTML qui l'appelle, le nom du fichier du fichier suffira.
  • l'attribut alt (obligatoire) permet de préciser un text alternatif qui s'affichera si l'image ne peut s'afficher.
  • l'attribut border permet de spécifier la largeure de la bordure de l'image (de 0 à n)
  • les attributs width et height permettent de spécifier respectivement la largeure et la hauteure de l'image. Si ces attributs ne sont pas renseignés, le navigateur calculera lui même la taille des images. Cependant, cela peut ralentir l'affichage de la page.

Exemple d'insertion d'une image. Dans cet exemple l'image "sueur.gif" est placée dans un répertoire "cours" lui même placé dans le répertoire "i" :

<img src="i/cours/sueur.gif" width="270" height="295" alt="Illustration des problèmes de suddation" border="0" />

Dans votre navigateur vous verrez une bien jolie image (© Bastien Devaux) :

Illustration des problèmes de suddation

Attention au respect du chemin de l'image

Précision sur le chemin de l'image (attributs src) :

  • le nom de l'image dans l'attribut src doit être en tout point identique au nom du fichier image. N'oubliez pas de préciser l'extension (ex: .jpg) et de respecter la casse des caractères (majuscules / minuscules).
  • le nom de l'image ne doit comprendre aucun caractère spéciaux autre que les tirets (pas d'espace, pas d'accents, etc...). Evitez également les minuscules pour s'éviter des erreurs. Si votre image s'appelle, "mon Châlet montagne.jpg", renommer la "mon-chalet-montagne.jpg".
  • si l'image n'est pas situé dans le même réperoire, il faut préciser le chemin pour y accéder. Par exemple, si l'image est dans un dossier "images", nous l'appellerons ainsi : src="images/mon-chalet-montagne.jpg".
Balise Indication donnée au navigateur
<img /> Insertion d'une image. Cette balise propose les attributs suivants :
src="Val", Val le chemin complet vers l'image
alt="Val", Val étant un texte qui remplace l'image si elle ne peut s'afficher.
border="Val", Val étant un entier. Précise la taille de la bordure de l'image.
width="Val", Val étant un entier. Précise la largeur de l'image.
height="Val", Val étant un entier. Précise la hauteur de l'image.
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!