Des images sans images
Afin d’optimiser les performances des navigateurs, de nombreuses techniques permettent d’éviter des requêtes excessives et de charger des fichiers trop imposants.
Voici quelques solutions pour afficher des images ou pictogrammes sur ses pages web… sans images. Le tout dans un but de performance et de facilitation des mises à jour et des adaptations graphiques (élargissement, rotations, ombrages), etc.
Data URI
Les images en “Data URI” sont en réalité encodées en base 64, code qui peut avantageusement remplacer une requête de fichier externe.
Vous trouverez des exemples à l’adresse http://www.ie7nomore.com/fun/data-uri/
Cette méthode n’a pas que des avantages, mais devient redoutable lorsqu’elle est combinée avec la technique des Sprites.
De nombreux générateurs sont disponibles, le plus séduisant et intuitif actuellement est : http://draeton.github.com/stitches/.
Les polices de caractères dédiées
Grâce à la règle CSS3 @font-face, on peut dorénavant employer des fontes exotiques telles que windings, webdings ou même des polices complètement dédiées sur tous les navigateurs, à condition de proposer plusieurs types de formats de police.
Depuis quelques semaines, c’est la ruée vers les fontes entièrement “graphiques”, composées de pictogrammes. Le mode d’emploi et quelques exemples sont décrits sur http://css-tricks.com/examples/IconFont/
Parmi ces fontes dédiées, voici les plus connues :
- http://fico.lensco.be/ (19$)
- http://pictos.drewwilson.com/ (49$)
- plein : http://www.delicious.com/stacks/view/SC3hpq
Les polices classiques
Le saviez-vous ? Même les polices de caractères classiques (dites “websafe”) contiennent un très grand nombre de caractères spéciaux mal connus, sous réserve que vous serviez votre page web en encodage unicode UTF-8.
La technique est décrite ici, à partir d’une police “Times, serif” : http://ikwebdesigner.com/special-characters/
Je me suis amusé à faire quelques tests ici : http://www.ie7nomore.com/css2only/characters/
Et l’accessibilité ?!
Il ne faut pas se leurrer, ces différentes techniques sont des sources potentielles de gênes pour l’accessibilité, tout d’abord pour une raison très simple : puisqu’il ne s’agit pas de “vraies” images HTML (élément img), les alternatives textuelles demeurent maigres voire inexistantes.
Il est donc nécessaire de les employer avec moultes précautions et surtout au sein d’un contexte qui permet de comprendre leur existence.
