Les images

Bien exploiter les images

Dans beaucoup de sites, les médias occupent de plus en plus de place. Ces médias, ces images doivent être choisis avec soin et optimisés au mieux pour un chargement rapide sur tous les supports actuels : écran d’ordinateur, de tablette et de smartphone. Il y a donc un travail important de la part des graphistes pour choisir la bonne image, définir ses dimensions en fonction des divers supports et déterminer un rapport compression/poids adéquat.

Dans les pages web, les images sont des contenus « embarqués », car elles ne sont pas directement décrites dans le contenu du fichier HTML. Les fichiers des images sont usuellement placés dans un dossier spécifique dans le dossier du site et elles sont insérées dans la page web en indiquant leur chemin d’accès.

Comprendre les formats de compression

1. Compresser les images

Lorsque vous prenez une photo, il n’est guère possible de la diffuser directement sur Internet sans une réduction de ses dimensions et sans une compression. Les images brutes de prise de vue sont toujours trop grandes et trop lourdes pour être publiées sur Internet. Il faut réduire leur dimension et les compresser pour réduire leur poids.

Actuellement, il existe trois principaux formats de compression d’image : GIF, JPEG et PNG. Cette compression se fait avec des logiciels dédiés, suite à des traitements pour retoucher les photos. Il existe d’autres formats de compression comme le SVG (format vectoriel) et le WebP.

2. Le format GIF

Le format GIF, pour Graphics Interchange Format, est un format de compression d’images conçu en 1987 par Compuserve et il n’est pas totalement libre. Son extension est .gif. Avec ce format, les images utilisent 256 couleurs au maximum et ne proposent qu’un seul niveau de transparence. Les pixels sont donc soit opaques, soit transparents, ce qui implique des effets d’escalier très disgracieux sur les bordures. Si l’image initiale possède moins de 256 couleurs, ce format est non destructif, s’il y en a plus de 256, la compression est destructive.

Le format GIF est donc réservé aux images de petites dimensions, comme des icônes...

Insérer des images avec l’élément <img>

1. L’utilisation des images

L’élément <img> est fait pour insérer des images d’illustration directement liées au contenu rédactionnel. D’un point de vue sémantique, cet élément n’est pas fait pour appliquer une image de fond à un en-tête ou toute autre zone d’affichage dans la page. Pour cela, il faut utiliser une règle CSS.

Notez que l’affichage des images se fait en ligne, inline. C’est la seule propriété initiale concernant cet élément <img> : display: inline-block;. La différence entre inline et inline-block est qu’avec ce dernier affichage, nous pouvons utiliser les attributs width et height.

2. L’attribut src

Le premier attribut quasiment obligatoire est src. Cet attribut permet d’indiquer le chemin d’accès à l’image qui doit être affichée. Le chemin d’accès s’indique usuellement relativement à la page contenant l’élément <img>.

Voici quelques exemples :

<img src="mon-image.png"> : l’image se trouve dans le même dossier que la page HTML.
<img src="images/mon-image.png"> : l’image se trouve dans un sous-dossier nommé images, placé dans le dossier contenant la page HTML.
<img src="../mon-image.png"> : l’image se trouve dans le dossier parent du dossier contenant la page HTML.

Mais vous pouvez aussi choisir d’afficher une image déjà publiée sur le Web, avec un chemin absolu : <img src="http://www.mon-site.org/images/mon-image.png">. C’est une solution qu’il faut utiliser avec...

Insérer des illustrations avec l’élément <figure>

1. L’utilisation des illustrations

Les images permettent d’illustrer directement un contenu et les deux sont intimement liés. Les illustrations peuvent se suffire à elles-mêmes et n’ont pas besoin d’un texte rédactionnel pour être compréhensibles. De plus, la position de l’illustration peut être indépendante vis-à-vis du texte. Attention, le contenu d’une illustration peut être une ou des images photographiques, mais cela peut être aussi un dessin, une vidéo, un tableau ou un long extrait de code. Voilà les différences sémantiques entre l’utilisation d’une image et d’une illustration.

2. L’élément <figure>

C’est l’élément <figure> qui permet d’insérer une illustration dans votre page web. Cet élément possède une balise d’ouverture et une balise de fermeture.

<figure> 
   ... 
</figure>

L’élément <figure> est de type block, voici ses paramètres d’affichage par défaut :

figure { 
     display: block; 
     margin-top: 1em; 
     margin-bottom: 1em; 
     margin-left: 40px; 
   ...