DKeu

Mit dem Base64 Encoder Dateien online in Base64 umwandeln und verstehen, was Base64 ist und wie es funktioniert. Alle Infos inkl. Base64 Encoder.

*Affiliatelinks Impressum Datenschutz

Base64 Encoder

Base64 stammt eigentlich 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 demnach, dass Bilder als Base64 beispielsweise 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.

Der Nachteil ist, dass Base64, je nach Dateigröße und Art, sehr viele Zeichen benötigt, potenziell also auch mehr Speicherplatz verbraucht. Mehr Infos und einen Online Base64 Encoder, findet ihr hier auf der Website.

Direkt zum Online-Tool

Was ist Base64?

Jetzt noch einmal etwas genauer. Base64 kam ursprünglich beim Versand von E-Mails zum Einsatz. Weil der Versand von Dateien damals ein Problem darstellte, wurden selbige mit einem Base64 Encoder umgewandelt und dann als einfache Zeichenfolge verschickt, die dann mittels Base64 Decoder lesbar war. Der Name kommt von den ursprünglich verwendeten 64 Zeichen.

Base64 ist gehört dabei zum Internetstandard MIME (Multipurpose Internet Mail Extensions), der heute oft als Internet Media Type bezeichnet wird. Das Verfahren nutzt einfache ASCII Zeichen, weshalb nur die Zeichen verschickt werden können, die vom Base64 Encoder erzeugt wurden. Diese werden dann mittels Decoder wieder zur ursprünglichen Datei.

Technisch gesehen, wandelt Base64 drei Bytes in vier Zahlen von sechs Bits um. Die Zeichen im ASCII-Standard bestehen dabei jeweils aus sieben Bits, wobei Base64 nur sechs Bits verwendet. Sonderzeichen, die im ASCII-Standard verfügbar wären, kommen bei Base64 nicht zum Einsatz.

Wie Base64 genutzt wird

Prinzipiell ist Base64 eine Technik von früher. Das stimmt aber nur zum Teil, denn auch heute können Inhalte, die mit Base64 kodiert sind, von Vorteil sein. Zum Beispiel bei der Performance-Optimierung von Websites, wo mit Hilfe von Base64 die Anfragen drastisch reduziert werden können.

Vor allem Bilder sind es, die oft mit einem Base64 Encoder umgewandelt werden. Dabei geht es darum, vor allem kleine Grafiken und Icons, die eher unwichtig sind und keine größere Rolle spielen, möglichst nicht als einzelne Datei laden zu müssen. Häufig werden derartige Grafiken daher in Base64 umgewandelt und direkt in die jeweilige Website eingebunden.

Statt also für jedes kleine Icon extra eine eigene Bilddatei zu laden, wird diese dann via Base64 Encoder in lesbaren Code verwandelt 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 der Website befindet.

Performance von Base64

Lade ich eine Website, lade ich immer auch verschiedene Elemente. Den Quellcode, die darin verlinkten Bilder, Scripte und CSS-Dateien, Schriftarten und 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 der 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önnte ich die Icons alle als Base64 Code integrieren. Statt dreißig Anfragen, hätte ich dann nur noch zehn, die für die Thumbnails zuständig sind. Auch wenn der HTML Code dadurch größer wird, ist die Performance meist besser, weil weniger einzelne Anfragen gestellt werden müssen.

Optimierung mit Base64

Ein Base64 Encoder verbessert also die Performance, indem er die Anfragen reduziert. Kleine Bilder lassen sich dabei problemlos als Base64 direkt in den Code der jeweiligen Website integrieren, nur bei Fotos wäre Base64 zu groß. Alles was mit Base64 eingebunden wird, muss am Ende nicht extra geladen werden.

Auch wenn Icons via CSS-Datei, beispielsweise als Background, eingebunden werden sollen, hilft Base64, indem auch hier eine direkte Integration erfolgen kann (siehe Beispiele weiter unten). Es gibt daher keinen Umweg mehr über eine separate Bilddatei, mit dem Base64 Encoder wird direkt lesbarer Code erzeugt.

Base64 ist also perfekt für die Performance-Optimierung geeignet. Was vorher eine einzelne Datei war, kann so mittels Base64 Encoder als Inline-Element integriert werden. Das gelingt mit fast allen kleinen Dateien, nur größere Dateien sollten nicht mittels Base64 umgewandelt werden. Warum, erkläre ich euch im nächsten Absatz. Leider hat Base64 nämlich auch einige Nachteile.

Nachteile von Base64

Den wohl auffälligsten Nachteil, den Base64 mitbringt, ist, dass Base64 pauschal immer größer als die jeweilige Datei ist. Wenn das ursprüngliche Bild also ca. 500 Kilobyte groß ist, dann ist die Base64-Version vermutlich um die 700 Kilobyte groß. Das ist schon heftig! Base64 ist fast immer ein drittel größer als die Quelle selbst.

Bei kleinen Grafiken und Icons fällt der Größenunterschied allerdings nicht ins Gewicht, weil der Vorteil, der durch die reduzierten Abfragen kommt, am Ende überwiegt. Nur bei großen Fotos oder Fonts, sieht die Sache ein wenig anders aus. Hier ist Base64 meist zu groß, um es effektiv zu nutzen.

Base64 ist also überall dort sinnvoll, wo die Quelldateien klein und optimiert sind. Große Dateien werden hingegen nur noch größer und blähen den Code, in den sie integriert werden sollen, ebenfalls spürbar auf. Für die Performance ist das ziemlich 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.

Wo Base64 Sinn macht

Base64 macht dort Sinn, wo es um wenige, in erster Linie kleine Bilder 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 meist 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 Bildern wären als Base64 zu groß, würden die Ladezeit also nicht unbedingt verbessern. Base64 macht dort Sinn, wo es um kleine, eher unwichtige Assets geht.

Dann gibt es noch das Thema Webfonts. Diese mit einem Base64 Encoder umzuwandeln und direkt in die Seite zu integrieren, kann unter Umständen sehr viel bringen. Ich selbst handhabe das bei einigen Projekten so. 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.

Base64 Online Encoder

Um eine Datei in Base64 umzuwandeln, müsst ihr nur auf den Button unten klicken, die entsprechende 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.

Der Base64 Encoder funktioniert mit fast allen Dateien, also nicht nur mit Bildern, sondern auch mit Fonts, Webfonts, PDF und vielen weiteren Formaten. Sinn macht Base64 aber nur dort, wo die Ursprungsdatei nicht zu groß ausfällt.

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, desto optimaler der Base64 Code. Trotzdem ist Base64 immer rund ein drittel größer.

Bilder in Base64 umwandeln

Base64 eignet sich ideal, um Bilder einzufügen, die nicht allzu wichtig sind. Also Icons aller Art, Profilbilder, vielleicht auch das Favicon oder ähnliche Symbole, die nicht direkt SEO-Relevant oder wichtig für den Nutzer sind.

Auch bei einem Logo ist Base64 von Vorteil. Logos liegen meist als SVG oder PNG vor, sind bereits optimiert, werden aber ganz oben auf der Seite eingefügt. Das bedeutet, dass beim Seitenaufruf als erstes das Logo geladen werden muss. Wird das Logo aber als Base64 eingebunden, ist keine weitere Anfrage notwendig, die Website lädt demnach auch deutlich schneller.

Doch Base64 hat auch einen Haken. Was als Base64 eingefügt integriert ist, wird von Google nämlich 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 sie zum aktuellen Zeitpunkt nicht. Dazu unten noch ein wenig mehr.

Webfonts in Base64 umwandeln

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 wichtig, alle Zeichen zu entfernen, die ihr nicht benötigt. Sonderzeichen, Mathematische Symbole und so weiter. Alles raus damit. Das nennt man Subsetting. Man erstellt also ein Subset der Font, welches nur die gewünschten Zeichen enthält. Klar, dass die Datei dadurch erheblich weniger Speicherplatz benötigt.

Online geht das recht grob mit dem Font Squirrel Generator. Besser ist aber ein Font Editor (meinen stelle ich euch hier 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.

Wichtig ist, dass die Webfont am Ende nur noch um die 5 bis 10 Kilobyte groß sein darf. Schafft ihr das nicht, müsst ihr weiter optimieren, denn hier ist im Grunde eine Grenze erreicht. Alles was darüber liegt, ist nach der Umwandlung im Base64 Encoder einfach zu groß, um noch effektiv nutzbar zu sein.

Indexiert Google Base64?

Soweit mir bekannt ist, indexiert Google Base64 kodierte Inhalte zum aktuellen Zeitpunkt nicht. Das kann ein Vorteil, jedoch auch ein Nachteil sein. Meist ist es aber eher positiv, dass die Base64 kodierten 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 auslesen 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 landet? Genau, im Grunde gar nichts.

Für normale Bilder, die im Bereich SEO eine Rolle spielen, bedeutet dies natürlich, dass sie auf gar keinen Fall als Base64 Bild eingefügt werden sollten. Base64 eignet sich also für Bilder und Dateien, die nicht im Google Index landen müssen und die, wenn man so will, einfach nicht allzu wichtig sind.

Base64 Beispiele

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 wirklich verwendet?

Tatsächlich bin ich selbst großer Fan von Base64 und verwende es selbst sehr umfangreich, je nach Projekt. Vor allem Icons (z.B. Social Media Icons), lassen sich wunderbar mit dem Base64 Encoder umwandeln und entsprechend platzsparend einbinden.

Der Code selbst wird dabei ganz normal via HTML bzw. als Inline-Element eingebunden. Hier ein paar Beispiele, die deutlich machen, wie Base64 in der Praxis verwendet wird.

Base64 Encoding

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 steigt. Base64 ist in der Regel ein Drittel (33 Prozent) größer als die Ursprüngliche Datei, die als Quelle dient.

Base64 Encoding ist, trotz seiner offensichtlichen Nachteile, äußerst nützlich, um bestimmten Content als Inline-Element einzubinden. Vor allem Bilder oder Webfonts können, wenn sie vorab in ihrer Größe minimiert wurden, sehr ressourcenschonend integriert und deutlich schneller geladen werden.

Base64 Konverter Online

Der Base64 Konverter 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. So kann der Code, welcher vom Base64 Encoder bzw. dem Base64 Konverter ausgegeben wird, direkt eingesetzt werden.

Wichtig ist, dass alle Dateien, die mit dem Base64 Konverter umgewandelt werden, vorab bereits komprimiert bzw. 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 mehr komprimiert werden.

Das war nun auch alles zum Thema Base64. Ich denke auf der Website wurden die typischen Fragen beantwortet, die bei den meisten Anfängern auftauchen. Sollte noch eine Frage offen sein, werde ich sie bestimmt in Zukunft noch einfügen, um auch diese zu beantworten. Bis dahin probiert den Base64 Encoder einfach ein wenig aus und sammelt eigene Erfahrungen.