Il existe deux manières principales d'ajouter une image dans une page Web.
img/. C'est ce que l'on va voir par la suite.
img src="images/yeti.jpg" alt="Le Yeti" width="320" height="340" /
img/src : Le chemin de l'imagealt : Le nom alternatif de l'imagewidth et height : La largeur et la hauteur de l'image
Lorsque l'on fournit les tailles des images, le fureteur peut réserver l'espace à l'écran pour chaque image, et l'affichage se fait plus en douceur.
Une grande image (du genre 1000 pixels sur 1000 pixels) affichée avec des dimensions inférieures (comme 100 pixels sur 100 pixels), oblige le fureteur à télécharger un fichier trop lourd inutilement et à recalculer les pixels pour un affichage optimal.
Inversement, une petite image (disons 10 sur 10) paraîtra pixélisée si elle est affichée dans ces mêmes dimensions. (Exemple illustré ici)
Parfois, un page Web montre une petite vignette de la photo donnant accès, en cliquant dessus, à une version plus grande. On doit alors utiliser 2 fichiers de dimensions différentes. Ex.: yeti.jpg et yeti_petit.jpg
Avant, le HTML n'offrait pas de façon simple d'ajouter une légende au bas d'une image. Il fallait combiner celles-ci à l'aide de balises div.
Avec le HTML5, nous disposons maintenant des balises figure et figcaption
figureimg src="…" … /figcaption…/figcaption/figureLa différence n'est pas majeure, mais c'est mieux que rien. Ces balises n'ajoutent pas de mise en page, le CSS qui permettra se disposer notre image à notre guise. Et encore une fois, le référencement n'en sera que meilleur si vous utilisez correctement ces balises particulières.