Image et média en HTML : Guide pratique pour débuter

Quand on découvre le HTML, on commence souvent par afficher du texte. C’est rassurant, logique, presque scolaire. Puis très vite, une question arrive : comment afficher une image en HTML, une vidéo, ou même un son ? C’est souvent à ce moment-là que le web commence vraiment à prendre vie.

• Comprendre comment intégrer des images et des médias en HTML sans les utiliser “au hasard”, pour créer des pages lisibles et professionnelles dès vos débuts.
• Èviter les erreurs courantes qui ralentissent un site ou nuisent à l’accessibilité, afin d’offrir une meilleure expérience à tous les visiteurs, quel que soit leur écran ou leur situation.
• Acquérir une vision durable du rôle des images et médias sur le web, pour faire des choix pertinents qui améliorent à la fois la compréhension, le référencement et la qualité globale de vos pages.

Une page web sans image ni média, c’est un peu comme un livre sans illustrations : ça fonctionne, mais il manque quelque chose. Les images attirent l’œil, les vidéos expliquent plus vite que de longs paragraphes, et l’audio ouvre encore d’autres possibilités. Comprendre comment tout cela fonctionne en HTML est donc une étape essentielle.

Dans ce chapitre dédié aux images HTML et aux médias, vous allez partir de zéro. L’objectif n’est pas seulement de savoir “quoi écrire”, mais surtout de comprendre pourquoi on l’écrit, comment le navigateur interprète chaque balise, et comment éviter les erreurs classiques quand on débute.

Pourquoi les images et médias sont essentiels en HTML

Sur le web, le visuel joue un rôle énorme. Une image HTML bien choisie peut faire comprendre une idée en une seconde. Une vidéo intégrée correctement peut remplacer dix minutes de lecture. Pourtant, ces éléments ne sont pas décoratifs : ils font partie intégrante du contenu.

En HTML, les images et les médias ne sont pas de simples fichiers collés dans la page. Ils sont décrits, intégrés et interprétés grâce à des balises précises. C’est cette description qui permet au navigateur d’afficher correctement le contenu, mais aussi aux moteurs de recherche et aux lecteurs d’écran de comprendre ce qu’il représente.

C’est là que beaucoup de débutants font une erreur : ils pensent que l’image HTML est juste “un truc visuel”. En réalité, elle a un rôle sémantique, technique et même SEO.

La balise <img> : la base de l’image HTML

En HTML, une image s’affiche grâce à la balise <img>. Cette balise est particulière : elle ne possède pas de balise fermante. Tout se passe dans ses attributs.

Voici l’exemple le plus simple possible :

<img src="chat.jpg" alt="Un chat roux allongé sur un canapé">

L’attribut src indique le chemin vers l’image. Cela peut être un fichier local ou une URL distante. Sans cet attribut, aucune image HTML ne peut s’afficher.

L’attribut alt, lui, est souvent négligé par les débutants. Pourtant, il est fondamental. Il décrit l’image avec des mots. Si l’image ne charge pas, ce texte s’affiche. Mais surtout, il est lu par les lecteurs d’écran et analysé par les moteurs de recherche. Pour le SEO, notamment sur le mot-clé image HTML, c’est un élément clé.

La première fois qu’on oublie le alt, on ne voit aucun problème à l’écran… jusqu’au jour où l’on teste un lecteur d’écran ou que Google Search Console signale des images sans description. À ce moment-là, on comprend que l’image ne sert pas qu’à “faire joli”.

Comprendre les chemins d’image

Quand une image HTML ne s’affiche pas, le problème vient très souvent du chemin. Le navigateur ne “devine” rien : il suit exactement ce que vous lui indiquez.

Si votre fichier HTML est dans un dossier et votre image dans un autre, il faut être précis :

<img src="images/logo.png" alt="Logo du site">

Ici, le navigateur va chercher un dossier images au même niveau que le fichier HTML. Une simple erreur de nom, une majuscule oubliée ou un mauvais dossier, et l’image disparaît. C’est le même principe que pour un lien vers un page interne de votre site web.

C’est pour cela qu’en HTML, on insiste autant sur la rigueur. Une image HTML bien intégrée commence toujours par un chemin correct.

Les dimensions d’une image HTML

Par défaut, le navigateur affiche l’image à sa taille réelle. Vous pouvez toutefois contrôler son affichage avec les attributs width et height.

<img src="photo.jpg" alt="Paysage de montagne" width="300">

Ici, seule la largeur est définie. Le navigateur ajuste automatiquement la hauteur pour conserver les proportions. C’est une bonne pratique quand on débute, car elle évite les images déformées.

Il est important de comprendre que ces attributs ne modifient pas le poids du fichier. Une image HTML trop lourde restera lourde, même si elle est affichée en petit. C’est un point essentiel pour les performances, que nous approfondirons plus loin dans ce guide.

Donner du sens avec <figure> et <figcaption>

Une image HTML n’est pas toujours seule. Parfois, elle a besoin d’un contexte, d’une légende, d’une explication. C’est là qu’interviennent les balises <figure> et <figcaption>.

<figure>
  <img src="schema-html.png" alt="Schéma de la structure HTML">
  <figcaption>Structure simplifiée d’une page HTML</figcaption>
</figure>

La balise <figure> indique que l’image fait partie du contenu principal. La légende <figcaption> apporte une information complémentaire. Ce n’est pas du texte décoratif : c’est du sens.

Pour le référencement et l’accessibilité, cette structure est bien plus riche qu’une simple image HTML posée au milieu d’un paragraphe.

Images décoratives ou informatives

Toutes les images HTML n’ont pas le même rôle. Certaines apportent une information essentielle, d’autres sont purement décoratives.

Une image informative doit toujours avoir un alt descriptif. À l’inverse, une image décorative peut avoir un alt vide :

<img src="fond.png" alt="">

Cela indique aux lecteurs d’écran que l’image peut être ignorée. C’est un détail, mais il montre à quel point le HTML est pensé pour tous les usages, pas seulement pour l’affichage visuel.

Premiers pas vers les médias : vidéo et audio

Le HTML moderne ne se limite pas à l’image HTML classique. Il permet aussi d’intégrer des vidéos et des fichiers audio sans plugin externe.

Voici un exemple simple de vidéo :

<video src="presentation.mp4" controls>
  Votre navigateur ne supporte pas la vidéo.
</video>

L’attribut controls affiche les boutons de lecture. Le texte à l’intérieur de la balise sert de message de secours si le navigateur ne peut pas lire la vidéo.

Pour l’audio, le principe est identique :

<audio src="musique.mp3" controls>
  Votre navigateur ne supporte pas l’audio.
</audio>

Ces balises fonctionnent comme l’image HTML : elles décrivent un média, mais laissent au navigateur le soin de l’afficher correctement.

Optimiser l’image HTML pour de bonnes performances

Quand on débute, on pense rarement aux performances. Pourtant, une image HTML mal optimisée peut ralentir tout un site. Et ce ralentissement ne vient pas du HTML lui-même, mais du poids des fichiers chargés par le navigateur.

Une image affichée en grand écran peut peser plusieurs mégaoctets. Sur une connexion lente ou un mobile, cela se ressent immédiatement. C’est pour cette raison que le HTML propose plusieurs mécanismes pour aider le navigateur à charger les images de façon intelligente.

Pour aller plus loin : Le format d’image WebP

Le chargement différé avec loading="lazy"

Par défaut, le navigateur charge toutes les images HTML dès l’ouverture de la page. Même celles situées tout en bas, invisibles à l’écran. Cela peut sembler logique, mais c’est souvent inutile.

L’attribut loading="lazy" permet de dire au navigateur : “charge cette image seulement quand elle devient visible”.

<img src="galerie.jpg" alt="Galerie de photos" loading="lazy">

Pour un débutant, c’est presque magique. Le code est simple, mais l’impact est réel. Les pages se chargent plus vite, surtout quand elles contiennent beaucoup d’images HTML.

En savoir plus sur le Chargement d’image différé

Images responsives : s’adapter à tous les écrans

Aujourd’hui, une image HTML peut être affichée sur un écran de téléphone, une tablette ou un grand écran 4K. Charger la même image partout n’a pas de sens.

C’est pour cela que le HTML propose l’attribut srcset. Il permet de fournir plusieurs versions d’une même image, et de laisser le navigateur choisir la plus adaptée.

<img 
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  alt="Vue d’une ville au coucher du soleil">

Ici, le navigateur analyse la taille de l’écran et la résolution, puis choisit automatiquement l’image la plus appropriée. C’est une évolution majeure dans la gestion de l’image HTML moderne.

Au début, cela peut sembler complexe. Pourtant, le principe est simple : vous offrez des choix, et le navigateur décide.

L’attribut src : l’image par défaut

src="photo-800.jpg"

Cet attribut indique l’image principale.

C’est celle que le navigateur utilisera :

• si srcset n’est pas compris
• ou si le navigateur est ancien
• ou comme image de secours

On peut dire que src est la solution de repli. Même quand on utilise srcset, src reste obligatoire.

Beaucoup de débutants pensent que srcset remplace src. Ce n’est pas le cas.

L’attribut srcset : plusieurs images au choix

srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"

C’est ici que la magie opère. srcset permet de proposer plusieurs versions de la même image, avec des tailles différentes. Vous ne forcez pas un choix : vous laissez le navigateur décider.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Comment lire srcset simplement

Chaque partie suit toujours la même logique :

nom-de-l-image largeur

Exemple détaillé :

photo-400.jpg 400w

Cela signifie :

“Cette image fait environ 400 pixels de large”

Ensuite :

photo-800.jpg 800w

“Cette image fait environ 800 pixels de large”

Et enfin :

photo-1600.jpg 1600w

“Cette image fait environ 1600 pixels de large”

Le w veut dire width, donc largeur.

Comment le navigateur choisit la bonne image

C’est un point très important à comprendre. Le navigateur analyse plusieurs choses :

• la largeur réelle de l’écran
• la résolution (écran classique ou retina)
• l’espace disponible pour afficher l’image

Ensuite, il se dit :

“Quelle image est suffisante pour être nette, sans être trop lourde ?”

• Sur un téléphone, il choisira souvent photo-400.jpg.
• Sur un ordinateur portable, photo-800.jpg.
• Sur un grand écran, photo-1600.jpg.

Résultat :

• chargement plus rapide
• moins de données consommées
• meilleure expérience utilisateur

Et tout cela sans JavaScript, uniquement avec de l’HTML.

Pourquoi c’est essentiel pour les débutants

Quand on débute, on a tendance à utiliser une seule image partout. Le problème, c’est que :

• une grande image ralentit les mobiles
• une petite image devient floue sur grand écran

Avec srcset, vous évitez ce piège dès le départ. Vous apprenez à utiliser l’image HTML comme un contenu adaptable, pas comme un simple fichier collé dans la page.

L’attribut alt : bien plus qu’un texte de secours

alt="Vue d’une ville au coucher du soleil"

Cet attribut décrit l’image avec des mots. Il sert à plusieurs choses :

• si l’image ne charge pas, le texte s’affiche
• les lecteurs d’écran lisent cette description
• les moteurs de recherche comprennent l’image

Une bonne règle simple :

si l’image disparaît, le texte alt doit suffire à comprendre ce qu’elle montrait

Ici, la description est claire, naturelle et utile. C’est exactement ce qu’on attend d’une image HTML bien intégrée.

Ce que ce code vous apporte concrètement

Grâce à cette balise :

• votre image HTML s’adapte automatiquement aux écrans
• votre site est plus rapide
• votre contenu est plus accessible
• votre code est déjà professionnel, même en tant que débutant

Vous n’avez rien à “calculer”, rien à “deviner”. Vous donnez simplement des options, et le navigateur fait le travail.

La balise <picture> : aller encore plus loin

Quand les besoins deviennent plus précis, la balise <picture> entre en jeu. Elle permet de changer d’image selon la taille de l’écran ou le format supporté.

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Illustration principale du site">
</picture>

Dans cet exemple, si le navigateur supporte le format WebP, il l’utilise. Sinon, il bascule sur le JPEG. L’image HTML devient alors plus légère sans casser la compatibilité.

Ce genre de détail fait toute la différence entre un site amateur et un site professionnel, même si le HTML utilisé reste simple.

Formats d’image HTML : bien les choisir

Tous les formats d’image ne se valent pas. En HTML, le choix du format influence directement la qualité et la performance.

Le JPEG est idéal pour les photos. Il compresse bien, mais perd un peu en qualité. Le PNG est parfait pour les images avec transparence, mais il est souvent plus lourd. Le SVG, lui, est un format vectoriel, idéal pour les logos et icônes, car il reste net à toutes les tailles. Le WebP combine souvent le meilleur des deux mondes.

Comprendre cela permet de faire de meilleurs choix dès le départ, sans changer une ligne de code HTML.

Intégrer une vidéo correctement en HTML

Revenons à la vidéo. Une balise <video> peut faire bien plus que lire un fichier.

<video controls width="600" poster="miniature.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Votre navigateur ne supporte pas la vidéo.
</video>

L’attribut poster affiche une image avant le lancement de la vidéo. C’est une image HTML à part entière, souvent négligée, mais très utile pour donner envie de cliquer.

Le fait de proposer plusieurs formats permet d’assurer une compatibilité maximale. Là encore, le navigateur choisit.

L’audio en HTML : simple mais puissant

La balise <audio> fonctionne sur le même principe.

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Votre navigateur ne supporte pas l’audio.
</audio>

Même si l’audio est moins visible qu’une image HTML, il reste un média à part entière. Podcasts, bruitages, messages vocaux : le HTML moderne gère tout cela sans difficulté.

Médias externes et intégration propre

Il arrive souvent que vous souhaitiez intégrer une vidéo YouTube ou un lecteur externe. Dans ce cas, on utilise généralement une balise <iframe>.

<iframe 
  src="https://www.youtube.com/embed/XXXX"
  title="Vidéo de présentation"
  width="560"
  height="315">
</iframe>

Même si ce n’est pas une image HTML au sens strict, le principe reste le même : vous décrivez un contenu externe que le navigateur affiche dans votre page.

Il est important de toujours ajouter un title, pour l’accessibilité et la compréhension du contenu.

Accessibilité : penser à tous les utilisateurs

Une image HTML sans alternative textuelle est invisible pour certaines personnes. Une vidéo sans sous-titres est inutilisable pour d’autres. Le HTML offre les outils, mais c’est au développeur de les utiliser correctement.

Pour les images, le alt reste la base. Pour les vidéos, il existe les pistes de sous-titres via <track>. Même si cela dépasse parfois le niveau débutant, comprendre l’intention est essentiel : le web est fait pour être accessible.

Les erreurs fréquentes quand on débute

Beaucoup de débutants oublient de fermer leurs balises <source>, se trompent de chemin ou utilisent des images trop lourdes. D’autres placent du texte important directement dans une image HTML, la rendant invisible pour le référencement.

Ces erreurs sont normales. Elles font partie de l’apprentissage. L’important est de comprendre que chaque image HTML est un contenu à part entière, pas un simple décor.

Maîtriser les images et les médias en HTML, ce n’est pas seulement apprendre quelques balises. C’est comprendre comment le navigateur lit une page, comment un utilisateur la perçoit, et comment un moteur de recherche l’analyse. Une image HTML bien intégrée raconte une histoire, guide le regard et améliore l’expérience globale.

Avec le temps, vous réaliserez que le HTML est plus subtil qu’il n’y paraît. Derrière chaque image, chaque vidéo, il y a une intention. En prenant l’habitude de réfléchir à cette intention dès le départ, vous construirez des pages plus propres, plus rapides et plus humaines.

Et surtout, n’oubliez jamais ceci : le web n’est pas qu’une affaire de code. C’est une affaire de communication. Les images HTML et les médias sont là pour transmettre un message. À vous de choisir le bon, au bon endroit, pour la bonne personne.

Chapitre suivant : Liste et tableau

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr