Base64 ist eine ASCII-Zeichen-Codierung, die hauptsächlich im Internet-Standard MIME (Multipurpose Internet Mail Extensions), zum versenden von E-Mail-Anhängen seine Anwendung findet. Durch die Codierung werden Dateitypen (PDF, ZIP, Bilddateien, EXE) als ASCII-Zeichenreihenfolge in den E-Mail-Quellcode geschrieben und so als Text verschickt. Der Mail-Client (Mail, Thunderbird, Outlook) „übersetzt“ diese Zeichenreihenfolge dann wieder und setzt sie zum entsprechenden Dateityp zusammen, den man dann im Anhang findet.

Diese Technik kann man sich auch im Quellcode zu Nutze machen. Der Vorteil dabei ist es, dass ein Bild nicht von irgendeinem Server geladen werden muss, sonder quasi direkt im Quelltext steht. Ein Anwendungsbeispiel wäre eine Signatur für eine E-Mail. Dabei kann man sein Logo in die Signatur einbinden und der Empfänger bekommt es in jedem Fall zu sehen. Auch wenn der Mail-Client Bilder blocken möchte. Da dieses Bild aber nicht von einem externen Server geladen wird, sondern im Code steht, wird es angezeigt.

Den base64-Code bindet man wie folgt in ein IMG-Tag ein:

<img src="data:image/png;base64,...hier folgt der base64-Code..." alt="Testbild" />

Der Code wird also im SRC-Attribut des IMG-Tags eingefügt. Hier muss noch auf den Bildtyp geachtet werden. Handelt es sich zum Beispiel um eine JPEG-Datei, so muss es natürlich „…image/jpg;…“ heißen. Entsprechend für alle anderen im Netz gängigen Bildformate.

Zum codieren eurer Bilder braucht es nun natürlich noch einen entsprechenden Encoder. Auf der Seite von opinionatedgeek.com findet Ihr einen solchen Encoder. Dort müsst Ihr über die Upload-Schaltfläche die Datei hochladen, die Ihr umgewandelt haben möchtet und anschließend auf „encode“ klicken. Es erscheint nun ein Frame, in dem euer base64-Code steht. Den kopiert Ihr euch (am besten mit Strg+A, bzw. Apfel+A markieren) und fügt ihn wie oben beschrieben in den HTML-Code ein.

Ich habe mal mein Logo in base64 encodiert und die Zeichenreihe in einen Texteditor kopiert. So sieht das Ganze aus:

Base64 Code

Codiertes PNG im base64-Format

Randnotiz:
Der base64-Code kann, je nach Dateigröße, ziemlich lang werden. Es ist allerdings wichtig, dass Ihr wirklich ALLE! Zeichen kopiert und in den Quelltext einfügt. Sobald auch nur eins fehlt oder an der falschen Stelle sitzt, kann das Bild nicht mehr zusammengebaut werden.
Der hier empfohlene Encoder schreibt den Code in eine Zeile, was auch gut so ist, da selbst Zeilenumbrüche dazu führen können, dass das Bild nicht mehr angezeigt wird.

Mit dieser Methode könnte man also auch andere Dateiformate encodieren und in den Quelltext einbauen. Ich halte es aber nicht für sinnvoll andere Formate als Bilddateien im Quellcode zu verwenden. Was sollte man denn auch schon mit einem bse64 codierten ZIP-File im Code anfangen?

Links zu diesem Artikel: