Was ist Base64-Kodierung?
Base64-Kodierung wandelt Binärdaten wie Bilder in eine textbasierte Darstellung um. Das Ergebnis ist ein langer String aus Buchstaben, Zahlen und wenigen Sonderzeichen, der sich überall dort einsetzen lässt, wo nur Text erlaubt ist.
Als Data URI kannst du ein Base64-kodiertes Bild direkt in HTML oder CSS einbetten, ohne eine separate Bilddatei zu benötigen. Das sieht dann so aus: data:image/png;base64,... gefolgt vom kodierten String. Der Browser dekodiert den String und zeigt das Bild an.
Formidex kodiert und dekodiert Base64 vollständig im Browser. Du kannst ein Bild hochladen und erhältst den Base64-String zum Kopieren, oder du fügst einen Base64-String ein und erhältst das Bild als Download.
Wie funktioniert Base64-Kodierung?
Base64 nimmt jeweils drei Bytes der Quelldaten und wandelt sie in vier druckbare ASCII-Zeichen um. Dabei wird ein Alphabet aus 64 Zeichen verwendet: A bis Z, a bis z, 0 bis 9, Plus und Schrägstrich. Diese Umkodierung ist verlustfrei und jederzeit umkehrbar.
Der Nachteil: Base64-kodierte Daten sind etwa 33 Prozent größer als die Originaldatei. Ein 100 KB großes Bild wird als Base64-String etwa 133 KB groß. Deshalb eignet sich die Methode vor allem für kleine Bilder wie Icons und Platzhalter.
Tipps für beste Ergebnisse
Nutze Base64-Einbettung nur für kleine Bilder. Icons, Platzhalter-Grafiken und winzige UI-Elemente unter 10 KB profitieren davon, da ein HTTP-Request eingespart wird. Für größere Bilder überwiegt der Nachteil der 33 Prozent Größenzunahme.
Data URIs werden nicht separat vom Browser gecached. Wenn dasselbe Bild auf mehreren Seiten verwendet wird, muss es bei jedem Seitenaufruf erneut geladen werden. Für wiederverwendete Bilder sind deshalb normale Bilddateien die bessere Wahl.
In E-Mail-Signaturen und Newslettern sind Data URIs besonders nützlich, da viele E-Mail-Clients extern verlinkte Bilder blockieren. Ein eingebettetes Base64-Bild wird dagegen direkt angezeigt.
Häufige Anwendungsfälle
Inline-Bilder in HTML und CSS: Kleine Icons und Hintergrundgrafiken direkt in den Quellcode einbetten, um HTTP-Requests zu reduzieren und die Ladezeit bei vielen kleinen Bildern zu verbessern.
E-Mail-Signaturen: Logos und Icons in E-Mail-Signaturen als Base64 einbetten, damit sie unabhängig von externen Servern immer angezeigt werden. Viele E-Mail-Clients zeigen externe Bilder erst nach Nutzerbestätigung an.
Daten-Export und API-Integration: Manche APIs erwarten Bilddaten als Base64-String statt als Datei-Upload. Die Kodierung ermöglicht es, Bilder als Teil von JSON-Nachrichten zu übertragen, ohne multipart-Formulare nutzen zu müssen.