• Accueil
  • Blog
  • Encodage des images en base64 pour votre CSS

Encodage des images en base64 pour votre CSS

css3-logoPour un premier tutoriel dans cette section CSS, je vais vous parler d’une méthode simple, mais efficace pour diminuer le nombre des requêtes http de votre site internet, mais également gagner un temps certain dans vos futurs développements de site internet.

Encoder une image en base64

Le principe est très simple, il suffit de transformer une image en string puis de coller cette chaîne de caractères dans sa feuille de style css avec le code suivant :

data:image/png;base64

Pour encoder votre image il existe deux méthodes différentes.Soit passer par une application en ligne, comme par exemple celle-ci :
http://www.motobit.com/util/base64-decoder-encoder.asp
ou bien encore avec une commande shell linux :

openssl base64 -in image.png | tr -d '\n\'

la partie avec le pipe | tr -d ‘\n\’ permet de supprimer les retours chariot tous les 64 caractères.

Utilisation de l’image en base64 dans une feuille de style

Maintenant que vous savez comment obtenir votre chaîne de caractères, il ne reste plus qu’à l’exploiter dans votre feuille de style css :

   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAABCAYAAAD9yd/wAAAAHElEQVR42lXGwQkAAACCwPZfyeHKb8KBAWrR/QDr+RJVVNWLAAAAAABJRU5ErkJggg==");

Compatibilité des images en base 64 avec … Internet Explorer

Comme vous devez déjà vous en douter les images en base 64 ne sont pas interprétées par les navigateurs Internet Explorer 6 et 7. la seule solution reste un hack en ajoutant son image avec la méthode traditionnelle pour ie.

Quelques outils

Je vous donne quelques balises utilisant les images en base64.J’utilise ces balises dans tous mes thèmes / templates :

Info

.info {<br />
background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACA0lEQVR42u2Xyy5DQRzGPYKlR+hDeAg7W0tLEksLO7GxFtG400QsJCIo1QuCVltU2zQtkSYERfSaEsb5baQ3Z3qYNhYj+ZJx5vt/88vcek6HEOJfSwNqQA2oATXgH4qXvWe9s65gcsrpf5/YPBaV4hl9eNoO6PCddU/vBl4AmXGdipWDC7F2HK0Sz+jDg5eatgAuecKjk1snn/N7QbERiIvtUMJUePBSQ60CQCmcWD2MMLglUUOtVUhLy2rsq491f6whQPj6NvWcLzoQ7UYeaskgSzkg+8hs5jLZwrjhsyHaZjNJllJATiL7yGwJ3ZGrfryItpmXLDKVAXJdyA6EfSdQZH8tuEPDtGUHh0xlgMagOdkhWPaGv+/ARU9IyPxkKgPkTjMbzPgbqZUMkExlgFy8JoMxa3VLJgMkUxmgs4nB2PhWAMlUBui7vG7mF8MSIJnKAP2J9B2hElkCJFMZYCz94FINSKYywMfX/KDrPKkMkCwyVQGirmj6Pmo2aOruqQqQ/3/ykkWmMkCUK5WHjuI3OdnsyWaRDLJa8brVaSyL3R1J/XQX1qrOQy0ZZLUCENmesoW5+pmUixpqyWj1K7+tWH4bYx81c3Dw4KWG2nZ9NLFEfflSeSJ5m9nnTuPirRTP6MODl5p2f9UhTmKPoYEGLwwD9OHR38UaUANqQA34e30BMUs2UusQeogAAAAASUVORK5CYII=&quot;) no-repeat scroll 0 0 #EBF5FA;<br />
border-color: #D2DCE1;<br />
}<br />

Important

.important {<br />
background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABIklEQVR42u3XQUrDQBTGcY+QI3gEj+At3PYG4qYgpeDOhSCCuO89ilCwhS6Eloq4cZET6ERMipuO+WcZgo2fzCTgW3xkSN7r/JhJSHrgve91DGhAAxrQgH/8gY/lxYl7OH99vz/bvU1PPWHMOa51CszmoxWg8ug/Hy99vr4ijDlXYanpBMgKudmwAm1f7hrDNWqojQpkVZi4eL4F8lOoASmvpHTP1XCtkco9KW1tvrlm4l+FHnqDA7PF+IsJldAbHMgTqgLpDQ4snm5kIL3BgeVEqQqkNwZwogLpjQE8LOMEnKNXASrIgQAcRH3VsV3C1qpAHSngogKTFsCkMyDZB6TGgAESF8iXc1PiAPXXX9on4HENyfjI/nYa0IAGNOA/AH4DB0n6mf9lZv8AAAAASUVORK5CYII=&quot;) no-repeat scroll 0 0 #FFFAE6;<br />
border-color: #FAE6BE;<br />
}

Attention

.attention {<br />
background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB/UlEQVR42u2Xyy4DURjH7Wy9gNj0MbyHN7CWWFtLRKp1q6pqq9WqiEsQtwWCRCLhBWzMpXcqkYi6jfmJEaYzbWOm2sVZ/JMv813Ob86c75wzHZqmtbUEoAAUgAJQAArANgBU08E+KTr2eBMa0ZAc85fV9Gxv2wBK894XdSmo5Tbin1ISUxrAbQGoLE4dqcshrbC38ksA42spIJ9Rjvpe8zvLVYA8w0dMywBZa9n1GECWwicvjGdbAqimZoZZawbM/eXp9XO5OI2wv54DqBH7r4D6muuRor5KfnvpG/ApI/l1XzfCNp4TQyw5DgCdN0bpcKvf8GP/9BH714b5254X8VZ3bTo4/v0CqcCc2U8OuU0HpDHY68wASnL63IjBNvvJIbepgMyMkgxYdqzuKxpx2FYx5FLDfUCjMSLeN6s9z1hn7HkI2yqGXGpQy3VAJTF5lVkJ2+55uc3k556HsO3iqCHHJ65dBdSPrQE55mOAWgIQNRRHTdcAOfhrzQq6Ozt4qJRyEYRdK5Za1HQDkI5c4+CvNyuVQmZWj/cgbJPf9jLhGNDUGPbaXxsycrBNftvLhCNA/fLZlVtfqAuHpPDoO2cuwm4kh9qM4WQGO8sXx9lGBsuuRhgMYTf0UtR2/Ik5+G9PdinoqqhJbTe6mIU/2CR5xF+dABSAAlAA1tYHSwv5Nu1eZ98AAAAASUVORK5CYII=&quot;) no-repeat scroll 0 0 #FFF0EB;<br />
border-color: #FFD7CD;<br />
}<br />

11 janvier 2013