Images en HTML

Alexandre Niveau
GREYC — Université de Caen
En partie adapté du cours d’Hervé Le Crosnier, Jean-Marc Lecarpentier et Fabrice Maurel

Images sur le web

  • Distinguer :
    • les images faisant partie du contenu, qui apportent de l'information
    • et les images de présentation, servant à décorer ou faisant partie de la maquette
  • Comme toujours, on sépare fond et forme :
    • les images de contenu vont dans le HTML
    • les images de présentation vont dans le CSS

Différentes représentations des images

Images matricielles (pixels, taille fixée) ou vectorielles (formes géométriques, redimensionnable sans perte de qualité) ; ici on ne s'intéresse qu'aux images matricielles

Sur le web, on n'utilise que des formats compressés (par ex., interdiction d'utiliser BMP !)

La compression peut être avec perte (lossy) ou sans perte sans perte : on peut compresser plusieurs fois, ça ne change rien

Profondeur des couleurs : nombre de bits utilisés pour représenter une couleur

24 bits suffisent pour ce que les écrans peuvent afficher et ce que l'œil humain peut distinguer

Deux techniques pour représenter les couleurs
  • Couleurs directes : chaque pixel utilise 24 bits ou autre valeur pour stocker sa couleur
  • Couleurs indexées : chaque image dispose d'une palette de 256 couleurs sur 24 bits. Chaque pixel n'utilise que 8 bits, pour indiquer sa couleur dans la palette (voir exemples sur Wikipédia)

Formats d'image

  • JPEG: couleurs directes, compression avec perte
    • adapté aux images complexes, sans aplats, typiquement les photographies.
    • type MIME : image/jpeg
    • extension : .jpg
  • GIF : couleurs indexées, compression sans perte
    • adapté aux images avec aplats ou ayant peu de couleurs. Permet de mettre un fond transparent.
    • Remplacé par PNG (plus complet et ouvert), mais toujours utilisé de nos jours pour son mode « animé ».
    • MIME : image/gif
    • extension : .gif
  • PNG : portable network graphics, créé pour remplacer GIF
    • compression sans perte, couleurs directes ou indexées. Adapté aux images avec aplats, typiquement les images pas trop complexes créées sur ordinateur.
    • MIME : image/png
    • extension : .png
  • Un format plus récent, WebP, introduit par Google, gagne du terrain (supporté maintenant sur la plupart des navigateurs récents)

Portable Network Graphics

PNG utilise de la compression sans perte et supporte plusieurs formats de couleurs
Deux principaux types
  • PNG-8 : couleurs indexées
    • adapté aux images avec aplats ou ayant peu de couleurs
    • supporte un canal alpha pour la transparence (mais ne marche pas sous Photoshop…)
  • PNG-24 : couleurs directes
    • adapté aux images avec de nombreuses couleurs et des aplats.
    • pas adapté à des photos : beaucoup plus lourd que JPEG, sans amélioration visible de qualité

Petites comparaisons JPEG-GIF-PNG

Attention à ne pas enregistrer en PNG-24 systématiquement : PNG-8 suffit largement en général pour les images non photographiques, pour lesquelles JPEG est plus adapté

Conversion vers PNG-8 avec imagemagick en ligne de commande : 
# Conversion d'un PNG-24 vers PNG-8
convert tutu.png png8:resultat.png
# Autre façon de faire si la précédente ne marche pas
convert tutu.png -type palette resultat.png

# Conversion d'un GIF vers PNG-8 (le type palette est implicite)
convert toto.gif toto.png

Choix du format d'image

Arbre de décision du format d'image
Image reprise de ce tutoriel sur l'optimisation des images

Images vectorielles sur le web

Norme du W3C : SVG, scalable vector graphics

Description de l'image dans un format XML

Tutoriel sur MDN

Understanding SVG Coordinate Systems and Transformations : article très détaillé avec démo interactive pour comprendre les problématiques de viewport, canevas, transformations, etc.

L'élément img

Pour insérer une image de contenu dans le HTML : élément <img />

Attributs :
  • src, l'URL de l'image (obligatoire)
  • alt, texte alternatif (obligatoire)
  • width et height, les dimensions de l'image, en pixels
  • longdesc, URL d'une description textuelle de l'image
  • usemap, pour définir des « zones sensibles » dans l'image

et bien d'autres qu'on verra plus tard

Attribut src

L'attribut src sert à spécifier l'URL de l'image. Principe :
  • le navigateur télécharge le HTML d'une page
  • il analyse le HTML, construit l'arbre DOM, et commence à l'afficher
  • pendant l'analyse, il trouve un élément img avec pour src l'URL http://example.com/bibi.jpg
  • il télécharge l'image correspondante
  • lorsque le téléchargement est terminé, il affiche l'image au bon endroit dans la page
Cette procédure est la même quelle que soit l'URL de l'image (relative ou absolue, même serveur que le HTML ou non…)démo inspecteur network

Texte alternatif

Le texte donné dans l'attribut alt est utilisé à la place de l'image quand il n'est pas possible d'afficher l'image, donc
  • par les navigateurs visuels, si l'image ne peut être chargée (ou si les images sont désactivées) ;
  • par les navigateurs en mode texte ;
  • par les navigateurs audio ; etc.

Attribut obligatoire pour que la page soit valide

Certaines versions d'IE faisaient apparaître le texte alternatif au survol de la souris, mais l'attribut n'est pas fait pour ça (et les autres navigateurs ne le font pas)

utiliser l'attribut global title pour faire ça attention à l'accessibilité (téléphones)

Dimensions de l'image

Les attributs width et height permettent d'indiquer la place que prend l'image dans la page.

Par exemple, pour insérer une photo de Toto faisant 430×798 pixels, on utilisera 
<img src="toto.jpg" alt="Une photo de Toto"
     width="430" height="798" />

Intérêt : le navigateur peut réserver la place dans la page pour l'image, avant de l'avoir récupérée

Très intéressant en cas de connexion lente : évite que la mise en page change à chaque fois qu'une nouvelle image a fini d'être téléchargée

Démo un post expliquant pourquoi c'est logique de mettre les dimensions dans le HTML.

Redimensionnement des images

Si on donne des dimensions fausses, le navigateur obéit et redimensionne l'image

Ne pas utiliser width et height pour faire ça !
  • mauvaise définition
  • image plus lourde que nécessaire ⇒ temps de chargement plus long et gâchis de bande passante
  • temps de recalcul de l'image

Particulièrement vrai pour les miniatures (thumbnails)

Conseil pour le redimensionnement des images

Redimensionner soi-même ses images aux tailles voulues ! laisser l'original avec son nom simple (toto.jpg) et renommer les versions réduites (toto_thumb.jpg ou toto_150x65.jpg)

Par ex., avec imagemagick en ligne de commande : 
convert image.jpg -resize 300x image_thumb.jpg
crée l'image image_thumb.jpg, de largeur 300 pixels, et de hauteur adaptée pour conserver le ratio

Évidemment, si on veut des images de taille variable (par ex. 50% de la largeur de la page), ça ne suffit pas… mais de toute façon, dans ce cas, on ne peut pas utiliser les attributs HTML width et height, il faut utiliser du CSS.

Description longue

L'attribut longdesc donne l'URL d'une page (ou d'un fragment de la même page) qui décrit l'image.

Destiné principalement aux images qui contiennent des informations, telles que des graphiques.

Démonstration

Utilisation d'une image comme lien

On peut utiliser une image comme lien : 
<a href="http://blogdetoto.com">
    <img src="toto.jpg" alt="Lien vers le blog de Toto" />
</a>
L'attribut alt doit alors être utilisé pour décrire le lien (recommandation W3C)

Attention, IE ≤ 10 ajoute une bordure bleue aux images qui sont des liens

utiliser border:none…

… mais se poser la question de l'accessibilité et de l'ergonomie (un lien sur une image peut être difficilement découvrable)

Les images mappées

  • On peut définir des « zones sensibles » sur une image
  • Chaque zone peut être associée (notamment) à un lien
  • Exemple d'utilisation : page d'accueil où les différentes parties d'une image permettent d'accéder aux autres pages du site
Démonstration

Structure de l'élément map

La carte des zones sensible est donnée par l'élément map

Chaque zone est déterminée par un élément area

<map name="nom_map">
    <area ... />
    <area ... />
</map>
On associe une image à cette map grâce à l'attribut usemap : 
<img src="toto.jpg" alt="Photo de Toto" usemap="#nom_map" />
Attention, le caractère # est nécessaire

Élément area

Contient la définition d'une zone

Attribut shape pour le type de forme : rect, circle, ou poly pour un polygone

Attribut coords : coordonnées, en pixels, séparées par des virgules, des points caractérisant la zone
  • Rectangle : left-x, top-y, right-x, bottom-y
  • Cercle : centre-x, centre-y, rayon
  • Polygone : x1, y1, x2, y2, ..., xN, yN
Pour faire de la zone un lien, on utilise l'attribut href, auquel cas l'attribut alt doit obligatoirement être utilisé, pour spécifier le texte du lien

Images mappées de taille variable

Coordonnées en pixels ⇒ ne marche que si l'image a une taille fixée. Si la taille varie, les zones ne correspondent plus : démo de ce qui se passe

Pour avoir des images mappées responsive, il est nécessaire d'utiliser JavaScript

le plus simple est de faire une image mappée normale et d'ajouter une petite librairie JavaScript qui va la rendre responsive

Démo

Un intérêt de cette approche est que l'image mappée fonctionne même sans JS, à condition de ne rendre sa taille variable que si JS est activé

Démo plus accessible

Élément figure

Les éléments img sont de type inline

On a souvent besoin de les mettre dans un bloc

On peut bien sûr utiliser display:block

Une autre possibilité est l'élément figure, qui a une sémantique plus précise :
  • il peut contenir plusieurs images (ou autres types de « figures »)
  • il peut contenir un élément figcaption, utile pour indiquer une légende ou des informations d'attribution (photographe, licence…)
  • il indique une figure utilisée dans le texte, mais détachée de lui
<figure>
  <img src="porto1.jpg" alt="Graffiti dans le sud de Porto" width="181" height="242" />
  <img src="porto2.jpg" alt="Balcons dans une rue de Porto" width="181" height="242" />
  <img src="porto3.jpg" alt="Chat somnolant au sud de Porto" width="181" height="242" />
  <figcaption>
    Photos de mon voyage à Porto. Ville emplie de beaux graffitis, balcons loufoques
    et chats profitant des quelques ruines derrière la ville.
  </figcaption>
</figure>