Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Was ist Base64 und was bringt es?

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

Wie ihr Bilder innerhalb von WordPress automatisch in Base64 kodieren könnt, erkläre ich euch in diesem Artikel anhand eines kleinen und recht einfachen Snippets. Wie und wo das innerhalb von WordPress dann aber überhaupt wirklich Sinn ergibt, müsst ihr natürlich selbst entscheiden. Alle wichtigen Faktoren habe ich in diesem Beitrag bereits dargelegt und so solltest ihr euch nun selbst ein Bild (Achtung Wortwitz!) machen können. Zumindest ein grundlegendes Verständnis von Base64 und warum die Kodierung im besten Fall ein Segen für die Performance sein kann, im schlimmsten Fall sich aber gleich wieder negativ auswirkt, sollte ihr nun haben. Mit Base64 zu arbeiten erfordert einfach ein wenig Balance, um einen echten Nutzen daraus zu ziehen.



Wordpress Performance eBook