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.

Il existe essentiellement deux grandes familles de formats d'image:

Les images bitmap: sont représentées par une grille de taille fixe de pixels. Ces images sont très répandues car ce format est utilisé pour stocker des photographies.
Les images vectorielles: sont, quant à elles, définies par des formes géométriques (cercle, rectangle, polygone, etc). Elles ont l'avantage d'être plus lègères (en taille de fichier) et scalable, c'est à dire que la qualité de l'image est indépendante du niveau de zoom, comme les polices de caractères qui sont aussi de nature vectorielle. Ce format est de plus en plus populaire, notamment pour stocker des icônes ou des logos.

Formats d'images bitmap pour le Web

Il existe essentiellement deux formats d'image bitmap 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, etc). 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	2⁸ = 256	2²⁴ = 16 777 216	2²⁴ = 16 777 216
Niveaux de transparence	1	2⁸ = 256
Compression	non destructive	non destructive	destructive
Extension de fichier	.png	.png	.jpg ou .jpeg

Info

Et le format 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.

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 représentant un logo.

Image	Nombre de couleurs	Taille du fichier
	256	3 Ko
	32	2 Ko
	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
	100 %	17 Ko
	50 %	5 Ko
	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
	100 % (PNG)	36 Ko
	100 %	27 Ko
	85 %	12 Ko
	25 %	9 Ko
	0 %	7 Ko

Exercice

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

Info

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 orginale	Taille initiale	Format	Détails	Taille finale	Quotient de compression
`silent_forest.tif`	7.9 Mo	JPEG	Qualité 70%	425 Ko	19.03
`php_logo.tif`	1.3 Mo	PNG	Palette 256 couleurs	36 Ko	36.97
`sao_paulo.tif`	4.3 Mo	JPG	Qualité 50%	209 Ko	21.06
`sao_paulo.tif`	4.3 Mo	PNG	Palette 32 couleurs	710 Ko	6.21

Il existe aussi un grand nombre de services en ligne permettant d'automatiser la tâche d'optimisation à partir du moment où vous avez opté pour un format standard du Web (PNG ou JPEG).

Format d'images vectorielles pour le Web

SVG (Scalable Vector Graphics) est en fait le seul format vectoriel utilisable au sein d'un document Web. Il utilise la syntaxe XML pour décrire les différentes formes géométriques qui composent l'image.

	SVG
Nombre de couleurs	2²⁴ = 16 777 216
Niveaux de transparence	2⁸ = 256
Compression	aucune
Extension de fichier	.svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
  <title>Harran III</title>
  <desc>
    A SVG tribute to Frank Stella
  </desc>
  <rect x="0" y="0" width="400" height="400" fill="darkseagreen" />
  <circle cx="0" cy="0" r="400" fill="seagreen" />
  <circle cx="0" cy="0" r="300" fill="darkblue" />
  <circle cx="0" cy="0" r="200" fill="orangered" />
  <circle cx="0" cy="0" r="100" fill="grey" />
  <rect x="0" y="0" width="400" height="400" stroke-width="50" stroke="orange" fill="none" />
</svg>

Pour créer des images vectorielles plus complexes, vous pouvez utiliser le logiciel libre et gratuit Inkscape.

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.

Si l'image apporte une information complémentaire en lien avec le texte du document Web, alors elle participe au fond et doit être incorporée en tant que ressource embarquée à l'aide de l'élément HTML img.
Si l'image participe plutôt à la forme et pourrait être remplacée par une autre image sans modifier la signification du document Web, alors elle doit être référencée par la propriété CSS background-image.

É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, etc.

Attention !

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.

Info

Mais cette recommandation est devenue obsolète avec la multiplication des documents Web dits responsive dont la mise en page s'adapte automatiquement aux dimensions de la fenêtre du navigateur Web.

<img src="img/lego.png" alt="Logo de LEGO">

`svg`

Élément HTML permettant d'incorporer directement le code XML d'une image SVG au sein du document Web.

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

Pour approfondir la syntaxe des formes SVG, je vous conseille la lecture de l'excellent tutoriel de w3schools.com.

<svg width="256" height="256">
  <circle cx="128" cy="128" r="96" stroke="dodgerblue" stroke-width="20" fill="deepskyblue" />
</svg>

`figure`

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

`figcaption`

Légende d'une figure.

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

Figure 1. Logo de la société LEGO^®.

Info

En la présence de l'élément figcaption, l'attribut alt de l'élément img peut être vide.

`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`	x₁,y₁,x₂,y₂	(x₁,y₁) : coordonnées du coin supérieur gauche (x₂,y₂) : coordonnées du coin inférieur droit
`circle`	x,y,r	(x,y) : coordonnées du centre du cercle r : rayon du cercle
`poly`	x₁,y₁,x₂,y₂,...,x_n,y_n	Liste des coordonnées (x_i,y_j) 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>

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.

blockquote { background-image: url("img/abstract.svg"); }

`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`

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

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

Exercice

Ajoutez des images à votre page d'accueil index.html, aux documents emoticons.html et twitter.html en tant que figures et fonds d'écran.

Exercice

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

Astuce

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