Le Data URI Schema

Il vous est sans doute arrivé de voir dans le code source d’une page HTML des liens vers des images du type :

data:image/png;base64,...

Le seul intérêt de cette technique de liens définie dans le Data URI Scheme est de diminuer le nombre de requêtes HTTP/HTTPS vers le serveur.  Embarquées dans le code HTML de la page, ces images ne peuvent pas servir aux marketeux pour vous tracker !  Par précaution, j’ai ajouté à mes filtres AdBlocks Plus une règle bloquant les liens Data URL pouvant contenir du code HTML ou JavaScript :

|data:text/

Convertir une image au format Data URL

Il existe un service en ligne au nom de Data URL Maker qui vous permet de convertir vos images au format Data URL.

Le Data URI Schema

Code HTML

Vous pouvez aussi utiliser l’utilitaire uuencode qui se trouve dans le package sharutils sous CentOS/Red Hat/Fedora, qui s’utilise de la manière suivante :

uuencode -m votre_image.jpg nom_de_l_image >> test.html

Vous devez inclure le code généré par uuencode ou récupéré du service Data URL Maker au niveau des trois petits points :

<html>
  <body>
    <img src="data:image/jpg;base64,..."/>
  </body>
</html>

Code PHP

Vous pouvez utiliser le PHP :

<html>
  <body>
    <img src="data:image/jpg;base64,<?php echo base64_encode(file_get_contents('/home/www/votre_image.jpg'));?>" />
  </body>
</html>

Html  / Formateur PHP html php 

Commentaires

J’ai utilisé récemment cette fonction pour des erreurs http customisée… comme ça on est sûr que l’image sur laquelle on pointe sera dispo.

Il y a aussi deux autres intérêts :
* c’est une solution pour faire tenir un document complet au format HTML dans un seul fichier, en inlinant toutes les images,
* en corollaire, pour un mail au format HTML, c’est bien plus simple d’avoir un seul bloc contenant le HTML et les images plutôt que de devoir gérer un bloc pour chaque image et de référencer correctement les blocs images au sein du bloc HTML (par exemple, pour une newsletter, on peut du coup générer un seul fichier HTML qui pourra servir à la fois au contenu du mail et à être stocké sur un serveur web pour la consultation via un browser).

Mais attention à ne pas en abuser côté web par contre : ça diminue bien le nombre de requêtes, mais l’encodage base64 augmente de 33% le volume de données… À réserver donc plutôt aux petites images type icônes diverses, pour que les gains apportés par l’élimination d’une requête soient supérieurs aux pertes provoquées par l’augmentation de volume (problème qui ne se pose pas dans le cas d’un mail, vu qu’une image jointe sera de toute façon encodée en base64, qu’elle soit inlinée ou pas).

Des liens data url contenant du code HTML ou javascript… On en apprend tous les jours.

Laisser un commentaire

(requis)

(requis)