C’est en lisant un article sur le blog « in pixel trust » à propos d’un formulaire css sans images que je me suis souvenu d’un concept qui me paraissait inutile surprenant : se passer de l’image pour l’intégrer à même le CSS, le HTML, le XML…
Pour se faire, il suffit d’utiliser la base 64 pour intégrer l’image dans le css et préciser le MIME TYPE…
Par exemple, pour faire un bloc contenant cette image de fond : 
Il existe la manière classique :
.mon_element{
width:26px;
height:26px;
background:url(chemmin/vers/l/image.png) no-repeat 0 0;
}
Et la version base64 :
.mon_element{
width:26px;
height:26px;
background:url(data:image/png;base64,LA+CHAINE+BASE+64) no-repeat 0 0;
}
Il est également possible de l’utiliser dans le html par l’intermédiaire de l’attribut src de la balise img html, ou dans tout autre document xml…
Jetez un oeil vous vous ferez une idée : DEMO – image en base64 pour le css
Mais pour aller plus loin la question qui se pose c’est : « quel est l’intérêt !? ».
Bon pour le poids, il est clair que cette technique ne permet pas de limiter le poids des images, en effet la base64 est juste une autre façon de matérialiser le fichier.Concrètement dans notre exemple, l’image de départ pèse 1,9Ko, l’image base64 pèse… 1,9Ko! En plus de ça l’image n’est pas chargée dans le cache du navigateur!
Je passe sur le temps que nécessite la modification de l’image qui demande de ré-encoder l’image en base64, de la retrouver dans le css (surtout si vous n’êtes pas des fan de l’organisation), la remplacer, ré-uploader le css… Rien que de l’écrire je trouve ça contre-productif…
Aujourd’hui, je vois trois éléments qui peuvent vous motiver à utiliser cette technique :
- Il est possible de limiter le nombre de requêtes http sur votre serveur :
Un vrai faux avantage quand on voit les techniques de spriting (ce point fera sûrement l’objet d’un article ultérieurement), les techniques d’optimisation d’images, de compression…
- Il est possible de modifier une image dans une feuille de style même si vous n’avez pas accès au ftp :
Dans certains cas, vous pouvez être amené à modifier le template d’un site ou d’une newsletter sans pouvoir accéder au ftp… DAMNED ! Impossible d’ajouter une puce ou un picto… maintenant c’est possible.
- Les images peuvent bénéficier de la compression des fichiers textes :
Compression gzip, mise en cache serveur, mise en cache local html5 (même si une image ordinaire peut aussi bénéficier de ce traitement)
Pas indispensable, mais à connaître, on ne sait jamais !
Crédit photo
