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 {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACA0lEQVR42u2Xyy5DQRzGPYKlR+hDeAg7W0tLEksLO7GxFtG400QsJCIo1QuCVltU2zQtkSYERfSaEsb5baQ3Z3qYNhYj+ZJx5vt/88vcek6HEOJfSwNqQA2oATXgH4qXvWe9s65gcsrpf5/YPBaV4hl9eNoO6PCddU/vBl4AmXGdipWDC7F2HK0Sz+jDg5eatgAuecKjk1snn/N7QbERiIvtUMJUePBSQ60CQCmcWD2MMLglUUOtVUhLy2rsq491f6whQPj6NvWcLzoQ7UYeaskgSzkg+8hs5jLZwrjhsyHaZjNJllJATiL7yGwJ3ZGrfryItpmXLDKVAXJdyA6EfSdQZH8tuEPDtGUHh0xlgMagOdkhWPaGv+/ARU9IyPxkKgPkTjMbzPgbqZUMkExlgFy8JoMxa3VLJgMkUxmgs4nB2PhWAMlUBui7vG7mF8MSIJnKAP2J9B2hElkCJFMZYCz94FINSKYywMfX/KDrPKkMkCwyVQGirmj6Pmo2aOruqQqQ/3/ykkWmMkCUK5WHjuI3OdnsyWaRDLJa8brVaSyL3R1J/XQX1qrOQy0ZZLUCENmesoW5+pmUixpqyWj1K7+tWH4bYx81c3Dw4KWG2nZ9NLFEfflSeSJ5m9nnTuPirRTP6MODl5p2f9UhTmKPoYEGLwwD9OHR38UaUANqQA34e30BMUs2UusQeogAAAAASUVORK5CYII=") no-repeat scroll 0 0 #EBF5FA;
border-color: #D2DCE1;
}
Important
.important {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABIklEQVR42u3XQUrDQBTGcY+QI3gEj+At3PYG4qYgpeDOhSCCuO89ilCwhS6Eloq4cZET6ERMipuO+WcZgo2fzCTgW3xkSN7r/JhJSHrgve91DGhAAxrQgH/8gY/lxYl7OH99vz/bvU1PPWHMOa51CszmoxWg8ug/Hy99vr4ijDlXYanpBMgKudmwAm1f7hrDNWqojQpkVZi4eL4F8lOoASmvpHTP1XCtkco9KW1tvrlm4l+FHnqDA7PF+IsJldAbHMgTqgLpDQ4snm5kIL3BgeVEqQqkNwZwogLpjQE8LOMEnKNXASrIgQAcRH3VsV3C1qpAHSngogKTFsCkMyDZB6TGgAESF8iXc1PiAPXXX9on4HENyfjI/nYa0IAGNOA/AH4DB0n6mf9lZv8AAAAASUVORK5CYII=") no-repeat scroll 0 0 #FFFAE6;
border-color: #FAE6BE;
}
Attention
.attention {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB/UlEQVR42u2Xyy4DURjH7Wy9gNj0MbyHN7CWWFtLRKp1q6pqq9WqiEsQtwWCRCLhBWzMpXcqkYi6jfmJEaYzbWOm2sVZ/JMv813Ob86c75wzHZqmtbUEoAAUgAJQAArANgBU08E+KTr2eBMa0ZAc85fV9Gxv2wBK894XdSmo5Tbin1ISUxrAbQGoLE4dqcshrbC38ksA42spIJ9Rjvpe8zvLVYA8w0dMywBZa9n1GECWwicvjGdbAqimZoZZawbM/eXp9XO5OI2wv54DqBH7r4D6muuRor5KfnvpG/ApI/l1XzfCNp4TQyw5DgCdN0bpcKvf8GP/9BH714b5254X8VZ3bTo4/v0CqcCc2U8OuU0HpDHY68wASnL63IjBNvvJIbepgMyMkgxYdqzuKxpx2FYx5FLDfUCjMSLeN6s9z1hn7HkI2yqGXGpQy3VAJTF5lVkJ2+55uc3k556HsO3iqCHHJ65dBdSPrQE55mOAWgIQNRRHTdcAOfhrzQq6Ozt4qJRyEYRdK5Za1HQDkI5c4+CvNyuVQmZWj/cgbJPf9jLhGNDUGPbaXxsycrBNftvLhCNA/fLZlVtfqAuHpPDoO2cuwm4kh9qM4WQGO8sXx9lGBsuuRhgMYTf0UtR2/Ik5+G9PdinoqqhJbTe6mIU/2CR5xF+dABSAAlAA1tYHSwv5Nu1eZ98AAAAASUVORK5CYII=") no-repeat scroll 0 0 #FFF0EB;
border-color: #FFD7CD;
}

HTML5 et Datalist

html5-logoRemplir des formulaires sur un site est toujours long. Aujourd’hui en HTML5 grâce au composant datalist vous pouvez désormais proposer un choix multiple à vos utilisateurs, tout en leur laissant la liberté de saisir ce qu’ils souhaitent.

Les options peuvent être jumelées avec un datalist en spécifiant son id dans l’attribut  list d’un input :

<input type="text" value="" placeholder="saisissez la lettre 'a'" list="listOs" />
<datalist id="listOs">
<option value="Apple"></option>
<option value="Android"></option>
<option value="BlackBerry"></option>
</datalist>

démo :

Le composant datalist  est largement compatible avec les dernières versions de Firefox, Opéra, Chrome, et Internet Explorer 10.