Was ist Base64 und wann solltest du es für Bilder nutzen?
Wenn dir schon mal ein riesiger data:image/png;base64,iVBOR...-String im CSS oder HTML von jemandem begegnet ist und du dich gefragt hast, was das soll — das ist ein Base64-kodiertes Bild. Hier liest du, was Base64 wirklich macht, wann es sinnvoll ist, ein Bild als Text einzubetten, und wann nicht.
Kurze Antwort
Base64 ist eine Methode, Binärdaten (etwa ein Bild) als reinen Text darzustellen, sodass sie sich direkt im Code einbetten lassen — in einem HTML-Attribut, einer CSS-Datei oder einem JSON-Payload — statt als separate Datei geladen zu werden. Die Daten werden dadurch rund 33 % größer, weshalb sich das vor allem für winzige Assets eignet. Ein Bild kodieren: PNG zu Base64. Einen String zurück dekodieren: Base64 zu PNG. Beides läuft direkt in deinem Browser.
Was Base64 tatsächlich ist
Base64 ist ein Kodierungsverfahren — keine Verschlüsselung und keine Komprimierung. Es bildet je 3 Bytes Binärdaten auf 4 druckbare ASCII-Zeichen ab (A-Z, a-z, 0-9, + und /), sodass jede Datei — ein Bild, eine Schriftart, irgendetwas — als String aus unbedenklichen Textzeichen geschrieben werden kann. Das ist praktisch, weil manche Stellen nur Text akzeptieren: mitten in einem HTML-Dokument, in einem CSS-Stylesheet, in einer JSON-API-Antwort oder im Body einer E-Mail. Die Kodierung nach Base64 erlaubt es dir, Binärdaten durch diese reinen Textkanäle zu transportieren. Da aus 3 Bytes 4 Zeichen werden, ist die kodierte Fassung etwa 33 % größer als die Originaldatei.
Data-URIs: ein Bild inline einbetten
Der häufigste Einsatz von Base64 in der Webentwicklung ist die Data-URI. Statt <img src="logo.png">, was den Browser eine separate Datei laden lässt, kannst du <img src="data:image/png;base64,iVBOR..."> schreiben — und das Bild reist im HTML selbst mit. Das Format lautet data:[mime-type];base64,[der-base64-string]. In CSS funktioniert es genauso — background-image: url(data:image/png;base64,...) — und so werden viele kleine Icons inline eingebunden.
Wann du es einsetzen solltest (und wann nicht)
Inlining als Base64 tauscht einen HTTP-Request gegen einen größeren Payload, es lohnt sich also nur bei kleinen Assets.
- Gut für: winzige Icons, Sprites oder ein einzelnes kleines Logo, bei denen das Einsparen eines zusätzlichen Netzwerk-Requests mehr zählt als ein paar Hundert Byte.
- Schlecht für: Fotos oder beliebige große Bilder — der ~33-%-Größenaufschlag bläht dein HTML/CSS auf, und inline eingebettete Daten lassen sich nicht separat cachen oder seitenübergreifend wiederverwenden, werden also jedes Mal neu geladen.
- Außerdem praktisch für: ein Bild durch einen reinen Textkanal zu schleusen — eine JSON-API, eine Konfigurationsdatei oder eine E-Mail — wo du keine echte Datei anhängen kannst.
So kodierst und dekodierst du
Für einmalige Umwandlungen musst du keinen Code schreiben:
- Bild zu Base64: PNG zu Base64, JPG zu Base64 — füge das Ergebnis direkt in dein HTML/CSS ein.
- Base64 zurück in eine Datei: Base64 zu PNG, Base64 zu JPG — füge den String ein (mit oder ohne data:-Präfix) und lade das Bild herunter.
Das alles läuft vollständig in deinem Browser — obwohl es nur Kodierung ist, wird dein Bild also nie auf einen Server hochgeladen.
FAQ
Ist Base64 eine Verschlüsselung?
Nein. Base64 ist Kodierung, keine Verschlüsselung — es bietet null Sicherheit. Jeder kann einen Base64-String sofort wieder in die Originaldaten zurückwandeln. Es existiert nur, um Binärdaten als Text darzustellen, nicht um sie zu verbergen oder zu schützen.
Warum ist ein Base64-Bild größer als die Datei?
Base64 stellt je 3 Bytes Daten mit 4 Textzeichen dar, was die Größe um etwa 33 % erhöht (etwas mehr, sobald das data:-Präfix dazukommt). Dieser Overhead ist der Preis dafür, Binärdaten durch einen reinen Textkanal zu transportieren — und genau deshalb lohnt sich Base64 nur für kleine Assets.
Was ist eine Data-URI?
Eine Data-URI bettet eine Datei direkt in eine URL ein, in der Form data:[mime-type];base64,[data]. Auf Webseiten kannst du damit ein Bild direkt in das src eines <img> oder in einen CSS-Hintergrund setzen, statt auf eine separate Datei zu verlinken — so lädt das Bild mit dem Dokument und braucht keinen zusätzlichen Request.
Wann sollte ich ein Bild als Base64 inline einbetten?
Bei sehr kleinen, kritischen Bildern — einem winzigen Icon oder Logo — wo das Einsparen eines Netzwerk-Requests eine etwas größere Datei wert ist. Bei Fotos oder großen Grafiken solltest du es lassen: Der Größenaufschlag und der Verlust des separaten Cachings machen eine normal verlinkte Datei meist schneller.
Wie dekodiere ich einen Base64-String zurück in ein Bild?
Füge ihn in einen Base64-zu-Bild-Konverter ein. Auf ConvertBlink akzeptieren Base64 zu PNG oder Base64 zu JPG den rohen String oder eine vollständige data:-URI und geben dir ein herunterladbares Bild — und das läuft in deinem Browser, es wird also nichts hochgeladen.
Muss ich beim Dekodieren das data:-Präfix mit angeben?
Beides funktioniert. Ein guter Dekoder akzeptiert sowohl eine vollständige Data-URI (data:image/png;base64,iVBOR...) als auch nur den rohen Base64-Teil nach dem Komma. Wenn du nur den rohen String hast, dekodiert das Tool ihn trotzdem.
Base64-Bilder kodieren oder dekodieren
100 % in deinem Browser — nichts wird hochgeladen.