CodeKitHubWas ist dieses Tool?
Base64 ist eine Möglichkeit, Binärdaten — wie die rohen Bytes eines Bildes — als reinen Text darzustellen, nur mit Buchstaben, Ziffern und ein paar Symbolen. Da es reiner Text ist, kann ein Base64-codiertes Bild direkt in HTML, CSS oder JSON eingebettet werden, statt als separate Datei referenziert zu werden.
Eine „Data-URL“ umschließt diesen Base64-Text mit einem kurzen Präfix (data:image/png;base64,), das dem Browser mitteilt, um welchen Dateityp es sich handelt, sodass er direkt in ein src- oder url()-Attribut eingesetzt und ohne zusätzliche Anfrage dargestellt werden kann.
Warum sollte man es nutzen?
- Beide Formate auf einmal — die vollständige Data-URL für HTML/CSS und das rohe Base64 (ohne Präfix) zum Einbetten in JSON- oder Konfigdateien.
- Kein Server-Roundtrip: spart eine HTTP-Anfrage für kleine Icons, Avatare oder Inline-Bilder.
- Erhält die Original-Bytes exakt — keine Neucodierung oder Qualitätsverlust, anders als bei Tools, die das Bild dekodieren und neu speichern.
- Zeigt den Größenunterschied an, damit du weißt, was du für die Bequemlichkeit eintauschst.
- Privat: Die Datei wird lokal mit der FileReader-API des Browsers gelesen und verlässt dein Gerät nie.
Anleitung
- Klicke auf den Upload-Bereich oder ziehe eine Bilddatei hinein.
- Kopiere die vollständige Data-URL, wenn du sie in ein <img src> oder ein CSS background-image einfügst.
- Kopiere das rohe Base64 (ohne data:-Präfix), wenn du den Wert in JSON, YAML oder ein anderes Konfigformat einbettest, das den Dateityp bereits kennt.
- Beachte den Größenhinweis — Base64-Text ist etwa ein Drittel größer als die ursprüngliche Binärdatei.
Beispiel
Eingabe
Eine 12 KB große PNG-Icon-Datei.Ausgabe
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB Text) plus dieselbe Zeichenkette ohne data:-Präfix.Der ~33%ige Größenzuwachs ist der Base64-Codierung inhärent (3 Bytes Binärdaten werden zu 4 Textzeichen) — kein Bug im Tool.
Wo welches Format verwendet wird
| Format | Typische Verwendung |
|---|---|
| Vollständige Data-URL | HTML <img src="...">, CSS background-image: url(...), Inline-Bilder in E-Mails |
| Rohes Base64 | JSON-API-Payloads, YAML-/Konfigdateien, BLOB-Felder in Datenbanken, benutzerdefinierte Binärprotokolle |
Base64 und Bildgröße — der Kompromiss in der Praxis
Der ~33%ige Overhead bedeutet, dass sich Base64-Einbettung am besten für kleine Assets eignet: Ein 2-KB-Icon wird zu harmlosen ~2,7 KB Inline-Text, aber ein 500-KB-Foto wird zu ~665 KB Text, der inline in deinem HTML sitzt, das Parsen verlangsamt und nicht separat vom Rest der Seite gecacht werden kann.
Wenn du viele oder größere Bilder einbettest, wäge den Vorteil der eingesparten Anfrage gegen die Kosten des höheren Seitengewichts ab — und ziehe in Betracht, vorher zu komprimieren.
Häufig gestellte Fragen
Warum ist die Base64-Zeichenkette so viel größer als meine Bilddatei?
Base64 codiert je 3 Bytes Binärdaten als 4 Textzeichen, was einem festen Overhead von ca. 33 % entspricht. Für ein 100 KB großes Bild erwarte etwa 133 KB Base64-Text. Das ist normal und unvermeidbar — es ist der Preis dafür, Binärdaten als sicheren, portablen Text darzustellen.
Was ist der Unterschied zwischen der Data-URL und der rohen Base64-Zeichenkette?
Die Data-URL enthält ein Präfix data:image/png;base64,, das einem Browser oder Renderer mitteilt, welchen MIME-Typ der folgende Text decodiert. Füge die vollständige Data-URL in ein HTML-src oder CSS-url() ein. Das rohe Base64 (alles nach dem Komma) brauchst du, wenn ein System den Dateityp bereits separat kennt — etwa ein JSON-Feld wie { "format": "png", "data": "<rohes base64>" }.
Wann sollte ich ein Bild als Base64 einbetten statt es zu verlinken?
Base64-Einbettung eignet sich für kleine, häufig wiederverwendete Bilder (Icons, Logos, kleine UI-Grafiken), bei denen das Einsparen einer HTTP-Anfrage die ~33%ige Größenstrafe überwiegt, oder in Kontexten, in denen eine separate Datei unpraktisch ist, etwa bei Inline-Bildern in E-Mails oder Single-File-HTML-Exporten. Für große Fotos oder alles, was auf vielen Seiten wiederverwendet wird, ist eine normal verlinkte Datei mit Browser-Caching fast immer besser.
Verändert oder komprimiert die Umwandlung in Base64 mein Bild?
Nein. Base64 ist eine verlustfreie Textcodierung der exakten Original-Bytes — sie rührt weder Pixel noch Auflösung noch Kompression an. Willst du eine kleinere Datei, komprimiere das Bild zuerst mit einem Bildkompressor und wandle dann das komprimierte Ergebnis in Base64 um.
Wird mein Bild irgendwohin hochgeladen?
Nein. Die Datei wird direkt in deinem Browser mit der FileReader-API gelesen und lokal codiert — sie wird nie über das Netzwerk gesendet.