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