Comment insérer une image en HTML avec img src ?

Insérer une image en HTML permet d'agrémenter une page web : le contenu est d'autant plus attractif lorsqu'il est illustré avec des éléments visuels. Imager l'information permet également au visiteur du site de mieux la comprendre et la retenir. Enfin, intégrer des images contribue à améliorer le référencement naturel du site. L'usage d'un CMS tel que le logiciel CMS gratuit de HubSpot, ou WordPress, facilite la tâche, puisqu'un simple bouton d'ajout d'image existe à cet effet. À défaut, insérer une image en HTML nécessite d'utiliser la balise < img src > et de maîtriser ses différents attributs.

• Comment insérer une image en HTML ?
• Comment insérer une image de fond en HTML ?

La balise est renseignée dans le fichier HTML, à l'endroit où l'image doit être affichée. À noter que la balise < img src > HTML est un élément vide : il ne nécessite pas de balise de fermeture.

L'attribut src

L'attribut src est le seul attribut indispensable pour faire fonctionner la balise HTML : il est nécessaire et suffisant. C'est en effet l'attribut source qui permet d'indiquer à la machine le chemin à suivre pour récupérer le fichier image à afficher sur la page web. La source est au choix : l'URL du site tiers d'où provient l'image, ou le nom du fichier image préalablement enregistré dans le répertoire ou un sous-répertoire de la page HTML. Au moment de choisir le visuel, quelques précautions sont indispensables :

• S'assurer que l'image est libre de droits : la plupart des images en ligne sont soumises aux droits d'auteur, c'est-à-dire qu'elles sont la propriété exclusive de leur auteur. Il est donc interdit de pointer la balise img src HTML vers une image hébergée par un site tiers, à moins d'y être préalablement autorisé. Pour utiliser un contenu visuel sans risque de sanction, il faut : en être le créateur, y être formellement autorisé, ou s'assurer que le contenu est dans le domaine public. C'est notamment le cas des visuels proposés par les banques d'images libres de droits.
• Vérifier que le format est pris en charge par les navigateurs web : il faut être attentif lorsque la source est un fichier image du répertoire de la page HTML. La plupart des formats usuels sont pris en charge. L'attribut src peut ainsi contenir un fichier .jpg, .jpeg, .png, .gif ou encore .svg.

Exemple de code pour insérer une image issue d'une banque d'images, avec la balise img src HTML, sous un paragraphe de texte :

< p >Voici le paragraphe de texte< /p >

< img src="https://banque.images.com/image-de-paragraphe.jpeg" >

L'attribut alt

L'attribut alt n'est pas nécessaire, mais recommandé.

• Cet attribut permet d'afficher du texte lorsque l'image ne se charge pas, quelle qu'en soit la raison.
• Le texte alternatif décrit l'image, permettant aux logiciels de lecture d'écran de traduire le visuel à l'oral à destination des visiteurs malvoyants.
• L'attribut alt permet à Google Images d'indexer le visuel sur les mots-clés renseignés, contribuant ainsi à améliorer le référencement naturel de la page web. À noter que dans le même objectif, il est judicieux de nommer le fichier image source à l'aide de mots-clés pertinents.

   

Pour insérer une image HTML avec un texte alternatif : < img src="https://banque.images.com/image-de-paragraphe.jpeg" alt="texte alternatif" >

Exemple d'affichage du texte alternatif lorsque l'image ne se charge pas parce que l'attribut source est mal renseigné :

See the Pen image-html_alt by HubSpot France (@HubSpot-France) on CodePen.

Les attributs height et width

Ces attributs permettent de changer la taille de l'image, en hauteur et en largeur. Pour redimensionner l'image en langage HTML, il faut renseigner les valeurs en pixels ou en pourcentage dans la balise img src : < img src="https://banque.images.com/image-de-paragraphe.jpeg" alt="texte alternatif" width=100% height=10% >.

Exemple de rendu visuel après rétrécissement de l'image :

See the Pen image-html_taille by HubSpot France (@HubSpot-France) on CodePen.

L'attribut title

L'attribut title permet d'animer l'image : tant que le visiteur du site pointe sa souris sur le visuel, une bulle d'information apparaît. Pour afficher du texte au survol de l'image : < img src="https://banque.images.com/image-de-paragraphe.jpeg" alt="texte alternatif" width=100% height=10% title="bulle d’aide" >.

Exemple de code HTML pour insérer une image avec une info-bulle :

See the Pen image-html_title by HubSpot France (@HubSpot-France) on CodePen.

Comment insérer une image de fond en HTML ?

Insérer une image de fond en HTML permet d'afficher du texte ou d'autres éléments sur un visuel : l'image n'est pas un élément distinct, elle est l'arrière-plan de tout ou partie du contenu de la page web. À cet effet, il faut utiliser la propriété CSS « background-image ».

Pour définir une image en arrière-plan de la page web avec CSS, il faut renseigner dans l'élément « body », c'est-à-dire le corps du document : background-image: url( 'url source de l'image' ).

Exemple :

See the Pen image-html_arriere-plan by HubSpot France (@HubSpot-France) on CodePen.

Dans l'exemple, l'image est trop petite pour s'afficher en pleine page. Pour éviter la répétition du visuel sous formes de vignettes, il faut ajouter avec CSS la commande « background-repeat: no-repeat ». Et pour que l'image prenne toute la place à l'écran, il faut utiliser : « background-size: cover ». Résultat :

See the Pen image-html_no-repeat-cover by HubSpot France (@HubSpot-France) on CodePen.

CSS permet également de définir une image de fond pour un élément spécifique de la page web : un paragraphe, un titre ou encore un élément « div ». Dans ce cas, la propriété CSS « background-image » est insérée au niveau de l'élément à imager. Illustration :

See the Pen image-html_element-div by HubSpot France (@HubSpot-France) on CodePen.

Autre possibilité : insérer une image cliquable, pour rediriger le visiteur vers une URL. Pour transformer l'image en hyperlien, il suffit de renseigner la balise img src HTML dans l'élément d'ancre, comme ceci : < a href="URL" > < img src="URL" > < /a >.

See the Pen image-html_hyperlien by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.