Les images sont essentielles pour réaliser des sites web esthétiques et attrayants. Il est donc très important de bien comprendre comment intégrer correctement des images sur son site web.
Des fichiers liés
Lorsque vous insérez une image dans un document avec un logiciel de traitement de texte, l’image est généralement intégrée à l’intérieur du fichier .odt ou .docx. Le poids du document de traitement de texte augmentera ainsi en fonction du poids de l’image insérée.
Lorsque vous insérez une image sur une page web, le principe est bien différent, puisque le fichier est, la plupart du temps, lié à la page html. La page html, contiendra donc une balise permettant d’indiquer où trouver l’image à afficher. Le poids de la page html augmentera donc très légèrement quelque soit le poids de l’image. Pour autant, lorsqu’un internaute souhaitera afficher une page web, son navigateur devra télécharger la page ainsi que l’image (comme tous les autres fichiers liés).
Pour afficher une image dans une page web, le navigateur doit donc au préalable la télécharger. Cela signifie que plus les images seront lourdes sur une page, plus la page sera longue à afficher.
Par ailleurs, par défaut les images sont affichées à leur taille réelle dans une page web. Même s’il est tout à fait possible de redimensionner une image en HTML (ou en CSS), il est préconisé de limiter les redimensionnements d’image pour les raisons suivantes :
- Réduire la taille d’une image en HTML pour l’utiliser implique que vous auriez pu utiliser une image plus petite donc moins lourde ;
- Augmenter la taille d’une image en HTML risque d’afficher une image pixellisée de moindre qualité ;
- Le redimensionnement nécessite un traitement du navigateur.
Pour les raisons évoquées précédemment, il est donc préférable de préparer ses images avec un logiciel adapté afin de les optimiser avant leur utilisation dans une page web.
Format des images
Toujours dans un souci d’optimisation du poids des fichiers, il est recommandé de ne pas mettre n’importe quel format d’image dans une page web. C’est également une question de compatibilité avec les navigateurs qui doivent pouvoir les lire. En effet, tous les formats d’image ne sont pas adaptés. Une image .bmp par exemple n’est pas compressée et son poids sera beaucoup trop important.
Chaque format d’image ayant ses propres caractéristiques, que nous n’aborderons pas dans ce cours, il faudra veiller à faire un choix adapté en fonction de la destination de l’image. Les formats recommandés sur Internet sont :
- .jpg / .jpeg (très bon rapport poids/qualité) ;
- .gif (limité à 256 couleurs, supporte la transparence) ;
- .png (bonne qualité supporte la translucidité) (recommandé par le W3C) ;
- .svg (image vectorielle, très légère).
Insérer une image
L’insertion d’image s’effectue avec la balise <img> qui est une balise autofermante ou orpheline. Ce qui signifie qu’il ne faut pas ajouter de balise de fermeture : <img></img>
En observant le code html de certaines pages, vous rencontrerez peut-être, la syntaxe <img /> qui permet de fermer les balises orpheline et qui correspond à l’ancienne norme utilisée avant html 5.
La balise <img> contiendra toujours l’attribut src qui permet de définir la source de l’image à afficher comme dans l’exemple ci-dessous :
<img src="ours.jpg">
La ligne ci-dessus permet donc d’insérer le fichier ours.jpg dans la page HTML.
Source de l’image
La source src d’une image utilise les mêmes règles que l’attribut href des liens hypertextes. Il s’agit donc d’indiquer l’emplacement de l’image. Si l’image se trouve dans le même dossier que la page web sur laquelle vous souhaitez l’insérer la syntaxe sera donc :
<img src="nom-image.extension"> <!-- Exemple --> <img src="ourg.jpg">
Si l’image se trouve dans un sous-dossier, la syntaxe seront donc :
<img src="nom-dossier/nom-image.extension"> <!-- Exemple --> <img src="images/ourg.jpg">
Avant d’utiliser une image, il faut veiller à plusieurs choses :
- Nommez les images correctement :
- Pas d’accents ou de caractères spéciaux, pas d’espaces ;
- Évitez les noms à rallonge source d’erreur ;
- Attention à ne pas modifier l’extension de fichier.
- Rangez correctement les images dans le dossier racine de votre site (de préférence dans un sous-dossier explicite comme img ou images).
Il est également possible d’insérer des images distantes en utilisant un lien absolu, mais cette méthode est déconseillée car vous ne maitrisez pas nécessairement les modifications éventuelles de l’image distante :
<img src="http://adresse-site/nom-image.extension"> <!-- Exemple --> <img src="https://juliencrego.com/images/ourg.jpg">
Une erreur très courante consiste à utiliser des références absolues locales. Cette erreur peut être induite par certains logiciels qui permette de faire glisser des images directement dans la page. Si vous vous retrouvez avec ce type de référence, vous devez impérativement les corriger car elles ne fonctionneront que sur l’ordinateur sur lequel elles ont été créées :
<img src="file:/c:/Users/Julien/Pictures/ours.png">
Attribut alt
L’attribut alt permet d’insérer une description sur une image. La description en question doit être la plus informative possible tout en ne dépassant pas les soixante caractères. Il s’agit de décrire le contenu de l’image qui sera utilisé dans deux cas de figure :
- Le texte sera lu par les synthèses vocales utilisées par les mal-voyants, il s’agit donc d’un point essentiel pour l’accessibilité de votre page web ;
- Le texte s’affichera si il y a un problème avec votre image (image introuvable).
<img src="images/ours.jpg" alt="Ours blanc sur la banquise">
Cet attribut est également recommandé pour le améliorer votre référencement dans les moteurs de recherche.
Insérer une légende
Les éléments <figure> et <figcaption>, apparues en HTML5, permettent d’ associer une légende à une image.
L’élément <figure> est un conteneur, dans lequel il est possible d’intégrer d’autres éléments de natures diverses comme des images <img>, des tableaux <table>, du code <code>, etc. L’élément <figcaption> en tant qu’enfant de <figure> permet de lui associer une légende.
<figure> <img src="ours.jpg" alt="Ours blanc sur la banquise" /> <figcaption>Un ours polaire</figcaption> </figure>
Sauf mention contraire*, l'article Images en HTML et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.