Outil de conversion image vers SVG : Online CSS Sprite Generator (output base64 in CSS)
Simulation : http://jsfiddle.net/frontenddeveloper/fL4nB/
Source partielle du texte ci-dessous : http://www.johanbleuzen.fr/blog/encoder-images-base64-css
Le gain en nombre de requête peut être intéressant si l’on a beaucoup de petites images et reste pour moins le principal attrait de cette technique. Je l’utilise pour mes images de fonds dans le design de ce blog.
Avantages :
- Diminution du nombre des requêtes HTTP,
- Solution adaptée aux petites images,
- Les images tirent partie du GZip puisqu’elles sont encodées au format texte,
- Pas de markup HTML supplémentaire pour afficher des icônes dans vos pages (exit les
<i class="mon-icone"></i>), - Positionnement au pixel près dans les blocs avec CSS, repeat-x et y possible, background-multiple possible (voir ma simulation).
Inconvénients :
- Le fichier CSS est plus lourd,
- A chaque modification d’une image il faudra mettre à jour le fichier CSS,
- N’est pas supporté par IE6 et IE7 (mouarf !), mais les icônes et autres pictogrammes qui feraient l’objet d’une conversion en Base64 utilisent souvent la transparence PNG qui n’est pas plus prise en charge par ces navigateurs préhistoriques…
Et pour la forme voici, quelques petits conseils qui peuvent être intéressant de rappeler si vous voulez gagner quelques précieux kilo-octets :
- Utilisez cette image pour des images que l’on ne modifie pas souvent
- Optimisez vos images avec Smushit (par exemple) avant l’encodage en base64
- Les images ne doivent pas dépasser 3 kilo-octets
- Placez les attributs CSS en début de fichiers pour que l’affichage soit le plus rapide possible