Afficher une image
Pour intégrer une image, on utilise la balise <img> accompagnée obligatoirement de l’attribut src qui contient le chemin vers l’image à afficher. Il est recommandé de toujours l’accompagner de l’attribut alt qui permet d’indiquer un texte alternatif au cas où l’image ne puisse pas être chargée. Elle peut également être complétée de l’attribut title pour afficher une information au survol.
<img src="logo_site.png" alt="Logo" title="Nom du site">
Avec HTML 5, la balise <img> a évolué pour permettre de définir au sein d’une même balise de multiples images de différentes résolutions. L’image la plus appropriée sera celle chargée. Le fonctionnement ressemble alors à celui des balises HTML 5 <audio> et <video>. On utilise les attributs srcset et sizes pour spécifier plusieurs images et les conditions pour indiquer laquelle doit être chargée et comment l’afficher.
L’attribut srcset permet de définir quelle image doit être chargée selon la taille du viewport, la résolution de l’écran. L’attribut sizes permet de fixer la largeur de l’image afficher, quelque soit celle sélectionnée par le navigateur selon le viewport / la résolution. La valeur est à spécifiée avec l’unité vw, le viewport width‘.
<!-- Image différente selon la résolution -->
<img src="image-small.png"
srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
alt="Image description">
<!-- Image différente selon la résolution, elle occupera 80% de largeur du viewport -->
<img src="image-small.png"
srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
sizes="80vw"
alt="Image description">Les formats de fichiers
Il existe de nombreux formats d’images mais tous ne sont pas adaptés au web. Les pages web devant se charger le plus vite possible, les formats non compressés sont notamment à éviter. Voici les formats de fichiers images recommandés pour le web :
| Format | Utilisation |
|---|---|
| ICO | Format utilisable pour le favicon (qui peut aussi être un PNG). |
| JPEG / JPG | Format compressé adapté pour des photos. A éviter pour des logos qui paraitront top dégradés. Ne gère pas la transparence. Contient 16 millions de couleurs. |
| PNG | Format compressé très adapté aux images et logos. Peut servir pour les photos mais moins compressé et donc plus lourd que le JPG. Gère la transparence. Contient 16 millions de couleurs. |
| APNG | Format identique au PNG mais qui gère des images animées. |
| GIF | Format adapté aux images animés. Contient 256 couleurs. |
| SVG | Format pour les images vectorielle. |
Les figures
Les figures permettent d’afficher avec une mise en valeur un élément qui vient illustrer le texte. Une figure peut être une image, un diagramme ou autre schéma, une citation, un extrait de code source…
En exemple :
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes">
<figcaption>Le logiciel <b>Bloc-Notes</b></figcaption>
</figure>Le tout doit donc être contenu dans la balise <figure> qui sert de conteneur. L’élément affiché peut être accompagné d’une légende qu’on indique dans la balise <figcaption> et qu’on peut placer avant ou après l’élément affiché. Une figure peut contenir plusieurs images, il suffit alors de mettre les balises <img> à la suite les unes des autres, mais aussi une vidéo, via la balise <video>.
Dans le cas d’une image, on la place généralement dans un paragraphe. Savoir si l’on doit utiliser ou non une figure dépend de l’importance qu’on souhaite donner à l’image et de son rôle au sein du texte.