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

Insérer une image en HTML permet d'illustrer le contenu d'une page web, de faciliter la compréhension de l'information et d'améliorer le référencement naturel. Le CMS gratuit de HubSpot simplifie cette gestion grâce à un éditeur visuel intégré. Sans CMS, l'insertion d'une image en HTML repose sur la balise <img src> et la maîtrise de ses attributs.

Définir la syntaxe de base de la balise <img>

La balise <img> s'insère dans le fichier HTML à l'endroit précis où l'image doit s'afficher. Contrairement à la plupart des éléments HTML, elle constitue un élément vide : aucune balise de fermeture n'est requise. La syntaxe minimale valide est la suivante : <img src="URL" alt="description">. L'attribut src désigne la source de l'image, tandis que l'attribut alt, bien que facultatif sur le plan technique, reste indispensable pour l'accessibilité et le référencement naturel.

Choisir la source de l'image : URL externe ou fichier local

La valeur de l'attribut src accepte deux types de sources. La première est une URL absolue pointant vers une image hébergée sur un serveur tiers (ex. : https://banque.images.com/photo.jpeg). La seconde est un chemin relatif vers un fichier image stocké dans le répertoire du projet (ex. : images/photo.jpeg). Dans les deux cas, il convient de vérifier que le format du fichier est pris en charge par les navigateurs web. Les formats les plus courants compatibles sont : .jpg, .jpeg, .png, .gif, .svg et .webp. Ce dernier format, largement supporté par les navigateurs récents, est aujourd'hui recommandé pour sa compression supérieure à qualité égale.

Respecter les droits d'utilisation des images

La plupart des images disponibles en ligne sont soumises aux droits d'auteur : elles appartiennent exclusivement à leur créateur et ne peuvent être réutilisées sans autorisation. Pour utiliser un visuel sans risque, trois conditions permettent d'y procéder légalement : en être soi-même le créateur, disposer d'une autorisation écrite du titulaire des droits, ou s'assurer que le contenu appartient au domaine public. Les banques d'images libres de droits (Unsplash, Pexels, Pixabay, etc.) constituent une alternative simple et sécurisée pour illustrer une page web.

Quels attributs permettent de paramétrer l'affichage d'une image en HTML ?

L'attribut src — seul attribut indispensable

L'attribut src est le seul attribut sans lequel la balise <img> ne fonctionne pas. C'est lui qui indique au navigateur où récupérer le fichier image à afficher. La source peut être l'URL d'une image hébergée sur un serveur distant, ou le chemin vers un fichier enregistré localement dans le répertoire du projet HTML. Exemple de code pour insérer une image issue d'une banque d'images :

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

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

L'attribut alt — optimiser le texte alternatif pour l'accessibilité et le SEO

L'attribut alt permet d'associer une description textuelle à l'image. Il remplit trois fonctions essentielles : afficher un texte de remplacement lorsque l'image ne se charge pas, permettre aux lecteurs d'écran de vocaliser le contenu visuel pour les personnes malvoyantes, et transmettre des signaux sémantiques à Google Images pour améliorer le référencement naturel. Pour rédiger un attribut alt efficace, quelques bonnes pratiques s'appliquent : décrire précisément le contenu de l'image en moins de 125 caractères, intégrer naturellement le mot-clé principal sans suroptimisation, et éviter les formulations génériques comme « image de » ou « photo de ». Le nommage du fichier source avec des mots-clés pertinents renforce également l'indexation.

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

Les attributs width et height — dimensionner l'image sans dégrader les performances

Les attributs width et height définissent les dimensions d'affichage de l'image, exprimées en pixels ou en pourcentage. Au-delà du simple redimensionnement visuel, leur rôle est crucial pour les performances de chargement. En indiquant les dimensions dès le balisage HTML, le navigateur réserve l'espace nécessaire avant même que l'image soit téléchargée. Ce mécanisme évite le décalage de mise en page (layout shift), l'un des problèmes les plus pénalisants sur le plan des Core Web Vitals, mesuré par la métrique CLS (Cumulative Layout Shift). Il est donc recommandé de toujours renseigner les deux attributs simultanément, même lorsqu'un seul suffirait à l'affichage voulu.

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

L'attribut title — afficher une info-bulle au survol

L'attribut title permet d'associer une info-bulle à l'image : lorsque le visiteur pointe sa souris sur le visuel, un texte apparaît brièvement. Son usage reste optionnel et doit être distingué de l'attribut alt. Contrairement à ce dernier, title n'améliore pas l'accessibilité de manière significative, car les lecteurs d'écran ne le restituent pas systématiquement. Il peut toutefois enrichir l'expérience utilisateur en apportant un contexte complémentaire sur l'image. Exemple : <img src="photo.jpeg" alt="description" title="Information complémentaire">.

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

L'attribut loading="lazy" — différer le chargement des images hors écran

L'attribut loading="lazy" indique au navigateur de ne charger une image que lorsqu'elle est sur le point d'entrer dans le champ de vision du visiteur, plutôt qu'au chargement initial de la page. Ce mécanisme, appelé chargement différé ou lazy loading, réduit significativement le poids total chargé à l'ouverture d'une page, ce qui améliore les temps de chargement perçus et les performances globales. Sa mise en œuvre est simple : <img src="photo.jpeg" alt="description" loading="lazy">. À noter : il est déconseillé d'appliquer loading="lazy" à l'image principale visible dès le chargement (dite LCP), au risque de retarder son affichage et de dégrader la note Largest Contentful Paint.

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é.

• Qu'est-ce qu'une regex ?
• La structure d'une regex
• Des astuces d'utilisation
• Mémento sur les regex

Télécharger le guide En savoir plus Télécharger le guide

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

Télécharger

Comment insérer une image de fond en HTML ?

Utiliser la propriété CSS background-image

Insérer une image de fond en HTML permet d'afficher du texte ou d'autres éléments sur un visuel : l'image constitue l'arrière-plan d'une section ou de l'ensemble de la page, et non un élément distinct. Pour cela, il faut utiliser la propriété CSS background-image. Pour définir une image en arrière-plan de toute la page, la propriété s'applique sur l'élément body : background-image: url('url-source-de-l-image').

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

Contrôler le rendu avec background-repeat et background-size

Lorsque l'image de fond est trop petite pour couvrir l'écran, le navigateur la répète en mosaïque par défaut. Pour désactiver ce comportement, il faut ajouter background-repeat: no-repeat. Pour que l'image occupe toute la surface disponible sans déformation, la propriété background-size: cover est recommandée. Ces deux déclarations CSS combinées garantissent un rendu plein écran propre et cohérent, quel que soit le format d'affichage.

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

Appliquer une image de fond à un élément spécifique

La propriété background-image ne se limite pas à l'arrière-plan global de la page. Elle peut s'appliquer à n'importe quel élément HTML spécifique : un paragraphe, un titre, ou un bloc div. Dans ce cas, la déclaration CSS est intégrée directement au niveau de l'élément ciblé, soit en style en ligne (style="background-image: url('...')"), soit dans la feuille de styles. Cette approche permet de créer des zones visuellement distinctes au sein d'une même page.

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

Transformer une image en lien hypertexte avec la balise <a>

Il est possible de rendre une image cliquable afin de rediriger le visiteur vers une URL. Pour cela, il suffit d'envelopper la balise <img> dans un élément d'ancre <a>, comme suit : <a href="URL"><img src="URL" alt="description"></a>. Cette technique est fréquemment utilisée pour les bannières cliquables, les boutons illustrés ou les logos renvoyant vers la page d'accueil.

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

Comment les développeurs front-end optimisent-ils leurs images HTML pour les performances web ?

Choisir le bon format selon le contexte — WebP, AVIF, SVG ou PNG

Le choix du format d'image conditionne directement le poids des fichiers téléchargés et donc la vitesse de chargement des pages. Voici les principaux formats à connaître selon les usages :

Rendre les images responsives avec l'attribut srcset

L'attribut srcset permet de proposer plusieurs versions d'une même image selon la résolution de l'écran ou la taille de la fenêtre d'affichage. Le navigateur sélectionne automatiquement la version la plus adaptée, évitant ainsi de charger une image haute résolution sur un écran mobile de petite taille. Exemple de syntaxe :

<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, 800px" alt="description de l'image">

Dans cet exemple, le navigateur charge l'image à 400 px sur mobile et à 800 px sur les écrans plus larges. Cette approche améliore à la fois les performances et l'expérience utilisateur sur tous les types d'appareils.

Mesurer l'impact des images sur les Core Web Vitals

Les images influencent directement deux des métriques Core Web Vitals évaluées par Google : le LCP (Largest Contentful Paint) et le CLS (Cumulative Layout Shift). Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible de la page — souvent une image — et doit être inférieur à 2,5 secondes pour être considéré comme satisfaisant. Le CLS mesure la stabilité visuelle de la page pendant le chargement ; un décalage de mise en page provoqué par une image dont les dimensions ne sont pas précisées dégrade ce score. Pour diagnostiquer ces métriques, plusieurs outils sont disponibles : Google PageSpeed Insights, Lighthouse (intégré aux outils de développement Chrome) et la Search Console Google permettent d'identifier les images à optimiser en priorité.

Comment le CMS gratuit de HubSpot simplifie-t-il la gestion des images sur un site web ?

Insérer et gérer des images sans écrire de code

Le CMS de HubSpot propose un éditeur de pages en glisser-déposer (drag-and-drop) qui permet d'insérer des images directement depuis l'interface, sans toucher au code HTML. Une bibliothèque de fichiers intégrée centralise l'ensemble des médias uploadés, facilite leur réutilisation et évite la duplication des ressources. L'ensemble du processus — de l'import à l'insertion — s'effectue en quelques clics, ce qui rend la gestion des visuels accessible à des profils non techniques.

Optimiser automatiquement les images pour le SEO et les performances

Au-delà de l'insertion, le CMS de HubSpot applique automatiquement plusieurs optimisations techniques sur les images publiées : compression sans perte de qualité perceptible, adaptation du format selon l'appareil de l'internaute (WebP sur les navigateurs compatibles), et dimensionnement dynamique selon le contexte d'affichage. La plateforme propose également des champs dédiés à la rédaction du texte alternatif, contribuant ainsi au référencement naturel des images dans Google Images sans nécessiter de manipulation du code source.

Accéder au CMS gratuitement et faire évoluer son usage

Le CMS de HubSpot est disponible gratuitement, avec des fonctionnalités couvrant les besoins essentiels de création et de gestion d'un site web. Pour les entreprises souhaitant accéder à des fonctionnalités avancées — personnalisation poussée, tests A/B, rapports de performance détaillés — des offres payantes sont disponibles sur hubspot.fr/pricing. Cette architecture tarifaire permet de démarrer sans engagement et de faire évoluer la solution à mesure que les besoins du site progressent.

Pour aller plus loin dans votre stratégie, découvrez le CMS gratuit de HubSpot.