Images

Après le texte, les images sont devenues un contenu incontournable du World Wide Web. Mais puisqu'un document Web n'est composé que de texte, les images y sont incorporées sous la forme de ressources embarquées, c'est-à-dire de fichiers externes référencés au sein du code HTML ou de la feuille de style CSS.

Formats d'images pour le Web

Il existe essentiellement deux formats d'image utilisables au sein de documents Web.

PNG (Portable Network Graphics)
Ce format développé par le W3C se décline en deux variantes. Le format PNG-8, limité à une palette de 256 couleurs au plus et un 1 seul niveau de transparence, est parfaitement adapté aux images dotées de peu de couleurs : logos, schémas, ... Le format PNG-24 quant à lui, utilise le modèle RGB pour exprimer la couleur de chaque pixel permettant ainsi d'utiliser une palette de 16 777 216 couleurs. Enfin le format PNG-24 permet de bénéficier de 65 536 niveaux de transparence. Les deux variantes utilisent un algorithme de compression non destructive permettant de conserver l'image intacte au prix d'une taille de fichier parfois importante.
JPEG (Joint Photographic Experts Group)
La différence entre le format JPEG et PNG-24 réside dans l'algorithme de compression. En effet, JPEG utilise un algorithme de compression destructive qui permet, lors de la sauvegarde, de régler le niveau de qualité. La qualité est inversement proportionnelle à la taille du fichier image. Ce format est particulièrement adapté aux photographies. Par contre, le format JPEG ne gère pas la transparence.

Le tableau ci-dessous résume les caractéristiques importantes de ces 3 formats d'image.

PNG-8 PNG-24 JPEG
Nombre de couleurs 28 = 256 224 = 16 777 216 224 = 16 777 216
Niveaux de transparence 1 216 = 65 536
Compression non destructive non destructive destructive
Extension de fichier .png .png .jpg ou .jpeg

Et le formar GIF dans tout ça ?

Le format GIF (Graphics Interchange Format), dont l'utilisation était protégée par un brevet jusqu'à peu, a été finalement remplacé par le format PNG-8 qui propose les mêmes fonctionnalités à l'exception des animations. En effet, le format GIF animé permet de stocker une succession d'images afin de créer un effet d'animation. Dans la mesure où il existe plusieurs façons de réaliser des effets d'animation avec HTML5 (avec les éléments video et canvas notamment) et les transitions CSS3, le format GIF est devenu obsolète.

le format GIF animé illustré par un exemple accablant
Figure 1. Un exemple accablant de GIF animé.

Optimisation de la taille du fichier image

Le volume des fichiers image embarqués dans un document Web peuvent avoir des conséquences importantes sur son temps de chargement. Il convient donc d'optimiser la taille des fichiers image tout en préservant leur qualité graphique.

Optimisation de la palette de couleurs

Une première technique d'optimisation consiste, avec le format PNG-8, à réduire le nombre de couleurs utilisées par l'image. Le tableau ci-dessous illustre l'utilisation de cette technique avec un fichier image rerprésentant un logo.

Image Nombre de couleurs Taille du fichier
logo LEGO en 256 couleurs 256 3 Ko
logo LEGO en 32 couleurs 32 2 Ko
logo LEGO en 4 couleurs 4 800 o

Optimisation de la qualité

La deuxième technique consiste, avec le format JPEG cette fois-ci, à régler le niveau de qualité afin de réduire la taille du fichier sans trop dégrader l'aspect visuel de l'image. Le tableau ci-dessous illustre l'utilisation de cette technique avec le même fichier représentant un logo. On s'aperçoit que le format JPEG n'est pas du tout adapté pour représenter des images avec de grands aplats de couleur.

Image Qualité Taille du fichier
logo LEGO au format JPEG avec une qualité de 100% 100 % 17 Ko
logo LEGO au format JPEG avec une qualité de 50% 50 % 5 Ko
logo LEGO au format JPEG avec une qualité de 0% 0 % 1 Ko

La même technique est appliquée à un fichier représentant une photographie. Cette fois-ci, la qualité peut-être diminuée sans que les dégradations générées par la compression destructive ne soient réellement visibles. Pour information, la version du même fichier au format PNG-24 apparaît dans la première ligne du tableau.

Image Qualité Taille du fichier
portrait en LEGO au format PNG 100 % (PNG) 36 Ko
portrait en LEGO au format JPEG avec une qualité de 100% 100 % 27 Ko
portrait en LEGO au format JPEG avec une qualité de 85% 85 % 12 Ko
portrait en LEGO au format JPEG avec une qualité de 25% 25 % 9 Ko
portrait en LEGO au format JPEG avec une qualité de 0% 0 % 7 Ko

Exercice 16

Optimiser les images ci-dessous à l'aide du logiciel de retouche d'images Gimp afin de générer des fichiers de taille minimale, incorporables dans un document Web.

Astuce : dans le logiciel Gimp, il est possible de générer automatiquement une palette de couleurs depuis le menu contextuel Image / Mode / Indexed.

Correction

Image informative ou décorative ?

Dans le respect d'une conception de documents Web visant à séparer le fond (contenu, structure) de la forme (présentation, disposition), il faut s'interroger sur la nature de l'image que l'on souhaite utiliser.

Éléments HTML

img

Élément HTML permettant d'incorporer un fichier image en tant que ressource embarquée.

src
Attribut permettant de renseigner l'emplacement du fichier image par le biais de son URI.
alt
Attribut correspondant au texte alternatif associé à l'image. Ce texte est utilisé lorsque l'image ne peut pas être visualisée : ressource indisponible, consultation du document à l'aide d'un lecteur d'écran pour les personnes non voyantes, ...

L'attribut alt est devenu obligatoire avec HTML5 pour des considérations d'accessibilité mais aussi pour améliorer le référencement des images au sein des moteurs de recherche.

width
Largeur de l'image exprimée en pixels.
height
Hauteur de l'image exprimée en pixels.

L'utilisation des attributs width et height est recommandée afin de permettre au navigateur de réserver une zone rectangulaire dans la fenêtre pour y afficher l'image lorsqu'elle est chargée. En effet, sans connaître les dimensions de l'image, le navigateur est obligé de modifier la mise en page du document Web après le chargement de l'image. Mais cette recommandation est inappropriée pour des documents Web dits responsive et dont la mise en page s'adapte automatiquement à la résolution de l'écran du navigateur Web.

ismap
Attribut acceptant les valeurs true ou false. Si l'attribut ismap est vrai et que l'image est un lien hypertexte, les coordonnées du pointeur de la souris lors du clic sont transmises à la page identifiée par l'attribut href du lien.
usemap
L'image utilise une carte de zones cliquables dont le nom, précédé du caractère #, coresspond à la valeur de l'attribut usemap.
<img src="content/img/lego.png" alt="Logo de LEGO">
Logo de LEGO

figure logo HTML5

Environnement de figure permettant d'associer une image (img) à une légende (figcaption).

figcaption logo HTML5

Légende d'une figure.

<figure>
  <img src="content/img/lego.png" alt="Logo de LEGO">
  <figcaption>Figure 1. Logo de la société LEGO<sup>&reg;</sup>.</figcaption>
</figure>
Logo de LEGO
Figure 1. Logo de la société LEGO®.

map

Carte de zones cliquables identifiée par la valeur de son attribut name.

area

Zone cliquable au sein d'une carte.

shape
Forme du contour de la zone cliquable. Cet attribut a pour valeur rect (rectangle), circle (circle) ou poly (polygone).
coords
Coordonnées du contour de la zone cliquable.
shape coords Commentaires
rect x1,y1,x2,y2 (x1,y1) : coordonnées du coin supérieur gauche
(x2,y2) : coordonnées du coin inférieur droit
circle x,y,r (x,y) : coordonnées du centre du cercle
r : rayon du cercle
poly x1,y1,x2,y2,...,xn,yn Liste des coordonnées (xi,yj) des n sommets du polygone
alt
Texte alternatif associé à la zone cliquable.
href
Destination du lien hypertexte représentée par son URI.
<img src="content/img/LEGO/LEGO_logo_indexed_256.png" alt="Logo de LEGO" usemap="#letters">
<map name="letters">
  <area shape="rect" coords="10,35,30,90" alt="Lettre L" href="http://fr.wikipedia.org/wiki/L_(lettre)">
  <area shape="poly" coords="108,37,98,38,92,43,88,56,84,72,84,83,92,88,102,88,111,81,118,65,121,53,117,40" alt="Lettre O" href="http://fr.wikipedia.org/wiki/O_(lettre)">
</map>
Logo de LEGO Lettre L Lettre O

Propriétés CSS

background-image

Fichier image utilisé comme image de fond. L'emplacement du fichier image est précisé par la fonction CSS url.

body { background-image: url("img/lego.png"); }

background-repeat

Répétition de l'image de fond. Cette propriété a pour valeur repeat, repeat-x, repeat-y ou no-repeat.

background-position

Position de l'image de fond. Cette propriété a pour valeur une combinaison des valeurs prédéfinies left, center, right, top et bottom.

background-attachment

Comportement de l'image de fond vis-à-vis du défilement. Cette propriété a pour valeur scroll, fixed ou local.

Valeur Description
scroll L'image de fond défile avec l'élément.
fixed L'image de fond est fixe à l'intérieur de la fenêtre du navigateur.
local L'image défile avec le contenu de l'élément.

background-size logo CSS3

Taille de l'image utilisée comme fond d'un élément.

body {
  background-image: url("img/lego.png");
  background-size: 100%;
}

Exercice 17

Ajouter des images au document risotto.html et figaro.html en tant que figures et fonds d'écran.

Exercice 18

Créer une carte de zones cliquables (cercle, rectangle et polygone) autour des personnages DC Comics de cette image.

LEGO Movie poster

Astuce : dans le logiciel Gimp, il est possible de créer une carte de zones cliquables depuis le menu contextuel Filters / Web / Image Map.

Correction