Comment afficher des images encodées en Base64 dans un fichier HTML ?

L’encodage des images en base64 transforme un fichier image (binaire) en suite de caractères. L’image n’existes plus physiquement sur le serveur, elle est directement encodée dans la page.

Il y a divers intérêts à encoder ses images en base 64 mais c’est une autre histoire.

Je vous renvoie vers Wikipédia pour plus de détails : https://fr.wikipedia.org/wiki/Base64

Pour encoder une image en Base64, une URL utile :

https://www.motobit.com/util/base64-decoder-encoder.asp

Ensuite, dans votre fichier html, créez une balise image en indiquant dans la source :

data:image/[FORMAT] => remplacez [FORMAT] par : jpg, png, gif, etc.

;base64,

[VOTRE CODE EN BASE 64]

<!DOCTYPE html>
<html>
<head>
<title>Afficher une image en BASE 64</title>
</head>
<body>
<img style='display:block; width:100px;height:100px;' id='base64image'
src='data:image/png;base64, <!-- base64 data -->' /> 
</body>
</html>

Essayez en affichant cette page : image en base64. Cette image n’existe pas sous la forme de fichier traditionnel sur mon serveur. Elle est encodée directement dans la page. Affichez le code source pour voir !

Là où ça devient magique, c’est que si vous faites un clic droit Enregistrer sous sur cette image, et bien vous récupérez l’image originale, le fichier binaire au format png.