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.
Commentaires
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.
Ces recommendations coule de source :)
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.
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
La prochaine version d'IE prendra-t-il en compte le background-color: transparent ?
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 :-/
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 :)
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.
>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..
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.
> "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 :)
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 ?!!
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.
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)
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.