7. Les Images¶

Maintenant que vous savez gérer les textes, nous allons voir comment insérer des images dans notre contenu.

La balise <image>¶

L'insertion d'une image dans une page HTML se fait à l'aide de la balise orpheline <img>. Il n'y a donc pas de balise ouvrante ni fermante. Cette balise est toujours accompagnée de deux attributs :

• src="" : l'attribut permet de préciser la source de l'image à afficher. Il faut donc inscrire en valeur de cet attribut un lien relatif ou absolu avec l'image de son choix.
• alt="" : l'attribut indique le texte alternatif qui sera affiché si l'image ne se charge pas, peu importe la raison. Les robots des moteurs de recherche lisent également le contenu de cet attribut pour comprendre ce que l'image affiche à l'utilisateur. Enfin, les liseuses de site (pour les mal-voyant) lisent cet attribut pour remplacer les images.

<img src="images/mon_image.jpg" alt="Mon animal de compagnie">

Voilà mon image affichée :

Il est possible d'insérer différents types de fichiers dans la balise <img>. Voici les plus utilisés :

• .jpg ou .jpeg : Format d'image compressé avec pertes, idéal pour les photographies grâce à sa capacité à réduire la taille des fichiers tout en conservant une qualité visuelle acceptable.
• .png : Format d'image compressé sans perte, parfait pour les images nécessitant des arrière-plans transparents ou une qualité élevée. Bien adapté pour les images sans dégradés, comme les icônes de la marque de votre site.
• .svg : Format vectoriel basé sur XML, adapté pour les graphiques, icônes et logos, permettant un redimensionnement sans perte de qualité.
• .webp : Format moderne offrant à la fois des compressions avec ou sans pertes, optimisé pour le web avec des fichiers de petite taille.
• .avif : Format innovant avec une meilleure compression que le WebP ou JPEG, supportant les transparences et des couleurs HDR pour une qualité optimale.

Autres attributs¶

En plus des attributs src et alt, il est possible d'ajouter à notre balise plusieurs autres, que voici :

L'attribut 'title'

Tout comme sur la balise <a>, l'attribut title="" peut être utilisé sur la balise <img>. Il est aussi facultatif, mais toujours aussi utile et utilisé. La mécanique ne change pas, il s'utilise de la même manière :

<img src="images/mon_image.jpg" title="Mon animal de compagnie" alt="Mon animal de compagnie">

Les attributs 'height' et 'width'

Ces attributs permettent de définir une taille (largeur et longueur) à notre image :

<img src="images/mon_image.jpg" width="425" height="239" alt="Mon animal de compagnie">

Voilà notre image avec une taille définie par nos attributs :