HTML/CSS und Base64 kodierte Bilder

Wofür kann man das brauchen?

Im normalen Alltag wird man Base64 auf Websiten sicherlich eher wenig antreffen. Das liegt einfach an dem Nachteil, dass so eingebunde Bilder oder Daten im Allgemeinen nicht gecached werden und dadurch immer wieder heruntergeladen werden. Gegebenenfalls ist es sinnvoll, wenn man ein Bild mit 100%iger Sicherheit nur wirklich ein einziges Mal auf einer Hauptseite braucht und es dabei so klein ist, dass die HTTP-Anfrage länger dauert, als das eigentliche Laden. (Aber meist finden sich dann auch noch mehrere kleine Bilder auf der selben Seite. Warum also kein Sprite?) Das war es dann meiner Meinung nach auch mit möglichen Einsatzmöglichkeiten.

Trotzdem hatte ich letztens erst einen Spezialfall, wo man die Technick doch wieder gebrauchen kann: Für die Errorfiles eines haproxys. Diese Dateien werden vom Proxy direkt an den Client gesendet, sobald die Infrastruktur dahinter ggf. komplett weg ist. Ihre Größe (pro Datei) ist dabei entweder auf 8 oder 16 kB beschränkt. Da bleibt nicht gerade viel Platz für hübsches Webdesign. Aber es muss auch nicht eine ganz spartanische HTML-Website ohne jegliches CSS sein. Weiteres Problem dabei aber: Wenn das Errorfile des Proxy aktiviert wird, ist wie angedeutet im wort case auch der eigene CDN nicht mehr verfügbar. Also müssen die Bilder – z.B. ein Logo – direkt ins HTML. (eine Übersicht zu Bildkompressionen gab es ja schon vor Längerem) Das Mittel der Wahl hier: Base64.

Ok. Wie geht es?

Konvertieren

Unter Linux kann man eine bestehende Datei ganz einfach über den Befehl

1

$ base64 -w 0 datei.png

mit base64 kodieren. Die Ausgabe erfolgt dabei ohne weitere Angaben direkt auf der Shell. Gut für c&p. Ansonsten einfach in eine Datei seiner Wahl pipen.

Die Option -w 0 bewirkt dabei, dass die standardmäßige Begrenzung auf 76 Zeichen pro Zeile aufgehoben ist. Diese Begrenzung mag ganz schön für E-Mails sein, aber im Quelltext einer HTML-Seite eher weniger. Außerdem brauchen die Zeilenenden ebenfalls ein wenig zusätzlichen Platz – wenn zugegebenermaßen auch sehr wenig. (laut dem oben verlinkten Wikipediaartikel 3%)

Einbinden

Über ein img-Tag lässt sich die erzeugte Zeichenkette relativ einfach über das folgende Gerüst nutzen:

1

<img src="data:image/png;base64,[data-String]">

image/png ist dabei nichts anderes als der für das Dateiformat entsprechende Mime-type.

Über CSS, also vornehmlich background: und background-image:, lässt es sich sehr ähnlich einbinden:

1

.xy {background-image: url('data:image/png;base64,[data-String]');}

Das war es auch schon. Ganz nebenbei weiß man jetzt auch, wie die meisten E-Mail-Anhänge funktionieren und warum das nicht gerade die effizientest Methode ist, (größere) Daten zu übertragen…

(ja, das Smiley ist ausnahmsweise per base64 eingebunden)