http://korben.info/transformer-une-image-en-css.html
Le site à la con du jour c’est celui-ci. Le concept est simple… Transformer n’importe quelle image en CSS. J’avais déjà parlé d’un outil similaire mais sur celui que je vous présente aujourd’hui, pas la peine de vous créer un compte sur le site. Alors évidemment, j’ai testé avec une image de 35 Ko et…
1 « J'aime »
Bonjour,
quel est l’intérêt de faire ça ? (!! c’est juste une question…)
Peut-être la seule façon à aujourd’hui de contrer la faille Stegosploit.
Je conseillerais :
- d’abord d’optimiser les images pour le Web
- pour ensuite les encoder en CSS
- Et pour les petites images les encoder en base64 dans ses CSS.
- Enfin, placez les attributs CSS en début de fichiers (pour que l’affichage soit le plus rapide possible).
Inconvénients :
Le fichier CSS est plus lourd, à chaque modification d’une image il faudra mettre à jour le fichier CSS, n’est pas supporté par tous les navigateurs
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.
Diminution du nombre des requêtes HTTP, les images tirent partie du GZip puisqu’elles sont encodées au format texte.
aucun, éventuellement pour éviter que cette “image” ne soit indexé par google image.
Les images en base64 sont à utiliser avec des pincettes : ça peut alourdi le site (un base64 est plus gros qu’un PNG -même en utilisant GZIP), le cache du browser est bypassé, notamment si l’image est affiché plusieurs fois
Sur une connexion lente (Ex: en EDGE) le chargement d’une page est impacté :
Sans :
- (rapide) Chargement du texte,
- (rapide) Chargement des CSS et application de la mise en forme,
- (lent) Chargement des images, et des ressources AJAX
Avec image dans le CSS :
- (rapide) Chargement du texte,
- (lent) Chargement des CSS et application de la mise en forme,
- (lent) Chargement des images, et des ressources AJAX
L’utilisateur va rester plus longtemps sans style, certaines images (encodé dans le CSS) arriveront avant les autres en
Avec images dans le HTML :
- (lent) Chargement du texte,
- (rapide) Chargement des CSS et application de la mise en forme,
- (lent) Chargement des images, et des ressources AJAX
L’utilisateur va patienter plus longtemps avec un écran blanc, certaines images vont arriver avant même la mise en forme
Autant les transformer en base64
merci fofo, com’ plus pertinent et plus utile que zorg (excuse moi, c’est p’t-être con c’que dis‼)
Un autre intérêt : pour les emailings/newsletters.
Souvent (systématiquement), le client mail bloque les images, mais prend en charge les CSS (dans le cas de la prise en compte d’emails au format HTML).
Avec cette technique, il est possible d’encoder une petite image type logo et ainsi rentre l’email envoyé plus “corporate”, même si les images sont bloquées dans le client.
Même pas, pour les mails une image en base64 fonctionne bien (le client mail bloque le chargement des pièces jointes), pas sur par contre que l’interpréteur HTML d’un client mail gère les CANVAS du HTML5.
Pour rester dans les hacks fun et à l’utilité questionnable, je vous présente une app similaire que j’avais développée en JS bien avant celle présentée dans cet article, et en moins de 1/2 kb, parce que le code-golfing c’est marrant:
http://xem.github.io/miniShadowArt/
On a écrit plein d’autres mini-apps dans le genre si ça vous intéresse:
Cheers 
De ma courte expérience, les images encodées en base64 dans le CSS sont bloquées par Outlook et dans la plupart des webmails (gmail et yahoo mail pour avoir testé).
L’interprétation de Canvas ne pose pas de pb dans le cas d’un webmail (cela dépendra de ton navigateur), et outlook le gère depuis sa version 2013.
Bon, mais ça reste un outil de rigolade plus qu’autre chose cet ouil 
sources
Éviter qu’elle soit copiée aussi facilement qu’une image classique (copyright, toussa). Mais bon, c’est comme les scripts qui verrouillent certaines fonctions au clic droit : suffit de faire une capture d’écran pour contourner l’astuce.
La seule utilité que je vois à ça, c’est afficher des images en HTML dans les e-mails (la plupart des clients bloquent le CSS externe et les images).