Image HTML ou Image CSS ?

Pour concevoir le design d'une page web, doit-on placer les images dans les feuilles de styles CSS, par exemple en arrière-plan grâce à la propriété background-image, ou utiliser la classique balise <img> ?

Ces deux alternatives répondent à des besoins précis et sont complémentaires. Il ne faut surtout pas privilégier l'une aux dépens de l'autre.

Lorsque les feuilles de style sont désactivées, ou lors d'un rendu sur un navigateur non graphique ou un média différent de l'écran (navigateur textuel, imprimante, plage braille, synthèse vocale, etc.), les images d'arrière-plan ne sont pas restituées, contrairement aux éléments <img> qui font partie intégrante du document. Seuls les éléments <img> ont un mécanisme permettant de les remplacer par leur alternative textuelle lorsqu'elles ne sont pas restituées (l'attribut alt).

Si l'image est décorative

Il peut s'agir d'illustration de fond, de bordures, d'arrondis, de puces ou toute autre décoration qui n'apporte rien au contenu de la page (c'est à dire que la page demeure lisible et compréhensible sans ces illustrations).

Elle peut être gérée de deux manières :

• Cette image décorative consister en une image HTML <img> si celle-ci est dotée d'un attribut vide alt="". Il est indispensable de lui donner une alternative textuelle nulle puisqu'elle ne véhicule aucune information qui devrait être lue par un lecteur d'écran, affichée par un navigateur non graphique, etc. Un attribut alt non vide "parasitera" le contenu du document et rendra sa compréhension plus difficile.

<img src="fond.jpg" alt="" />

• Pour améliorer la séparation structure/présentation, cette image décorative gagne à être gérée à l'aide de la propriété CSS background, en tant qu'image d'arrière-plan CSS, dans une feuille de style externe.

#element { background:url(fond.jpg) no-repeat; }

Si l'image apporte du contenu

À partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton d'action, un logo), ou lorsqu'elle a un rôle fonctionnel (image lien), il faut que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.

• Il faut donc faire apparaitre l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut alt correspondant, pour en donner un équivalent textuel.

<img src="image.jpg" alt="Alternative texte de l'image" />

Ceci est particulièrement important quand une image est le seul contenu d'un élément lien <a> : elle ne doit alors en aucun cas être gérée en tant qu'image d'arrière-plan CSS. Si l'on souhaite réaliser un effet au survol (rollover), il faut passer par JavaScript (ou équivalent) : l'effet ne justifie pas le passage de l'image en arrière-plan CSS, qui ne serait pas accessible.