Base64 stammt noch aus den Anfangszeiten des Internets. Damals wandelte Base64 vor allem E-Mail Anhänge in einfache Zeichenfolgen um, da der Versand von Anhängen bei den ursprünglichen Standards von SMTP noch ein Problem darstellte. Base64 heißt übrigens so, weil bei der Umwandlung nur 64 ASCII-Zeichen zum Einsatz kommen.
Kurz gesagt verwandelt der Base64 Encoder eure Dateien also in lesbaren Code um, der dann beispielsweise direkt in HTML-Seiten oder eure CSS integriert werden kann. Der Vorteil von einem Base64 Encoder ist also, dass Bilder als Base64 direkt inline eingebettet werden können. Das spart die Anfrage und den Download einer weiteren Datei.
Vorteile bringt Base64 vor allem in Sachen Performance. Gerade wenn es um kleine Bilder geht, ist der zusätzliche Aufruf oft überflüssig und kann umgangen werden, wenn das jeweilige Bild als Base64 integriert wird. Ein Base64 Encoder produziert dabei Code, der lesbar ist und vom Browser direkt interpretiert werden kann. Das kann unter anderem auch bei Webfonts von Vorteil sein.
Der Nachteil ist, dass Base64 je nach Dateigröße und Art sehr viele Zeichen benötigt, potenziell also auch mehr Speicherplatz verbraucht. Weitere Infos dazu und einen Online Base64 Encoder findet ihr hier auf der Website. Mit dem Button könnt direkt zum Encoder springen.
Jetzt noch einmal etwas genauer. Base64 kam ursprünglich beim Versand von E-Mails zum Einsatz. Weil die Übertragung von Dateien damals ein Problem darstellte, wurden selbige mit einem Base64 Encoder umgewandelt und anschließend als einfache Zeichenfolge verschickt, die dann mit einem Base64 Decoder wieder lesbar wurde. Der Name kommt von den ursprünglich verwendeten 64 Zeichen.
Base64 gehört zum Internetstandard MIME (Multipurpose Internet Mail Extensions), der heute oft auch als Internet Media Type bezeichnet wird. Das Verfahren nutzt dabei einfache ASCII Zeichen, die vom Base64 Encoder erzeugt werden. Am Zielort verwandelt der Base64 Decoder diese dann wieder in die ursprüngliche Datei.
Technisch gesehen wandelt Base64 drei Bytes in vier Zahlen von sechs Bits um. Die Zeichen im ASCII-Standard bestehen dabei aus sieben Bits, wobei Base64 nur sechs Bits verwendet. Sonderzeichen, die im ASCII-Standard verfügbar sind, kommen bei Base64 nicht zum Einsatz.
Prinzipiell ist Base64 eine alte Technik. Das stimmt aber nur teilweise, denn auch heute können Inhalte, die mit Base64 codiert wurden, von Vorteil sein. Zum Beispiel bei der Performance-Optimierung von Websites, wo mit Hilfe von Base64 die Anfragen reduziert werden können.
Vor allem Bilder sind es, die oft mit einem Base64 Encoder umgewandelt werden. Dabei geht es darum, Grafiken und Icons, die eher unwichtig erscheinen und keine größere Rolle spielen, möglichst nicht als einzelne Datei laden zu müssen. Häufig werden kleine Bilder daher in Base64 Code verwandelt und direkt in die jeweilige Website integriert. Auch Webfonts können auf diese Weise Teil der CSS-Datei werden.
Statt also für jedes kleine Icon extra eine eigene Bilddatei anlegen zu müssen, wird diese via Base64 Encoder in lesbaren Code umgewandelt und direkt als Inline-Element integriert. Das bedeutet, dass beim Aufruf der Website das Icon nicht erst geladen werden muss, sondern sich bereits im HTML-Code befindet. Der Browser zeigt das Bild also an, sobald die HTML-Seite heruntergeladen wurde. Ganz ohne eine zusätzliche Anfrage für die Datei.
Wer eine Website lädt, der ruft immer auch verschiedene dazugehörige Dateien ab. Den Quellcode in Form der HTML-Seite, die darin verlinkten Bilder, Scripte und CSS-Dateien, Schriftarten und noch vieles mehr. Aus all diesen Einzelteilen setzt der Browser am Ende dann die eigentliche Website zusammen.
Je nach Homepage artet die Anzahl an Ressourcen, die beim ersten Seitenaufruf geladen werden müssen, schon einmal aus. Mit einem Base64 Encoder kann die Zahl der Anfragen jedoch drastisch reduziert werden. Besonders kleine Dateien eignen sich ideal, um als Base64 direkt in den Code einer Website integriert zu werden. So sind sie bereits beim ersten Aufruf verfügbar, da sie sofort lesbar sind und nicht erst separat geladen werden müssen.
Statt also beim Aufruf einer Website erst einmal zehn Thumbnails und zwanzig Icons zu laden, könntet ihr die Icons alle als Base64 Code integrieren. Statt dreißig Anfragen hättet ihr dann nur noch zehn, die für die Thumbnails zuständig sind. Auch wenn der HTML-Code dadurch deutlich größer wird, ist der Performancegewinn dies oft wert. Außerdem werden weniger Abfragen an den Server gestellt, was ebenfalls vorteilhaft sein kann.
Ein Base64 Encoder verbessert also die Performance, indem er die Anfragen reduziert. Kleine Bilder lassen sich dabei problemlos als Base64-Code direkt in die jeweilige Website integrieren. Nur bei Fotos wäre Base64 einfach zu groß. Alles, was mit Base64 eingebunden wird, muss am Ende nicht separat geladen werden. Das ist der wesentliche Vorteil dieser Technik und Methode.
Auch wenn Icons via CSS-Datei (zum Beispiel als Background) eingebunden werden, hilft Base64, indem eine direkte Integration statt einer Verlinkung erfolgt. Es gibt daher keinen Umweg mehr über eine separate Bilddatei. Mit dem Base64 Encoder wird lesbarer Code erzeugt, der genau so in den Stylesheet integriert werden kann. Das gilt in gleicher Weise für Webfonts, die mit dem richtigen Subset und verkleinert als Base64 zusätzlich im localStorage zwischengespeichert werden können. Mehr Performance-Optimierung geht einfach nicht.
Base64 ist also ideal dazu geeignet, die Performance eurer Website in den Details zu perfektionieren. Was vorher eine einzelne Datei erforderte, kann so mithilfe des Base64 Encoder als Inline-Element hinzugefügt werden. Dies gelingt mit fast allen kleinen Dateien, nur größere sollten nicht mittels Base64 umgewandelt werden. Warum erkläre ich euch im nächsten Absatz. Leider hat Base64 nämlich auch einige Nachteile.
Den auffälligsten Nachteil, den Base64 mitbringt, ist, dass Base64 pauschal immer größer als die jeweilige Datei selbst ist. Wenn das ursprüngliche Bild also ca. 600 Kilobyte aufweist, dann ist die Base64-Version wahrscheinlich um die 800 Kilobyte groß. Das ist schon heftig! Base64 ist fast immer rund ein drittel größer als die Quelldatei selbst.
Bei kleinen Grafiken und Icons fällt der Größenunterschied allerdings nicht ins Gewicht. Der Vorteil, der durch die reduzierten Serveranfragen kommt, ist den minimalen Größenzuwachs schlichtweg wert. Nur bei Fotos oder Fonts sieht die Sache ein wenig anders aus. Hier ist Base64 oft keine Hilfe, weil es die Dateien nicht effektiv integrieren kann. Wer Webfonts via Base64 einbinden möchte, muss diese daher mit dem richtigen Subsetting verkleinern, damit selbiges vorteilhaft gelingt.
Base64 ist also überall dort sinnvoll, wo die Quelldateien klein und bereits bestmöglich optimiert sind. Große Dateien werden hingegen nur noch größer und blähen den Code, in den sie integriert werden, spürbar auf. Für die Performance ist das eher schlecht. Wichtig ist daher, dass ein Base64 Encoder nur dort zum Einsatz kommt, wo es um kleine Dateien geht, die nicht extra geladen werden sollen.
Die Umwandlung in Base64 erfordert somit mehr Speicherplatz als die ursprüngliche Quelldatei. Ungefähr ein Drittel mehr, um genau zu sein. Base64 macht dort Sinn, wo es um wenige, in erster Linie kleine Dateien geht. Wer auf seiner Website drei Bilder anzeigt und diese mit einem Base64 Encoder umwandelt, um sie direkt einzubinden, spart sich drei Anfragen. Das bringt oft bereits sehr viel und der zusätzliche Speicherplatz ist verschmerzbar.
Sind bei den drei Bildern jedoch zwei hochauflösende Fotos dabei, sollte nur das Icon mit dem Base64 Encoder umgewandelt und als Inline-Element eingebunden werden. Die anderen Bilder wären als Base64 zu groß, würden die Ladezeit also eher negativ beeinflussen. Base64 macht daher nur dort Sinn, wo es um kleine und unwichtige Assets geht.
Dann gibt es noch das Thema Webfonts. Diese mit einem Base64 Encoder umzuwandeln und direkt in die Website zu integrieren, kann unter Umständen sehr viel bringen. Ich selbst handhabe das bei einigen Projekten so und habe damit gute Erfahrungen gemacht. Mit Base64 entsteht kein Umweg mehr und die Font ist direkt beim Seitenaufruf verfügbar. Hier kommt es aber auf viele Details an, da der Base64-Code sonst riesig ausfällt. Subsetting und Woff2 sind Pflicht und im besten Fall wird auch der localStorage verwendet.
Um eine Datei in Base64 umzuwandeln, müsst ihr auf den Button unten klicken, die Datei auswählen und den Code aus dem Feld darüber kopieren. Ein Klick in das Feld genügt, der Code wird dann automatisch in die Zwischenablage kopiert und kann übernommen werden.
Der Base64 Encoder funktioniert mit fast allen Dateien, also nicht nur mit Bildern, sondern ebenso mit Webfonts, PDF und vielen weiteren Formaten. Sinn macht Base64 aber lediglich dort, wo die Ursprungsdatei nicht zu groß ausfällt. Das hatte ich oben bereits genauer erklärt.
Bevor eine Datei in Base64 umgewandelt wird, sollte sie entsprechend komprimiert und optimiert werden. Erst dann empfiehlt es sich, die Datei in den Base64 Encoder zu laden. Je kleiner die ursprüngliche Datei bereits ist, desto optimaler wird der Base64-Code. Trotzdem ist Base64 immer rund ein drittel größer als die Quelldatei.
JPG zu Base64, PNG zu Base64, SVG zu Base64, GIF zu Base64, WOFF2 zu Base64, PDF zu Base64, Webfont zu zu Base64 ... u.v.m.
Base64 eignet sich ideal, um Bilder einzufügen, die nicht allzu bedeutungsvoll sind. Icons aller Art, Profilbilder, vielleicht auch das Favicon oder ähnliche Symbole, die nicht direkt SEO-Relevant oder wichtig für die Nutzer*innen sind.
Bei einem Logo ist Base64 ebenfalls von Vorteil. Logos liegen häufig als SVG oder PNG vor, sind optimiert und werden ganz oben auf der Seite eingefügt. Das bedeutet, dass bei einem Aufruf zunächst das Logo geladen wird. Ist das Logo aber als Base64 eingebunden, ist keine weitere Anfrage notwendig,. Die Website lädt demnach deutlich schneller.
Doch Base64 hat auch einen Haken. Was als Base64 eingefügt und integriert ist, wird von Google nicht indexiert. Zwar habe ich in den letzten Jahren immer wieder beobachtet, dass Google sehr wohl in der Lage ist, Base64-Code zu lesen und die Dateien zu interpretieren, doch indexiert werden die Bilder zum aktuellen Zeitpunkt noch nicht, jedenfalls nicht mit Sicherheit. Dazu weiter unten ein wenig mehr.
Bei Webfonts ist es wichtig, diese extrem stark zu optimieren. Ich rede hier nicht davon, eine Webfont herunterzuladen und diese direkt durch den Base64 Encoder zu schicken. Das Resultat wäre viel zu groß und in der Realität nicht effizient nutzbar.
Bei Webfonts ist es daher wichtig, die Zeichen zu entfernen, die ihr nicht benötigt. Sonderzeichen, mathematische Symbole und so weiter. Das nennt sich Subsetting. Alles raus damit, was nicht gebraucht wird. Ihr erstellt also ein Subset der Font, welches nur noch die benötigten Zeichen enthält. Klar, dass diese Font dadurch erheblich weniger Speicherplatz verbraucht und auch die Base64-Version kleiner ausfallen wird.
Online geht das recht grob mit dem Font Squirrel Generator. Besser ist aber ein Font Editor (meinen stelle ich euch bei den Tools vor), mit dem ihr die Zeichen von Hand entfernen und die Font noch einmal optimiert speichern könnt. Variable Fonts kann Font Squirrel übrigens auch nicht, hier ist also sowieso Handarbeit gefragt. Wer sich für den LocalStorage in Verbindung mit Base64 und Webfonts interessiert, sollte sich am besten den Local Font Cache ein wenig genauer ansehen.
Wichtig ist, dass die Webfont am Ende nur noch um die 10 Kilobyte groß sein sollte. Schafft ihr das nicht, müsst ihr weiter optimieren, denn hier ist eine Grenze erreicht. Alles, was darüber liegt, ist nach der Umwandlung im Base64 Encoder einfach zu groß, um effektiv nutzbar zu sein. Jedenfalls ist das meine Erfahrung mit Base64 Webfonts.
Soweit mir bekannt ist, indexiert Google die Base64-Inhalte zum aktuellen Zeitpunkt nicht. Das kann ein Vorteil, jedoch ebenso ein Nachteil sein. Meist ist es aber eher positiv, dass die Base64-Inhalte nicht indexiert werden können, weil sie auch gar nicht indexiert werden sollen.
Ein praktisches Beispiel sind Icons, Favicons und Webfonts. Diese soll Google zwar interpretieren und nutzen können, aber nicht zwangsläufig indexieren. Was hättet ihr schließlich davon, wenn jedes Icon und jede Font auch im Google Index landen würde?
Für normale Bilder, die im Bereich SEO eine Rolle spielen, bedeutet dies natürlich, dass sie auf gar keinen Fall als Base64-Code eingefügt werden sollten. Base64 eignet sich also für Bilder und Dateien, die nicht zwingend im Google Index landen müssen und die, wenn man so will, nicht allzu wichtig sind.
Jetzt habe ich viel davon gesprochen, wie und wofür der Base64 Encoder verwendet werden kann, um die Performance einer Website zu verbessern. Doch wie wird Base64 in der Realität wirklich integriert?
Tatsächlich bin ich selbst großer Fan von Base64 und verwende es regelmäßig und recht umfangreich, je nach Projekt. Vor allem Icons lassen sich wunderbar mit dem Base64 Encoder umwandeln und entsprechend platzsparend einbinden.
Der Code selbst wird dabei ganz normal via HTML und als Inline-Element hinzugefügt. Hier ein paar Beispiele, die deutlich machen, wie Base64 in der Praxis verwendet wird.
Der Base64 Encoder erlaubt es, Dateien in einen einfachen Zeichencode umzuwandeln. Dabei verwendet Base64 die 64 ASCII-Zeichen, jedoch keinerlei Sonderzeichen. Jedes ASCII-Zeichen besteht dabei aus sieben Bits. Base64 verwendet aber nur sechs Bits bei der Umwandlung.
Jedes Bit wird mit dem Base64 Encoder in zwei Bits unterteilt. Das wiederum bedeutet, dass der Speicherplatz entsprechend stark ansteigt. Base64 ist somit fast immer ein Drittel (33 Prozent) größer als die ursprüngliche Datei, die als Quelle dient.
Base64 Encoding ist trotz seiner offensichtlichen Nachteile äußerst effektiv, um bestimmten Content als Inline-Element einzubinden. Vor allem Bilder oder Webfonts können, wenn sie vorab in ihrer Größe komprimiert wurden, sehr ressourcenschonend integriert und deutlich schneller geladen werden.
Der Base64 Converter oder auch Base64 Encoder wandelt fast alle Dateien in Base64-Code um. Dieser besitzt dabei bereits die Dateiattribute, die notwendig für die richtige Interpretation im Browser sind. Auf diese Weise kann der Code, welcher vom Base64 Encoder ausgegeben wird, direkt kopiert und eingefügt werden.
Wichtig ist, dass alle Dateien, die mit dem Base64 Converter umgewandelt werden, vorab bereits komprimiert und optimiert wurden. Das gilt vor allem für Bilder und Fonts, die auf einer Website eingesetzt werden sollen. Base64 lässt sich nur vorab optimieren, der Code selbst kann also nicht weiter komprimiert werden.
Das war dann alles zum Thema Base64. Ich denke, hier auf Website wurden die typischen Fragen ausführlich beantwortet, die bei den meisten Anfängern auftauchen werden. Sollte noch eine Frage offen sein, werde ich sie bestimmt in Zukunft hinzufügen, um auch diese zu aufzuklären. Bis dahin probiert den Base64 Encoder ruhig ein wenig aus und sammelt eigene praktische Erfahrungen mit Base64.