Une image en CSS background-image avec data:uri : img2datauri
Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂
Vous avez toujours rêvé de pouvoir convertir une image en data-uri, avec sortie direct du code CSS approprié ? C’est possible avec img2datauri, script disponible sur Github, réalisé par votre serviteur au sein de la société Colorz.
Vous ne connaissez pas encore le principe du data:uri ? Direction Wikipedia
Oui, ça existe déjà, mais c’est pour l’exercice de style.
Je ne vois pas trop l’interet sachant que l’encodage base64 fait grossir la taille du fichier image et data:uri n’est pas compatible avec la totalité des navigateurs…
Une requete http en moins, vu que le nombre de requetes concurrentes sur une page est limité.
Mon script apporte également une compatibilité avec IE < 8, donc on rentre dans la graceful degradation 🙂
De toute façon, cette technique n’est utile que pour les images de petites tailles, comme des pictos : la différence de poids est donc très souvent négligeable en comparaison du gain d’une requête http.
Sans rajouter que la méthode toujours en vogue actuellement est celle des sprites, soit des png énormes et bien lourd à mastiquer pour un navigateur…
Utiles, les data:uri, à mon avis.