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 ?
Pour insérer une image en HTML, il faut utiliser la balise < img > et préciser la source du fichier image avec l'attribut « src ». Le code HTML est le suivant : < img src="URL source" >. D'autres attributs, comme « alt », permettent de paramétrer de manière avancée l'affichage de l'image sur la page web.
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.
Comment insérer une image en HTML avec img src ?
Mis à jour :
Publié :
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 ?
Pour insérer une image en HTML, il faut utiliser la balise < img > et préciser la source du fichier image avec l'attribut « src ». Le code HTML est le suivant : < img src="URL source" >. D'autres attributs, comme « alt », permettent de paramétrer de manière avancée l'affichage de l'image sur la page web.
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 :
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é.
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.
Gagnez du temps dans la gestion de votre code et de vos données
Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.
Télécharger
Tous les champs sont obligatoires.
Merci d'avoir soumis le formulaire
Cliquez sur le lien pour accéder au contenu en tout temps
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.
Partager cet article sur les réseaux sociaux
Articles recommandés
Comment convertir un fichier HEIC en JPG ? Explications
Le guide complet pour insérer ses vidéos en HTML
Insérer des espaces en HTML : comment faire ?
Balise : comment insérer un saut de ligne en HTML
"input" en HTML : un élément essentiel pour capturer et traiter les données utilisateur
Comment créer un compte à rebours en HTML
Liste des 13 meilleurs éditeurs HTML
Qu'est-ce qu'un Iframe et comment l'intégrer dans une page ?
Qu'est-ce qu'un doctype et comment l'écrire ?
Comment centrer une image en CSS ?