Insérer des images dans des pages avec l’élément HTML img

Nous allons pouvoir insérer des images au sein de nos fichiers HTML en utilisant l’élément HTML img représenté par une balise orpheline <img>.

Dans cette leçon, nous allons nous intéresser aux différents formats d’image (jpeg, png, etc.) et allons voir comment insérer une ou plusieurs images dans nos pages en HTML.

Nous discuterons également de la notion d’accessibilité du web à tous ainsi que de la mise en forme des images.

 

Un point sur les différents formats d’image

Comme vous le savez certainement, vous pouvez enregistrer vos images sous différents formats. Les formats les plus utilisés sont :

  • Le JPG ou JPEG ;
  • Le PNG ;
  • Le GIF ;
  • Le BITMAP.

Chaque format possède ses propres spécificités et il faut donc faire bien attention au choix du format lorsqu’on enregistre une image.

Le format JPEG (pour Joint Photographic Expert Group), ou plus communément JPG est un format qui permet généralement de compresser le poids d’une image par dix tout en conservant une très bonne qualité. Généralement, nous choisirons ce format pour enregistrer des photos.

Le PNG (Portable Network Graphic) est un format qui a été créé à l’origine pour remplacer le format GIF. Le grand intérêt de ce format est qu’il gère la transparence. Celui-ci a un très bon taux de compression tout en conservant une bonne qualité d’image. Nous utiliserons généralement ce format pour enregistrer nos images qui ne sont pas des photographies.

Le GIF (Grahpic Interchange Format) est un vieux format d’images que je ne recommande plus d’utiliser aujourd’hui, sauf dans le cas d’images animées.

Finalement, le BITMAP (ou BMP) est un format qui possède une très bonne prise en charge par tous les navigateurs et éditeurs. Cependant, la compression des images est assez mauvaise, ce qui donne au final des images très lourdes et donc longues à charger. Pour cette raison, je vous déconseille également d’utiliser le BITMAP pour enregistrer vos images.

 

Insérer des images en HTML

L’insertion d’images en HTML va se faire au moyen de l’élément HTML img. Cet élément est représenté par une balise orpheline.

Au sein de l’élément img, nous allons obligatoirement devoir préciser deux attributs : les attributs src et alt.

L’attribut src (pour source) va prendre comme valeur l’adresse de l’image (adresse relative ou absolue) tandis que l’attribut alt (pour alternative) va contenir un texte alternatif décrivant l’image. Ce texte va être affiché si l’image ne peut pas l’être pour une raison ou pour une autre, et est également très utile pour les non-voyants ou les mal voyants qui vont pouvoir « lire » notre image grâce à leurs lecteurs particuliers.

J’insiste ici sur l’importance de l’attribut alt : le web a été créé avec l’idée d’accessibilité à tous et il est donc de notre devoir de tout faire pour rendre chacune de nos pages lisibles pour tous et particulièrement pour les gens souffrant de déficiences.

Voyons maintenant comment fonctionne l’insertion d’images en pratique. On va commencer par enregistrer une image dans le même dossier que notre page HTML. Pour ma part, mon image s’appelle « sunset.png » et possède une largeur et une hauteur de 150 pixels.

Une nouvelle fois, choisissez un nom d’image sans espace ni caractère spécial (pas d’accent notamment). Cela évitera des problèmes potentiels.

L’attribut src va fonctionner de la même manière que l’attribut href pour les liens. Ainsi, si vous enregistrez votre image dans un dossier différent de votre page HTML, pensez bien à en tenir compte dans la valeur donnée à src.

Utilisation de l'élément img pour insérer une image en HTML

On insère une image en HTML grâce à l'élément img et ses attributs src et alt

Comme vous pouvez le voir, notre image s’affiche bien à sa taille d’origine, c’est-à-dire 150*150 pixels pour moi. Dans l’absolu, on essaiera de redimensionner l’image à priori (avant téléchargement sur serveur) pour éviter de consommer des ressources serveurs inutilement. En effet, une image plus grosse de base va demander plus de ressources et de temps à charger car celle-ci va être plus lourde.

Pour redimensionner une image à posteriori, nous avons deux façons de faire : soit en utilisant le CSS, soit en ajoutant des attributs width et height dans notre élément img en HTML.

Bien évidemment, nous préférerons toujours pour des raisons sémantiques et de maintenabilité du code dans la mesure du possible effectuer ces opérations en CSS. Cependant, dans certaines situations particulières, nous serons obligés de le faire en HTML et il est donc bon de savoir le faire.

 

Insérer des images provenant d’autres sites en HTML

Comme je vous l’ai précisé, on peut aussi préciser une adresse absolue comme valeur pour notre attribut src.

Par exemple, si je souhaite afficher une image provenant d’un autre site, j’utiliserai évidemment une adresse absolue, c’est-à-dire que j’indiquerai l’URL complète de la ressource image que je souhaite afficher en valeur de mon attribut src.

Vous pouvez essayer avec n’importe quelle image sur le web, cela fonctionnera. Faites cependant attention à bien récupérer l’URL complète de l’image ainsi qu’aux droits d’auteur ! Notez également qu’il est généralement déconseillé d’utiliser des images provenant d’autres sites car si ces sites les suppriment, elles ne s’afficheront plus non plus sur le vôtre.

 

Redimensionner une image en HTML

On va pouvoir ajouter des attributs facultatifs pour modifier l’affichage de la plupart des éléments HTML. Cependant, répétons-le, ce n’est jamais la façon recommandée de faire les choses pour des raisons de séparation de rôle des langages (raisons de sémantique) et de maintenabilité du code.

Le HTML est un langage de balisage qui ne doit normalement servir qu’à indiquer l’identité des différents contenus d’une page. Pour mettre en forme ces contenus, il faut utiliser dans la mesure du possible le CSS qui est là pour ça.

Cependant, dans certaines situations, nous n’allons pas avoir accès au CSS ou il va être beaucoup plus compliqué d’appliquer des styles à nos images en CSS qu’en HTML.

Dans ces cas-là, nous allons déjà pouvoir utiliser les attributs width (« largeur ») et height (« hauteur ») au sein de notre élément img pour modifier la largeur et la hauteur de l’image. Ces attributs peuvent prendre des valeurs absolues (en px généralement) ou relatives (en % dans la majorité des cas) ou des mots clefs comme auto.

Généralement, on ne modifiera que l’une des deux dimensions de l’image (largeur ou hauteur, mais plutôt la largeur car modifier la hauteur peut rapidement poser des problèmes d’ergonomie) afin que l’image se redimensionne d’elle-même et conserve ses proportions.

On pourra éventuellement préciser la valeur auto pour la deuxième dimension si on a peur qu’une taille ait déjà été définie quelque part dans le code.

Gestion de la taille d'une image en HTML avec des attributs width et height

En ne précisant que la largeur width de l'image en HTML, la hauteur s'ajuste automatiquement

Notez que dans le cas où on indique des valeurs en pourcentage, le pourcentage donné représente l’espace que l’image doit prendre par rapport à la taille de son conteneur (son élément parent le plus proche, c’est-à-dire l’élément dans lequel il est directement inclus dans le code) et n’est pas un pourcentage de la taille de base de l’image !

On insère une image en HTML avec l'élément img et les attributs src et alt

Utilisation de valeurs en pourcentage pour définir la taille d'une image HTML

En utilisant des valeurs en pourcentage, notre image HTML occupera une partie de son conteneur

 

Mettre en forme nos images en CSS

Nous utiliserons de préférence le CSS pour mettre en forme nos images, que ce soit pour les redimensionner ou pour les afficher d’une façon ou d’une autre ou à un endroit ou à un autre dans nos pages.

Redimensionner une image en CSS

Pour redimensionner une image en CSS, nous allons utiliser les propriétés width (pour la largeur) et height (pour la hauteur).

Ici, nous ne préciserons généralement que la valeur de l’une de ces deux propriétés. En procédant comme cela, l’autre dimension sera calculée automatiquement afin de ne pas casser le rapport largeur/hauteur de base de l’image.

Insertion de 4 images identiques en HTML

Modification de la taille d'une image HTML en CSS

La taille de nos éléments HTML img a bien été modifiée en CSS

Ici, je me contente d’insérer 4 fois la même image, ce qui est tout à fait autorisé puis je redimensionne mes images en CSS avec la propriété width, tout simplement.

Notez que des espaces se créent automatiquement entre chacune des images, à droite et en dessous. Cela est dû au fait que nos images sont des éléments de type inline.

L’espace à droite provient de mon code : les éléments inline vont conserver une espace s’il y en a au moins une dans le code. C’est le cas dans mon exemple puisque je suis allé à la ligne dans mon code à chaque nouvelle déclaration d’un élément img. Pour annuler cela, on peut par exemple faire flotter nos images ou les déclarer à la suite dans le code.

L’espace en bas provient du fait que les images sont alignées par défaut sur la baseline, c’est-à-dire sur une ligne imaginaire sur laquelle sont alignés les différents caractères de texte. Les navigateurs ajoutent toujours par défaut une espace sous la baseline pour laisser de la place pour les caractères qui passent dessous comme les « g », « p » ou « y » par exemple. Pour annuler cela, on peut utiliser la propriété vertical-align et définir un autre type d’alignement vertical.

Définir le type d’affichage et le positionnement des images en CSS

La plupart des navigateurs appliquent par défaut un display : inline aux images même si certains d’entre eux préfèrent appliquer un display : inline-block.

Ces deux types d’affichage font que nos images vont venir se positionner en ligne et se placer à côté d’autres contenus si elles en ont la place.

Nous avons différents moyens pour annuler ce comportement et faire que nos images s’affichent sur leur propre ligne. Les deux solutions les plus évidentes vont être soit d’enfermer chaque image à l’intérieur d’un élément de type block comme un élément p ou div par exemple ou d’appliquer directement un display : block en CSS à nos images.

Les éléments HTML img s'affichent inline par défaut

Modification du type d'affichage d'une image avec la propriété CSS display

On définit l'affichage de nos images avec display block en CSS

 

Poids des images et performances

Au début de cette leçon, j’ai beaucoup parlé de « poids des images ». Toute image possède un poids généralement exprimé de kilo-octets. Plus une image est lourde, plus elle va demander de ressources de la part du serveur et du navigateur pour être chargée.

En effet, lors de la mise en ligne de votre site web, vous allez louer un espace serveur chez un hébergeur afin d’y envoyer (« héberger ») toute l’architecture de votre site.

Le problème est que vous disposez d’un espace serveur et d’un débit limités. Il vous faudra donc déjà faire attention à ne pas le saturer avec des images inutilement lourdes.

Ensuite, selon la qualité de la connexion de vos utilisateurs et du navigateur utilisé, certaines images, si elles sont trop lourdes, risquent de mettre longtemps à s’afficher complètement.

Cela aura un effet négatif sur votre site puisque des visiteurs vont le quitter plutôt que de patienter. Cette problématique est véritablement à considérer aujourd’hui avec l’essor de l’Internet mobile car les mobiles disposent de moins de puissance que les ordinateurs et également d’une connexion plus lente.

Pour conserver des poids d’images minimaux tout en vous assurant des images d’une qualité convenable, on pensera déjà à les enregistrer au bon format et également à les recadrer à la bonne taille avant de les envoyer sur votre serveur. Ainsi, elles consommeront moins de ressources lors de leur affichage.

 

Media et sémantique : les éléments figure et figcaption

Les éléments figure et figcaption vont nous aider à marquer sémantiquement du contenu média comme des images, de l’audio ou des vidéos.

En effet, il est très difficile pour un navigateur de savoir « de quoi parle » ou « ce que représente » votre image, votre fichier audio ou vidéo sans plus de détail.
On va utiliser l’élément HTML figure pour indiquer qu’une image, une piste audio ou vidéo n’est pas strictement décorative, mais sert à la compréhension générale de notre page web. On n’utilisera donc pas cet élément si nos contenus ne sont là que pour habiller la page.

Notez qu’un élément figure peut englober plusieurs images ou d’autres types de contenus média (audio, vidéo, etc.).

On va ensuite utiliser l’élément figcaption à l’intérieur de figure pour accoler une légende au contenu de notre élément figure. Cette légende va être utile pour les personnes souffrant de déficiences et qui ne peuvent pas comprendre nos médias ainsi que pour les moteurs de recherche et navigateurs.

Par défaut, la légende va s’afficher sous les médias. Nous allons bien évidemment pouvoir mettre en forme les éléments figure et figcaption en CSS si on le souhaite.

Utilisation des éléments figure et figcaption avec nos éléments img en HTML

On met en forme nos images en CSS

On ajoute une légende à nos images en HTML avec les éléments figure et figcaption

Laisser un commentaire