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″>

8 commentaires sur “Embarquer une image dans HTML

  1. C'est utilisé pour améliorer les performances d'un site Web.
    Une image = une requète HTTP
    La même image appelée n fois dans la page = une requète HTTP "complète", plus n-1 requètes HTTP pour voir si elle a changé.

    L'encodage base64 permet de l'embarquer directement dans la page. On perd un peu car le poid de la page augmente, mais on gagne beaucoup en économisant des requètes HTTP 'inutiles'

  2. Images en fichier = requêtes = changements de contexte.

    Les images inline fonctionnent également avec les CSS. Là, ça devient carrément plus intéressant.

  3. oui, également possible. Mais dans le cas où une image représente du contenu et pas de la "déco", le CSS n'est pas conseillé.

  4. Intéressant ce petit article… je ne connaissais pas cette technique.

    par contre si vous aimez "jouer" ça serait bien de faire un script qui manipule le DOM de la page à la recherche d'images embarquées de cette manière et qui les exporte en "véritable" fichier image png

  5. L'extension "FireGPG" utilise également cette technique pour les boutons qu'il ajoute à Gmail comme on peut le voir dans le code (ex: const IMG_MAIL_DECRYPTED = "data:image/png;base64,iVBORw0KGgoAAAANS[…]";)… mais également au chargement, lorsque l'on voit la version "texte" se charger progressivement avant d'être transformée en image une fois complète.

  6. Cette technique est aussi utilisée dans les descriptions de moteurs de recherche OpenSearch, pour avoir une icône pour le moteur de recherche dans son navigateur.

  7. Si la donnée passe par l'attribut src, alors on peut utiliser JavaScript pour modifier une image… ah zut, j'ai le neurone qui s'emballe… Limite, on peut faire un tetris ou un lemmings sans générer 150000 transactions HTTTP pour les images… rhâââh si j'avais su ça quand j'ai écrit mon CV en HTML pour g**gle :-P

Les commentaires sont fermés.