Was ist Base64 und was bringt es?

Was ist Base64?

Es war einmal vor langer Zeit, da machte der E-Mail-Versand noch Probleme und allgemein war das Versenden von Daten alles andere als einfach. Doch zum Glück gab es die Base64 Kodierung, die Binärdateien in einfache Textzeichen umwandelte und sich somit schnell zum Standard generierte. Im Grunde ist das alles ganz einfach.

Base64 wandelt Daten (heute vorrangig Bilder) in Zeichen um, und zwar ursprünglich mit einem Satz von 64 Zeichen (daher der Name), die sich in jedem lateinischen Zeichensatz wiederfinden und somit auch überall anzeigen lassen. Oder anders gesagt: Aus einem Bild wird so HTML-Code, denn inzwischen gehören Base64 zum HTML-Standard und können somit ganz einfach für Internetprojekte eingesetzt werden, vor allem eben für Inline-Grafiken.

Warum Base64?

Nun stellt sich aber relativ schnell die Frage, warum Bilder in Base64 umgewandelt werden sollten. Ein Bild ist schnell erstellt, je nach Format hat es verschiedene Maße und Transparenzen, die Dateigrößen werden optimiert und minimiert, wozu also Base64 verwenden?

Im Grunde ist die Kodierung ein Nachteil, denn aus dem kleinen Bild wird eine ganze Menge Code und somit wächst die HTML-Größe rasant an, der Browser braucht länger, um die Website zu lesen und zu interpretieren. Das mag nun grundsätzlich stimmen, doch es gibt eben Einsatzgebiete, da macht es Sinn Bilder in Base64 zu kodieren, um so die Ladezeit zu verringern und die Abfragen einzusparen, letztendlich also die Performance zu verbessern.

Wie sollte Base64 eingesetzt werden?

Nun ist Base64 keine neue Erfindung, es ist eine Kodierung die es seit den späten 80er Jahren gibt. So richtig modern ist das Ganze also nicht, doch gerade im Bereich von HTML 5 macht es inzwischen wieder Sinn auf diese Art von Optimierung zu setzten.

Die Grundidee ist nämlich dieselbe geblieben. Bilder werden in Code umgewandelt und müssen deshalb nicht erst extern geladen werden. Sie befinden sich direkt im HTML-Code, werden also schon beim Aufruf erzeugt und an der richtigen Stelle platziert.

Ein Bild als externe Datei dagegen, muss erst noch zusätzlich abgefragt und angezeigt werden. Rein theoretisch dauert das länger, rein praktisch oft nicht, doch dazu später mehr. Trotzdem kann Base64 Sinn ergeben, vor allem um immer wiederkehrende und recht kleine Grafiken anzuzeigen.

Eignet sich Base64 für die Performance-Optimierung?

Mal ein schnelles Beispiel. Nehmen wir an, euer Blog zeigt auf der Startseite die letzten 10 Artikel an, alle mit Thumbnail, also einem Bild. Dazu kommen die üblichen Dateien, also das Logo, die CSS-Datei, vielleicht noch ein externes Javascript, sowie natürlich die komplette HTML-Seite selbst, die als ganzes geladen wird.

Nehmen wir das also an, dann lädt eure Website beim Aufruf die 10 Bilder, das Logo, die CSS-Datei, sowie das Javascript, alles in der HTML-Seite verpackt. Sind schon 15 Objekte.

Alle diese Objekte werden nun nacheinander abgearbeitet und meistens bremsen sich diese auch gegenseitig aus. Wären nun aber alle Bilder in Base64 Kodiert, wären sie Teil der HTML-Seite, wären also direkt im Code, müssten demnach nicht extra geladen werden.

Das Resultat wäre, dass statt 15 Objekten nur noch 4 geladen werden müssen. Die 11 Bilder (Das Logo ist auch ein Bild) befinden sich alle direkt im HTML-Code als Inline-Grafiken, erzeugen also keine extra Abfrage.

In der Theorie bedeuten weniger Anfragen auch immer eine bessere Ladezeit, weshalb die Reduzierung eine Performance-Optimierung verspricht.

Was bringt Base64 wirklich?

Nun ist das aber alles nur Theorie, denn in der Praxis werden 11 Bilder in der Base64-Kodierung die HTML-Seite extrem aufblähen. Diese generiert dann zwar deutlich weniger Anfragen, doch weil Base64 eben ziemlich viel Code erzeugt, wächst die Dateigröße dermaßen an, dass es länger dauert die HTML-Seite zu scannen, zu interpretieren und anzuzeigen.

Demnach ist der Performance-Zuwachs nicht mehr spürbar, weil nun die HTML-Seite so fett geworden ist, dass sie selbst zu einer Bremse wird. Base64 macht also nicht immer Sinn, zumindest nicht pauschal für alle Bilder eines Blogs. Trotzdem kann Base64 durchaus dafür genutzt werden, um eine Website zu optimieren.

Was heißt das jetzt?

Das heißt, dass Base64 immer dann angewandt werden kann, wenn es um einzelne Grafiken geht. Zeigt ihr auf eurem Blog also nur zwei Bilder an, spricht nichts dagegen diese direkt mit Base64 zu kodieren, denn das bringt Performance, spart die beiden Anfragen ein.

Wenn die Seite aber voll mit Bildern ist, macht es keinen Sinn diese alle in Base64 zu kodieren, weil das in so viel Code enden würde, dass die HTML-Seite zum Flaschenhals wird und alles andere ausbremst bzw. träge wird.

Es macht also durchaus Sinn, Base64 beim Logo einzusetzen, um so die Anfrage zu sparen und das Bild schneller anzuzeigen. Hier im Blog nutze ich Base64 zum Beispiel für die Grafik über den Share Buttons (der Teilen macht Spaß Schriftzug).

So muss für diese Grafik nicht extra eine Anfrage erstellt werden, sie ist einfach teil des HTML-Codes und kann sofort angezeigt werden, ohne große Ladezeit oder Umwege. Base64 macht also immer dann Sinn, wenn es sich um Einzelbilder bzw. wenige Bilder handelt.

Für alle Bilder einer Seite bedarf es dann aber zu viel Code, weshalb der Performance-Gewinn sich relativiert und die Seite stattdessen langsamer wird. Übrigens lassen sich auch Fonts in Base64 umwandeln und so direkt in eine Seite einbinden.

Wird Base64 indexiert?

Tja und hier kommt der Knackpunkt an der ganzen Geschichte. Base64 wird, soweit ich es weiß, nicht von Google indexiert. Demnach erscheinen alle Bilder die in base64 kodiert wurden auch nicht in der Google Bildersuche.

Bei den meisten Blogs ist das egal, weil die Google Bildersuche in ihren Statistiken sowieso nicht für viele Besucher sorgt und demnach gar nicht von Bedeutung ist, doch in manch einem Einzelfall kommen vielleicht extrem viele Nutzer über die Bildersuche auf die eigene Website.

Ich persönlich bin der Meinung, dass gerade nach den jüngsten Änderungen der Bildersuche nur noch ziemlich wenige Besucher darüber ihren Weg auf den eigenen Blog finden und das der Performance-Gewinn von größerer Bedeutung ist oder sein kann, als Nutzer, die wenn sie denn überhaupt kommen, eh nur nach einem Bild suchen, das vermutlich kopieren und schon wieder weg sind. Aber da muss jeder selbst überlegen und eine Entscheidung treffen.

Base64 in Wordpress

Der Einsatz von Base64 kann natürlich auch in WordPress positiv auf die Performance wirken. Wie ihr Bilder innerhalb von Wordpress automatisch in Base64 kodieren könnt, möchte ich an dieser Stelle erläutern:

Bilder automatisch in Base64 umwandeln

Innerhalb von WordPress gibt es viele Möglichkeiten Base64 zu nutzen, so zum Beispiel mit einer automatischen Umwandlung aller Bilder. Die ist nur temporär, die Originale bleiben also erhalten, doch mit wenig Bildern kann das kleine Snippet eine Menge Performance einbringen. Das wandelt, wie schon erwähnt, vorhandene Bilder direkt in Base64 um, sodass kein extra Bild mehr geladen werden muss, keine Anfrage gesendet wird und somit die Komplexität einzelner Aufrufe sinkt.

Weniger Anfragen sind theoretisch immer gut, aber das Thema hatten wir ja schon im Artikel über Base64. Heute geht es darum, dass alle Bilder innerhalb von Beiträgen und auch die Thumbnails in Base64 konvertiert werden, um so die Performance zu verbessern.

Vollautomatisch versteht sich, denn sonst würde das Ganze wieder in Arbeit ausarten. Natürlich lässt sich das Snippet auch schnell wieder deaktivieren und alles ist wie gehabt.

Folgendes in die Functions.php eures Themes eintragen:

class base64_encode_images{ function parse($content = ''){ return preg_replace_callback( '|<img(.*)src=["\'](.*?)["\'](.*)/>|i', create_function( '$matches', 'return "<img$matches[1]src=\'".(base64_encode_images::fetchurl($matches[2]))."\'$matches[3]/>";' ), $content ); } public function fetchurl($url = null, $ttl = 86400){ if($url){ $option_name = 'base64_encode_images_'.md5($url); $data = get_option($option_name); if(isset($data['cached_at']) && (time() - $data['cached_at'] <= $ttl)){}else{ $ch = curl_init(); $options = array( CURLOPT_URL => $url, CURLOPT_RETURNTRANSFER => true, CURLOPT_CONNECTTIMEOUT => 10, CURLOPT_TIMEOUT => 10 ); curl_setopt_array($ch, $options); $data['chunk'] = @base64_encode(curl_exec($ch)); $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); $data['mime'] = curl_getinfo($ch, CURLINFO_CONTENT_TYPE); curl_close($ch); if($http_code === 200){ $data['cached_at'] = time(); update_option($option_name, $data); } } } return 'data:'.$data['mime'].';base64,'.$data['chunk']; } }
 
add_filter('the_content', array('base64_encode_images','parse'));
add_filter('post_thumbnail_html', array('base64_encode_images','parse'));Code-Sprache: PHP (php)

Base64 kann Nitro und Bremse sein

Das Snippet für WordPress wandelt nun alle Bilder automatisch in Base64 um. Das kann nützlich sein, kann sich aber auch als Performance-Bremse erweisen, denn Base64 generiert eine Menge Code und somit sinken zwar die Requests, gleichzeitig wird der HTML-Code aber immer größer und braucht somit auch länger zum laden.

All das hatte ich im oben verlinkten Artikel zum Thema Base64 noch genauer ausgeführt. Base64 ist eine gelungene Möglichkeit die Performance spürbar zu verbessern, falsch eingesetzt kann die Performance innerhalb von WordPress aber auch massiv leiden.

Es gilt wie immer eine saubere Balance zu finden und somit ist das Snippet nicht pauschal eine Empfehlung. Es ist eine Möglichkeit, die richtig eingesetzt eine Menge bringen kann.

Falsch eingesetzt, etwa auf Blogs mit vielen großen Bildern, wird Base64 aber eher als Bremse, nicht als Nitro funktionieren. Probiert es einfach mal aus. Die Änderungen sind nicht permanent und das Löschen des Snippets macht alles wieder rückgängig und wie gehabt.

Auch nicht vergessen: Base64 wird von Google nicht indexiert. Das stört die Meisten nicht großartig, wer aber auf die Google Bildersuche angewiesen ist, verzichtet lieber auf das Snippet.

Base64 FAQ