Embarquer une image dans HTML

Bon, clairement, je ne sais pas trop à quoi cela pourrait servir mais c’est possible. Donc, bon.

En faisant quelques recherche avec Google, j’ai remarqué que l’indicateur de popularité du site (à gauche de l’URL en vert) dans les résultats de recherches n’était pas un fichier PNG mais des données PNG embarquées directement dans le HTML. En creusant un peu, voici…

On fait un petit script PHP pour simplifier les choses :
#!/usr/bin/php
<?php
while($line=fgets(STDIN)){
  echo (rawurlencode($line));
}
?>
Puis on utiliser tout simplement cat pour dumper les données et les envoyer sur STDIN du script et rediriger le tout dans un fichier :
% cat ~/deblogo.png | ./rawurlencode > /tmp/index.html
On ajoute ensuite les balises HTML qui vont bien :
<html>
<body>
<img src= »data:image/png,%89PNG%0D%0A%1A[…]%AEB%60%82″ width= »48″ height= »48″>
</body>
</html>
Et voilà ! Ça peut toujours servir pour une interface HTML d’un système embarqué…

Ah oui ! Il est aussi possible d’encoder en base64, ce qui évite d’utiliser PHP :
% base64 -w 0 ~/deblogo.png > index.html
La syntaxe du tag précise alors l’encodage en question :
<img src= »data:image/png;base64,iVBORw0KGgoAA[…]FTkSuQmC » width= »48″ height= »48″>