Insérer une photo dans une page Web
Il est possible d'insérer des photos dans une page Web en utilisant l'élément image (img).
L'élément image
Dans la section précédente, on a vu comment utiliser l'élément a pour accéder à une photo. Ce qu'on veut faire ici, c'est insérer la photo dans une page Web, parmi d'autres éléments.
Pour ce faire, on utilise la balise auto fermante image, <img />. Cette balise a deux attributs obligatoires : src qui est l'URL de l'image, et
alt, un texte qui donne une description de l'image. Voici un exemple :
<img src="../images/Berners-Lee.jpg" alt="Tim Berners-Lee" />
<p>Ceci est une photo de Timothy John Berners-Lee, le principal inventeurs du Web.</p>
<p><small>Photo : Paul Clarke, via Wikimedia Commons.</small></p>
Et voici ce que le navigateur va afficher :
Ceci est une photo de Timothy John Berners-Lee, le principal inventeurs du Web.
Photo : Paul Clarke, via Wikimedia Commons.
HTML5 n'a pas d'attributs qui permettent de positionner l'image. On verra plus tard comment faire en utilisant le CSS.
La balise <img /> a deux attributs supplémentaires qui
permettent de dimensionner l'image : width et height pour la largeur et la hauteur de l'image. Par défaut, leurs valeurs
sont les dimensions de l'image en pixels et, avec ces valeurs, l'image sera affichée à environ 96 pixels par pouce¹. Si on spécifie d'autres valeurs, l'image affichée sera
redimensionnée en proportion. Par exemple :
<img src="../images/Berners-Lee.jpg" alt="Tim Berners-Lee" width="112" height="168" />
<p>La même photo en deux fois plus petit.</p>
donnera une image deux fois plus petite, car les dimensions réelles de l'image sont 224 pixels x 336 pixels et 112 = 224/2, 168 = 336/2 :
La même photo en deux fois plus petit.
À noter que si la largeur et la hauteur spécifiées ne sont pas dans le même rapport que la largeur et la hauteur réelles, l'image affichée sera déformée :
<img src="../images/Berners-Lee.jpg" alt="Tim Berners-Lee" width="168" height="168" />
<p>La même photo, mais déformée.</p>
La même photo, mais déformée.
¹ Pour plus de détails, voir la section « Unités de longueur » du chapitre sur CSS.
Des image dans des liens
Il est aussi possible d'utiliser une image plutôt qu'un texte comme contenu d'un hyperlien. Voici un exemple :
<p>Télécharger le fichier texte : <a href="../docs/test.txt" download><img src="../images/TXT.png" alt="" /></a>.</p>
<p>Télécharger le fichier PDF : <a href="../docs/test.pdf" download><img src="../images/PDF.png" alt="" /></a>.</p>
Et voici ce que le navigateur va afficher :
Télécharger le fichier texte : 
.
Télécharger le fichier PDF : 
.
Pour télécharger les fichiers, vous devez cliquer sur les icônes.
Icônes : RRZEicons et Mimooh, via Wikimedia Commons.
Recommandations
Les formats d'images supportés par le Web sont JPEG (.jpg, .jpeg), PNG (.png) et GIF (.gif). En raison de ses algoritmes de compression très performants, le JPEG est normalement utilisé pour les photos. Pour les graphiques, le PNG (qui permet entre-autres la transparence) est à favoriser, car il est de qualité supérieurs au GIF. La principale qualité de ce dernier est de permettre des images animées.
Il est préférable d'inclure la largeur et la hauteur de la photo, même si celle-ci est affichée à sa grandeur réelle. Le navigateur sait alors d'avance quel espace réserver pour l'image, ce qui permet à la page Web de s'afficher plus vite.
Exercice
Insérez la photo de Sir Berners-Lee dans simulateur HTML. Changez les dimensions pour voir ce qui arrive.