les outils et langages numériques intégrer une image
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 : .webp, .jpg, .gif, .png et .svg. Néanmoins, pour parfaire l'envie d'intégrer une image dans une page HTML, il est indispensable de vérifier le poids de celle-ci en passant par son optimisation via Adobe Photoshop > Image >Taille de l'image. Faire un rappel des formats d'exportation et de l'optimisation des images sous Adobe Photoshop.
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…. Petite précision à l'utilisation d'Adobe Photoshop : pour ouvrir et enregistrer des images au format WebP directement depuis la version 23.1 et versions antérieures, il vous suffit de télécharger et d’installer le plug-in WebPShop. Pour information, à la date du mois d'avril 2025, la version d'Adobe Photoshop est : 26.6.
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é.
Pour assurer la compatibilité d'une image au format Webp, il existe une alternative, au cas où le navigateur Internet ne peut afficher ce format d'image, qui envisage de convoquer, grâce à l'élément <picture>, un format d'image « de secours » (format PNG dans l'exemple ci-dessous) :
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).
Exemple d'une image au format JPEG
Exemple de compression destructive
Le format GIF (Graphics Interchange Format)
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.
Exemple de compression non destructive avec une palette à 16 couleurs
Exemples d'animation au format GIF
Le format PNG (Portable Network Graphics)
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
Le PNG-8 (pour 8 bits) 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.
Exemple de PNG-8 (survoler l'image)
Le format PNG-24
Le PNG-24 (pour 24 bits) 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é.
Exemple de PNG-24 (survoler l'image)
Le format SVG (Scalable Vector Graphics)
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.
Exemple d'un logotype en SVG à 100% et 1000% (survoler l'image)
Le même en PNG (perte de qualité - survoler l'image)
L'élément HTML <img>
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.
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.
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.
Ces attributswidthetheightsont à 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.
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.
Exemple
<img src="firefox_nightly.png" alt="le logotype tout bleu et vert du navigateur internet Firefox Nightly, créé en 2017">
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.
Exemple
<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">
Résultat dans un navigateur. Passez la souris sur l'image et attendez…
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
<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>
Résultat dans un navigateur
Quel merveilleux logotype !
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.
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.
Le code 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 « en lion » qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet.</p> <p>Régulièrement utilisé dans différents does, 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</p> <p>Sa durée de vie varie entre 12 et 19 ans.</p> </article>
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 does, 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.
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 !
Le code 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 « en lion » qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet.</p> <p>Régulièrement utilisé dans différents does, 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</p> <p>Sa durée de vie varie entre 12 et 19 ans.</p> </article>
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 does, 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 :
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 does, 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.
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é.
Le code 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 « en lion » qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet.</p> <p>Régulièrement utilisé dans différents does, 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</p> <p>Sa durée de vie varie entre 12 et 19 ans.</p> </article>
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 does, 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.
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.
Le code 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 « en lion » qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet.</p> <p>Régulièrement utilisé dans différents does, 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</p> <p>Sa durée de vie varie entre 12 et 19 ans.</p> </article>
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 does, 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.
5 - Cinquième et dernière situation
L'image de fond est unique mais recouvre seule toute la surface de l'élément <article> contenant un texte.
Pour cette situation, la propriété background-size est convoquée et sera complétée de la propriété cover.
Le code HTML
<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 « en lion » qui lui est souvent appliqué, et qui était fort à la mode à la Belle Époque, il descend du barbet.</p> <p>Régulièrement utilisé dans différents does, 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</p> <p>Sa durée de vie varie entre 12 et 19 ans.</p> </article>
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 does, 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 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. Voici deux alternatives :
- 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 background-position-x: center; et background-position-y: center; :
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 does, 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.
- 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 background-size: 100% 100%; :
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 does, 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 :
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 :
<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 seostudio.
