Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 1.9. Les images dans les pages HTML

Syntaxe

Pour insérer une image dans une page HTML, il convient d'utiliser la balise <img>. L'attribut src="" contient le chemin vers l'image. Voici un exemple :

<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png">

L'exemple précédent affiche l'image ci-dessous :

Tester l'exemple en ligne

Redimensionner l'image

Il est possible de contraindre les dimensions de l'image grâce aux attributs width="" et height="". Les paramètres sont spécifiés en pixels. Voici un exemple d'utilisation du redimensionnement d'images :

<h3>Image originale :</h3>
<img src="https://friconix.com/png/fi-xwluxm-file-html-wide.png">

<h3>Redimensionnement en hauteur (100 pixels) :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" height="100px">

<h3>Redimensionnement en largeur (50 pixels) :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" width="50">

<h3>Redimensionnement en largeur et hauteur :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" width="200" height="150px">

L'exemple ci-dessous affiche les images redimensionnées :

Tester l'exemple en ligne

Notez que cette syntaxe tend à disparaitre au profit des feuilles de style CSS que vous aborderez plus tard.

Titre de l'image

Il est possible d'associer un titre à l'image. Ce titre sera affiché dans le navigateur lorsque l'utilisateur passe la souris sur l'image. Le titre est spécifié avec l'attibut title="". Voici un exemple :

<img src="https://example.com/image.png" title="L'icône HTML du site Friconix">

Passez la souris sur l'image ci-dessous :

Tester l'exemple en ligne

Texte alternatif

Il arrive que le navigateur ne puisse pas afficher l'image pour diverses raisons :

Le chemin est érroné
L'image n'est pas disponible
Le format d'image n'est pas supporté
- ...

Dans ce cas, il est possible de préciser un texte alternatif qui sera affiché à la place de l'image. Ce texte est spécifié avec la balise alt="".

<img src="https://example.com/image.png" alt="Icône d'un fichier HTML">

Le code ci-dessus affiche une image avec un text alternatif dans la page HTML :

Tester l'exemple en ligne

Ce texte pourra également être affiché sur les terminaux brailles destinés aux personnes visuellement déficientes.

Notez que certains moteurs de recherche utilisent le texte alternatif et le titre pour obtenir une description textuelle de l'image qui servira au référencement. Spécifier les attributs alt et title permet d'améliorer le référencement de la page.

Cours 1.8 Sommaire Cours 1.10

Voir aussi

Dernière mise à jour : 16/11/2019