Comment insérer une image en HTML
Enrichissez vos sites web en y ajoutant des images. Vous pouvez insérer des images dans des fichiers HTML avec la balise <img>, qui permet de spécifier l'emplacement de l'image sur Internet, sa hauteur et largeur, et un texte alternatif affiché si l'image ne charge pas ou si quelqu'un utilise un lecteur d'écran. Trois formats d'image courants sur le Web : GIF, PNG et JPEG.
Étape 1
Ouvrez le fichier HTML de la page web où vous voulez ajouter une image dans un éditeur de texte comme Notepad ou un logiciel de développement web.
Étape 2
Ajoutez une balise <img> au fichier. Placez-la après l'élément sous lequel vous voulez que l'image apparaisse quand le HTML s'ouvre dans un navigateur. La balise n'a pas de balise de fermeture séparée. Dans la balise, vous devez spécifier la source de l'image via l'attribut src. Si l'image est dans le même dossier que le HTML, tapez son nom et extension. Sinon, tapez l'URL complète de l'image.
Étape 3
Ajoutez l'attribut alt à votre balise. En HTML5, l'attribut alt est obligatoire. Utilisez-le pour décrire l'image au cas où elle ne chargerait pas. Si l'image ne charge pas, le navigateur affiche le texte après l'attribut alt. De plus, l'attribut alt est crucial pour les lecteurs d'écran utilisés par les malvoyants. Le logiciel lit le texte de l'attribut alt pour que la personne puisse entendre ce qu'il y a dans l'image même sans la voir.
Étape 4
Spécifiez les dimensions de l'image en pixels avec les attributs height et width. Sans dimensions, le navigateur ne sait pas combien d'espace réserver pendant le chargement. Résultat : chargement saccadé, le texte charge d'abord laissant un petit espace, puis tout saute quand l'image charge et l'espace s'agrandit. Avec les dimensions, le navigateur réserve exactement l'espace nécessaire.
Étape 5
Testez votre code en ouvrant le fichier HTML dans un navigateur pour vérifier que l'image s'affiche au bon endroit.
Astuce
Utilisez CSS pour positionner une image à gauche ou droite ou faire habiller le texte autour. Exemple : style="float:left;" ou style="float:right;" dans la balise.
Si vous ne connaissez pas à la fois hauteur et largeur, utiliser l'un seul des deux attributs suffit. Vous pouvez aussi utiliser CSS pour les dimensions : pour une image 100x100 px, style="height:100px;width:100px;".
Rendez l'image cliquable en plaçant la balise <img> dans une paire de balises <a href>. Exemple pour lier une image vers Facebook :
<a href="https://facebook.com"><img src="image.jpg" alt="Facebook"></a>
Avertissement
N'utilisez pas l'attribut alt pour booster le SEO. Les moteurs de recherche savent depuis longtemps que certains webmasters bourrent l'attribut alt de mots-clés, ils ignorent donc ce texte.