Balise <img> ou feuille de style ?

Pour alléger les documents, doit-on systématiquement placer ses images dans les feuilles de styles CSS ?

Il existe principalement deux méthodes pour afficher une image ou illustration au sein d'une page web :

  • employer l'élément <img>
  • faire apparaître l'image en arrière-plan d'un élément à l'aide de la propriété CSS "background-image"

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

Lorsque les CSS sont désactivés, 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.

Il faut donc distinguer deux cas de figure :

Premier cas : l'image est décorative.

Il peut s'agir d'illustration de fond, de bordure imagée, d'arrondi ou toute autre décoration qui n'apporte rien au contenu de la page.

Dans ce cas, il faudrait éviter de faire apparaître cette image dans le code HTML (<img>) mais privilégier la séparation fond/forme en gérant cette image décorative à l'aide d'une feuille de style CSS séparée.

Cela permet de ne pas avoir d'éléments de structure qui vont inutilement allourdir le code ou rendre son interprétation plus difficile (gifs transparents par exemple).

Second cas : l'image apporte du contenu.

A partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton, un logo), il faudrait 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 apparaître l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant, pour en donner l'équivalent textuel.

Pour aller plus loin, lire l'article d'Openweb à propos de l'accessibilité des images.

Par Raphael GOETTER - vendredi 21 avril 2006 à 09:39

Conception Web - #241 - Lu 16601 fois - Intérêt du billet: 2.32(31) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le vendredi 21 avril 2006 à 11:33, par excargot :: site :: #

a noter également que dans le cadre d'images affichées dynamiquement (à partir d'une base de données par exemple, galerie d'images), l'utilisation d'une balise <img> est obligatoire.

Le vendredi 21 avril 2006 à 12:35, par Mobman02 :: site :: #

Ces recommendations coule de source :)

Le vendredi 21 avril 2006 à 14:41, par hapax :: site :: #

Dans le cas d'un envoi de page par mail certains clients n'affichent pas les background-image dans ce cas là faire une version spéciale de la page en utilisant la balise <img> même pour la déco.

Le vendredi 21 avril 2006 à 15:09, par Monique :: site :: #

Bonjour,

Ces recommandations coulent peut-être de source, Mobman02, mais elles sont encore trop souvent ignorées ou négligées... il est toujours utile d'enfoncer le clou !

Un point sur lequel il faut insister aussi, c'est le choix judicieux du contenu de l'attribut alt, ce qui n'est pas toujours aussi évident que l'on pourrait le croire.

Amicalement,
Monique

Le vendredi 21 avril 2006 à 17:25, par katsoura :: site :: #

La prochaine version d'IE prendra-t-il en compte le background-color: transparent ?

Le vendredi 21 avril 2006 à 19:19, par piouPiouM :: site :: #

Bonne initiative de préciser ce point :-)

A force de louer les avantages de l'utilisation des feuilles de styles CSS, certains ont pris le mauvais réflexe de mettre *toutes* les images en background-image :-/

Le vendredi 21 avril 2006 à 20:30, par Reivilo :: site :: #

Il est bon d'avoir mis au point ce sujet. J'avais parfois quelques hésitations et récemment, j'ai appliqué un compromis et apparemment, j'ai tout bon :)

Le samedi 22 avril 2006 à 09:24, par Lougaou :: site :: #

Il faut noter aussi que lors de l'impression les background-image n apparaissent plus. ce qui permet de clairement voir ce qui doit rester en <img> dans le code.

Le samedi 22 avril 2006 à 09:32, par Laurentj :: site :: #

>dans le cadre d'images affichées dynamiquement (à partir d'une base de données par exemple, galerie d'images), l'utilisation d'une balise <img> est obligatoire.

Ce genre d'image étant souvent des images "informatives" (photos etc..), oui, c'est vrai. Mais techniquement, c'est absolument faux. Il est tout à fait possible de générer une feuille css (en php par ex) afin de mettre des background-image dynamiquement..

Le samedi 22 avril 2006 à 14:39, par marko_ :: #

voilà une mise au point assez utile!

@Laurentj: tout à fait d'accord avec ça, d'autant plus que ça permet d'envoyer le contenu en version gzip. En contrepartie cela impose ,je crois, une gestion du cache HTTP manuelle...mais c'est un autre débat.

Le dimanche 23 avril 2006 à 10:01, par microtom :: site :: #

> "Dans le cas d'un envoi de page par mail certains clients n'affichent pas les background-image dans ce cas là faire une version spéciale de la page en utilisant la balise <img> même pour la déco." (hapax)


Sauf si le HTML a été désactivé dans le client de messagerie :) Parce qu'en ce qui me concerne, je ne vois pas l'intérêt de recevoir des mails au format HTML (ça me fait le même effet que si quelqu'un me téléphonait avec une musique de fond), dans ce cas une simple indication d'URL suffit :)

Le lundi 24 avril 2006 à 10:53, par Maxwell :: site :: #

Je ne connaissais pas la technique du lien D pour les images, avec l'attribut longdesc="longdesc.htm" !

Existe t'il des explications complémentaires sur ces liens ?!!

Le lundi 24 avril 2006 à 12:43, par Adrien Leygues :: site :: #

Salut,

"Parce qu'en ce qui me concerne, je ne vois pas l'intérêt de recevoir des mails au format HTML",

effectivement c'est relativement désagrable, somme tout c'est bien pratique pour y copier des copies d'écrans pour nos clients par exemple, ou rendre plus agréable la coloration des réponses.

Le mercredi 26 avril 2006 à 11:21, par EricF :: site :: #

Bonjour :)

@Maxwell : tu peux trouver des infos supplémentaires sur longdesc sur le site d'Accessiweb : accessiweb.org/fr/Label_A... (liste des critères, Images, critère 1.10)

Le lundi 1 mai 2006 à 08:17, par Laurent Denis :: #

Bonjour,

A propos du "lien D" : ce lien énigmatique avait été proposé il quelques années comme un patch à l'absence de support de l'attribut longdesc. Le patch a vite fait long feu, ce lien étant passablement déroutant pour la plupart des utilisateurs.

Cette solution n'est plus retenue ni recommandée actuellement.

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.