outils et langages numériques
intégrer une image
mis à jour en février 2026
outils et langages numériques
Avant d'aborder la mise en place d'une image dans votre page HTML, il est indispensable de revenir sur les cinq formats (matriciel et vectoriel) majoritairement convoqués: .avif, .webp, .jpg, .gif, .png et .svg.
le format .avif
Le format .avif (pour AV1 Image File Format) est un format de fichier image ultra-moderne basé sur l'algorithme de compression vidéo AV1. Sa mission est simple: offrir la meilleure qualité d'image possible avec le poids de fichier le plus faible possible.
Pourquoi ce format d'image est-il une révolution?:
- - pour sa compression record: il est environ 50% plus léger que le .jpeg et 20% plus performant que le .webp, à qualité visuelle égale.
- - pour sa qualité HDR (pour High Dynamic Range, technique qui exprime les détails du contenu des scènes très claires et très sombres) : à l'inverse du .jpeg limité à 8 bits, l'avif supporte la profondeur de couleur 10 et 12 bits. Le résultat: des dégradés parfaits, sans
bandes
de couleur. - - pour sa polyvalence: il gère la transparence (comme le .png) et les animations (comme le .gif, mais en bien moins lourd).
Pour enregistrer un fichier au format AVIF avec l'application Adobe Photoshop, vous devez passer par Fichier > Enregistrer sous… ou Fichier > Enregistrer une copie….
Pour enregistrer un fichier animé (.gif) au format .avif vous pouvez passer par l'outil en ligne GIF to AVIF converter….
côté html
<img src="exemple.avif" alt="exemple d'une image au format .avif">
exemple d'une image au format sans perte (.png), .jpeg et .avif avec leurs poids respectifs >
voir dans une autre fenêtre
le format .webp
Créé par Google en 2010, le format WebP réduit la taille et accélère le temps de chargement des images en ligne sur Internet. Ce format permet aux sites web d’afficher des images de qualité avec un poids de fichiers inférieur (avec une compression 25 à 30% supérieure) aux formats traditionnels comme PNG et JPEG.
Pour enregistrer un fichier au format WebP avec l'application Adobe Photoshop, vous devez passer par Fichier > Enregistrer sous… ou Fichier > Enregistrer une copie….
L'utilisation de ce format, dédié web, invite néanmoins à quelques précautions:
- - ce format de fichier étant principalement conçu pour Internet, il n’est pas utile si vous utilisez des images hors ligne.
- - certains navigateurs plus anciens, comme Internet Explorer, ne prennent pas aussi bien en charge les images WebP, en dépit de la grande compatibilité de ce format.
- - même une faible compression peut réduire la qualité d’image, ce qu’il ne faut pas négliger si vous travaillez avec des photographes professionnels et des images de grande qualité.
côté html
<img src="exemple.webp" alt="exemple d'une image au format .webp">
exemple d'une image au format sans perte (.png), .jpeg et .webp > voir dans une autre fenêtre
le format .jpeg
Ce format est une méthode de compression avec pertes très utilisée pour enregistrer des images de type photographique riches en détails et en couleurs et dont le poids doit être le plus réduit possible.
Pour optimiser le poids de l'image, la compression destructive passe par la suppression des informations secondaires (non visibles à l'œil nu) comme, par exemple, les pixels avec des nuances proches.
Dans ce format, les couleurs sont codées sur 8 bits par couche (256 couleurs) ce qui produit au final un résultat de 16.777.216 couleurs pour les trois couches RVB. Attention, la transparence n'est pas supportée.
Pour enregistrer une image au format JPEG sous Adobe Photoshop, vous devez passer par Fichier > Exportation > Enregistrer pour le Web ou activer le raccourci clavier: ALT+MAJ+CTRL+S (Windows) ou ALT+MAJ+CMD+S .
En conclusion, c'est un bon choix pour les images compressées avec perte. C'est le format le plus populaire et parmi les mieux pris en charge. Néanmoins, on préférera le format PNG si l'exigence se place sur une meilleure fidélité à l'image (mais attention cela engage un gain de poids considérable).
côté html
<img src="exemple.jpg" alt="Exemple d'image au format JPEG">
exemple d'une image au format .jpeg
exemple de compression destructive
le format .gif
Ce format d'image utilise une compression non destructive grâce à l'indexation des couleurs qui autorise un nombre de nuances pouvant aller de 2 à 256 maximum, choisies dans une vaste palette de 16.777.216 nuances (RVB 24 bits). Avec ce format, la transparence peut être supportée.
Pour enregistrer une image au format GIF sous Adobe Photoshop, vous devez passer par Fichier > Exportation > Enregistrer pour le Web ou activer les touches du clavier: ALT+MAJ+CTRL+S (Windows) ou ALT+MAJ+CMD+S .
Pour conclure, ce format est un bon choix pour les images simples et les animations. On préfèrera toutefois le format PNG-8 pour les images statiques sans pertes de compression.
côté html
<img src="exemple.gif" alt="exemple d'une image au format .gif">
exemple de compression non destructive avec une palette à 16 couleurs
exemple d'animation au format .gif
le format .png
C'est un format de fichiers graphiques qui supporte la compression de données sans perte, spécialement adapté pour publier des images simples comprenant des aplats de couleurs. Il existe en deux versions le PNG-8 et le PNG-24 et sa particularité tient dans le fait qu'il prend en charge les illustrations avec arrière-plans transparents ou semi-transparents.
Ce format peut être préféré au JPEG lorsqu'on a besoin d'une meilleure précision (plus de détails dans l'image) ou de transparence.
Le format .png 8 bits (256 valeurs de couleurs)
Le PNG-8 est une bonne alternative au format GIF. Il fonctionne a peu près de la même manière avec une palette de 256 couleurs mais offre l'avantage de gérer l'opacité. Il ne supporte pas les animations et il est donc idéal pour des images avec des formes simples et une palette de couleur limitée comme des icônes ou des logos.
côté html
<img src="exemple.png" alt="exemple d'une image au format .png 8bits">
exemple de .png 8bits (survoler l'image)
Le format .png 24 bits (16,7 millions de valeurs de couleurs)
Le PNG-24 combine la nature non destructive du GIF avec les couleurs du JPEG. Même si on a accès à une palette illimité de couleur on évitera d'utiliser le PNG-24 pour sauvegarder des photographies car le poids de l'image sera beaucoup trop volumineux. On l'utilisera dans les mêmes cas que le PNG-8 si on a besoin d'un nombre conséquent de couleur et une gestion de l'opacité.
côté html
<img src="exemple.png" alt="exemple d'une image au format .png 24bits">
exemple de .png 24bits (survoler l'image)
le format .svg
C'est un format de fichier vectoriel optimisé pour le web qui autorise les redimensionnements à volonté sans perte de qualité, ce qui en fait le choix idéal pour les éléments d'interface utilisateur: les icônes, les boutons, les logos, les illustrations ou les diagrammes qui nécessitent de s'afficher précisément quelle que soit l'échelle.
côté html
<img src="exemple.svg" alt="exemple d'une image au format .svg">
exemple d'un logotype en .svg à 100% et 1000% (survoler l'image)
le même en .png - perte de qualité/pixellisation (survoler l'image)
l'élément html <img>
6.1 - …les fondamentaux
Pour intégrer une image simple dans une page HTML, vous utiliserez l'élément <img>. Cet élément (de type orphelin - pas de balise fermante) exige au moins un attribut pour se réaliser: src (souvent appelé par son nom entier: source) qui contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative.
Exemple d'une url relative
côté html
<img src="img/firefox_nightly.png">côté navigateur
côté html
<img src="http://dnmade23.free.fr/dnmadetrois/img/firefox_nightly.png">exemple d'une url absolue
Cet élément <img src="…"> peut s'étoffer d'attributs comme la largeur, la hauteur, le titre, le texte alternatif (descriptif) et la légende d'une l'image. Ces attributs vous sont présentés ci-après.
6.2 - …la largeur et la hauteur
Vous pouvez vous servir des attributs width et height pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur d'une image de différentes manières. Sur Macintosh, par exemple, vous pouvez utiliser la fonction « Lire les informations » en faisant un clic droit sur l'image ou utiliser le raccourci clavier: CMD+i.
côté html
<img src="firefox_nightly.png"width="400px"height="400px">exemple
Ces attributs width et height sont à convoquer dans le fichier .css (feuille de styles) externe et non pas inline comme sur l'exemple ci-dessus! uniquement valable pour la démonstration.
6.3 - …le texte alternatif
Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans le cas où celle-ci ne peut être affichée.
Ce texte alternatif est indispensable pour les occasions suivantes:
- L'usager·ère est une personne qui présente un trouble de la vue et utilise une machine à « lire » le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs (17% de la population mondiale présentent des troubles visuels).
- Vous pouvez avoir envie de fournir du texte nécessaire aux moteurs de recherche en mettant en relation le texte alt avec des requêtes de recherche.
côté html
<img src="firefox_nightly.png" alt="le logotype tout bleu et vert du navigateur internet Firefox Nightly, créé en 2017">exemple
6.4 - …le titre de l'image
Avec l'attribut title vous pouvez ajouter un titre à l'image pour fournir un supplément d'information si nécessaire mais ce n'est pas essentiel. Accessoirement, cela affiche une info-bulle sur l'image survolée.
Cet attribut n'est pas un remplaçant acceptable pour l'attribut alt. Il est impératif d'éviter de dupliquer la valeur de l'attribut alt dans un attribut title pour la même image. En effet, un tel doublon entraînera les lecteurs d'écran à annoncer deux fois la description, ce qui pourra être une source de confusion.
côté html
<img src="firefox_nightly.png" alt="le logotype tout bleu et vert du navigateur internet Firefox Nightly, créé en 2017"
title="le logotype de Firefox">exemple
côté navigateur
résultat dans un navigateur. Passez la souris sur l'image et attendez…
6.5 - …légender une image
Cette dernière option, pour compléter les attributs nécessaire à l'image, est une solution qui consiste à utiliser les éléments HTML5 <figure> et <figcaption> pour afficher une légende sous l'image.
Exemple
côté html
<figure><img src="firefox_nightly.png"alt="le logotype tout bleu et vert du navigateur internet Firefox Nightly, créé en 2017"title="le logotype de Firefox"><figcaption>Quel merveilleux logotype !</figcaption>
</figure>exemple
côté navigateur
l'image d'arrière-plan
Une image d'arrière-plan peut être spécifiée pour presque tous les éléments HTML <body>, <header>, <section>, <article>, <div>, <p>, <footer> et pour l'insérer dans une page HTML, la propriété CSS background-image sera convoquée pour définir une ou plusieurs images comme arrière(s)-plan(s).
Pour la pertinence des démonstrations à venir, je vais privilégier une, ou des, image(s) de petite taille. Pour en comprendre les enjeux, des notions en CSS (feuille de style) sont requises.
7.1 - …première situation
L'image de fond est unique et couvre, tel un motif (en répétition - valeur par défaut), la surface de l'élément <article> contenant un texte.
côté html
<article class="fond-un">
<h3>Le caniche</h3>
<p>Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage <q> en lion </q> qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.</p>
</article>côté css
.fond-un {background-image: url("caniche.png");
}côté navigateur
Le caniche
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.
7.2 - …deuxième situation
Deux images de fond sont convoquées et couvrent, tel un motif (en répétition - valeur par défaut), la surface de l'élément <article> contenant un texte.
Attention: dans le style CSS, entre les deux propriétés url("…") il y a une virgule et non pas un point virgule !
côté html
<article class="fond-deux">
<h3>Le caniche</h3>
<p>Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage <q> en lion </q> qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.</p>
</article>côté css
.fond-deux {background-image: url("caniche.png"),url("os.png");
}côté navigateur
Le caniche
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.
Nous constatons, avec cet exemple, que l'image os.png passe derrière caniche.png car elle est en seconde position dans le CSS. L'exemple présenté ci-dessous inverse le processus:
côté css
.fond-trois {
background-image: url("os.png"),url("caniche.png");
}côté navigateur
Le caniche
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.
7.3 - …troisième situation
L'image de fond (en répétition - valeur par défaut) est accompagnée d'un dégradé de fond en arrière-plan et l'ensemble couvre la surface de l'élément <article> contenant un texte.
Pour cette situation la propriété linear-gradient sera convoquée et accompagnée des deux valeurs de couleur (couleurs web, hexadécimale, rgb ou rgba) utilisées pour réaliser le dégradé.
côté html
<article class="fond-quatre">
<h3>Le caniche</h3>
<p>Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage <q> en lion </q> qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.</p>
</article>côté css
.fond-quatre {
background-image: url("caniche.png"),linear-gradient(greenyellow, cyan);
}côté navigateur
Le caniche
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.
7.4 - …quatrième situation
L'image de fond est unique mais ne couvre pas la surface de l'élément <article> contenant un texte.
Pour cette situation, la propriété background-repeat est convoquée et sera complétée de la propriété no-repeat.
côté html
<article class="fond-cinq">
<h3>Le caniche</h3>
<p>Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage <q> en lion </q> qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.</p>
</article>côté css
.fond-cinq {
background-image: url("caniche.png");background-repeat: no-repeat;
}côté navigateur
Le caniche
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.
7.5 - …cinquième et dernière situation
L'image de fond est unique mais recouvre seule toute la surface de l'élément Pour cette situation, la propriété côté html côté css côté navigateur Le caniche Nous pouvons constater, ici, que l'image n'apparaît pas dans sa totalité (dans la hauteur) car les proportions du conteneur (texte) ne sont pas identiques à celle de l'image. Le navigateur, de fait, cale l'image en top, par défaut. - La première centre l'image (mais il en manque toujours un peu en haut et en bas) en ajoutant au CSS les attributs et propriétés suivantes côté navigateur Le caniche - La seconde centre l'image (mais en la déformant aux proportions du conteneur texte) en ajoutant au CSS l'attribut et les propriétés suivantes côté navigateur Le caniche<article> contenant un texte.background-size est convoquée et sera complétée de la propriété cover.<article class="fond-six"><h3>Le caniche</h3><p>Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage <q> en lion </q> qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.</p>
</article>.fond-six {
background-image: url("caniche.png");background-size: cover;
}
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.
Voici deux alternatives:background-position-x: center; et background-position-y: center;:
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.background-size: 100% 100%;:
Le caniche est une race de chien. C'était autrefois un chien adapté à la chasse au canard dans l'eau, ce qui explique le toilettage en lion
qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet. Régulièrement utilisé dans différents domaines, comme animal de cirque, chien de chasse, chien-guide d'aveugle, chien d'agility ou chien de recherche, il est très polyvalent et est classé parmi les trois races canines les plus intelligentes. Sa durée de vie varie entre 12 et 19 ans.
l'image responsive
L'utilisation, la plus simple, d'une image responsive est celle de convoquer dans le HTML une image qui est à la plus grande taille possible et de pouvoir la réduire automatiquement à la dimension du viewport (surface d'affichage d'un média). C'est une approche encore utilisée aujourd'hui et dans la plupart des feuilles de style, vous trouverez le CSS suivant:
côté html
img {
max-width: 100%;
}Voir une démo. Pour la pertinence de la démonstration, la manipulation est à réaliser sur un écran d'ordinateur!
Néanmoins, cette approche présente des inconvénients évidents:
- l'image peut être affichée à une taille beaucoup plus petite que sa taille réelle (ce qui est un gaspillage de bande passante);
- vous pouvez envisager que le rapport hauteur/largeur de l'image sur le mobile soit différente de celle affichée sur un ordinateur de bureau (il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur ordinateur de bureau);
- en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille.
Malheureusement, les situations présentées ci-dessus ne peuvent pas être réalisées par une simple réduction de la taille d'une image.
Les réponses se trouvent dans l'utilisation de l'élément picture et de ses attributs media et srcset. Vous pouvez fournir plusieurs tailles et le navigateur choisira l'image la plus appropriée pour chaque dispositif, chaque média.
Exemple:
côté html
<picture>
<source media="(max-width: 300px)" srcset="outils/media-queries/image_300w.jpg">
<source media="(max-width: 600px)" srcset="outils/media-queries/image_600w.jpg">
<source media="(max-width: 900px)" srcset="outils/media-queries/image_900w.jpg">
<source media="(max-width: 1200px)" srcset="outils/media-queries/image_1200w.jpg">
<source media="(max-width: 1600px)" srcset="outils/media-queries/image_1600w.jpg">
<img src="outils/media-queries/image_1600w.jpg" alt="un exemple d'une image au format jpeg">
</picture>Testez en redimensionnant le viewport (pour la pertinence de la démonstration, ce test est à réaliser sur un écran d'ordinateur!):
Pour tester ces spécificités des éléments img et picture dans le responsive design, consultez les pages dédiées à l'attribut srcset et au descripteur de densité de pixels, dpr (device pixel ratio). Pour la pertinence de la démonstration, ces tests sont à réaliser sur un écran d'ordinateur!
Très pratique: pour connaître la résolution, le dpr et d'autres informations sur votre device (appareil) de consultation, vous pouvez utiliser le support en ligne de mydevice.