Was ist Base64 und warum nutzen Websites es für Bilder?

Base64 ist eine Methode, jede Binärdatei, etwa ein Bild, als reinen Text aus nur 64 sicheren Zeichen zu schreiben: den Buchstaben A bis Z und a bis z, den Ziffern 0 bis 9 sowie + und /. Websites nutzen das für Bilder, weil sich der entstehende Text direkt in HTML, CSS oder JSON einfügen lässt. Ein kleines Icon kommt so mit der Seite an, statt separat heruntergeladen zu werden. Der Haken ist die Größe: Base64-Text ist rund ein Drittel größer als die Datei, die er darstellt. In diesem Ratgeber erklären wir, wie die Kodierung funktioniert, wo sie wirklich hilft und wann eine normale Bilddatei die bessere Wahl ist.

Was Base64 eigentlich macht#

Computer speichern ein Bild als rohe Bytes, und viele dieser Bytes entsprechen keinem druckbaren Zeichen. Das ist ein Problem für alles, was eigentlich Text transportieren soll: ein HTML-Attribut, eine CSS-Datei, ein JSON-Feld oder den Text einer E-Mail. Base64 löst das, indem es die Bytes nur mit Zeichen neu ausdrückt, die jedes Textsystem unverändert übersteht.

Das Verfahren ist in RFC 4648 festgelegt, dem Standard, an den sich die meiste Software hält. Es arbeitet in kleinen Gruppen:

1. Es werden 3 Bytes der Datei genommen (24 Bit).
2. Diese 24 Bit werden in 4 Blöcke zu je 6 Bit aufgeteilt.
3. Jeder 6-Bit-Block ist eine Zahl von 0 bis 63 und wird im Alphabet aus 64 Zeichen nachgeschlagen.

Das klassische Beispiel ist das Wort Man. Aus seinen drei Bytes werden die vier Zeichen TWFu. Ist die Dateilänge kein Vielfaches von 3, endet die Ausgabe mit einem oder zwei = als Auffüllung. Deshalb enden so viele Base64-Zeichenketten auf = oder ==.

Was Base64 nicht ist: Verschlüsselung. Jeder kann es sofort dekodieren, ganz ohne Schlüssel oder Passwort. Es ändert nur, wie Daten aufgeschrieben werden, nicht, wer sie lesen kann.

Warum Base64 Dateien um rund 33 % größer macht#

Weil aus je 3 Bytes 4 Zeichen werden, ist die Base64-Ausgabe immer etwa 4/3 so groß wie die Eingabe, also rund 33 % größer. Das ist keine Schätzung, sondern einfache Rechnung:

Manche Systeme fügen zusätzlich alle 76 Zeichen einen Zeilenumbruch ein (E-Mail macht das, wie in RFC 2045 beschrieben), was noch etwas mehr kostet. Die Textkomprimierung des Webservers (gzip oder Brotli) holt einen Teil des Aufschlags zurück, aber ein kodiertes Bild wird nie kleiner als die Originaldatei.

Wie Websites Base64 für Bilder nutzen#

Im Web tauchen Base64-Bilder fast immer als Data-URL auf: Das Bild selbst steht an der Stelle, an der normalerweise ein Link darauf stehen würde. Das Format, dokumentiert auf der MDN-Seite zu Data-URLs, sieht so aus:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo">

Dasselbe funktioniert in CSS, zum Beispiel als Hintergrundbild:

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

Der Browser liest den Text, dekodiert ihn zurück in das ursprüngliche PNG und zeigt es genau so an, als hätte er eine separate Datei geladen. Um diesen Code für Ihr eigenes Bild zu bekommen, ziehen Sie ein JPG, PNG, WebP oder AVIF in den Bild-zu-Base64-Konverter und kopieren das fertige img-Tag, die CSS-Regel oder die reine Zeichenkette.

Wann Base64-Bilder sinnvoll sind#

Ein Bild als Text einzubetten, lohnt sich in einigen ganz bestimmten Fällen:

• Winzige Icons und UI-Grafiken. Ein kleines Icon, das in Ihrem CSS steckt, kommt mit dem Stylesheet an. Es kann also weder verspätet auftauchen noch für sich allein fehlschlagen.
• In sich geschlossene Dateien. Eine einzelne HTML-Datei, eine E-Mail-Vorlage oder ein Dokument, das ohne externe Dateien funktionieren soll, kann seine Bilder mitbringen.
• Daten, die als Text reisen müssen. JSON-APIs, Konfigurationsdateien und Schnipsel in der Zwischenablage können keine rohen Bytes aufnehmen, daher sind Bilder darin meist Base64. Auch E-Mail-Anhänge sind aus demselben Grund intern Base64.
• Schnelle Prototypen und Demos, bei denen Sie lieber eine Zeichenkette einfügen, als ein Bild irgendwo zu hosten.

Wann Sie auf Base64-Bilder verzichten sollten#

Für die meisten Bilder auf einer echten Website ist eine normale Bilddatei die bessere Wahl:

• Größere Downloads. Jedes eingebettete Bild kostet rund ein Drittel mehr Bytes als die Datei.
• Kein eigenes Caching. Ein Base64-Bild wird als Teil des HTML oder CSS zwischengespeichert, in dem es steckt. Ändern Sie eine einzige Zeile dieses Stylesheets, lädt der Browser das Bild gleich mit neu, während eine separate Bilddatei für sich im Cache bleibt.
• Es bremst die Seite. Der Bildtext steckt in Ihrem HTML oder CSS, das der Browser laden muss, bevor er die Seite darstellen kann. Ein großes eingebettetes Foto verzögert alles, auch Text, der sonst zuerst erscheinen würde.
• Gesparte Anfragen zählen weniger als früher. Eine Anfrage einzusparen war das Hauptargument fürs Einbetten. HTTP/2 lässt den Browser aber viele kleine Dateien über eine einzige Verbindung laden, daher ist diese Ersparnis heute deutlich kleiner.

Eine vernünftige Faustregel: Betten Sie nur Bilder ein, die höchstens ein paar Kilobyte groß sind, und liefern Sie alles andere als normale Datei aus. Bei Fotos bringt es meist mehr, die Datei selbst zu verkleinern, und genau das erledigt der Bildkompressor in Ihrem Browser. Unser Ratgeber zum Komprimieren von Bildern ohne Qualitätsverlust zeigt, wie weit Sie dabei gehen können.

SVG ist ein Sonderfall#

SVG-Dateien sind bereits Text und brauchen für eine Data-URL eigentlich kein Base64. Sie können das SVG-Markup stattdessen URL-kodieren, was meist kleiner ausfällt, weil der Aufschlag von 33 % entfällt. Base64 ist dafür einfacher und vermeidet Ärger mit Anführungszeichen und Sonderzeichen. Der SVG-zu-Base64-Konverter liefert Ihnen beide Varianten zur Auswahl. Und falls Sie nicht sicher sind, was eine SVG-Datei eigentlich enthält, erklärt es unser Artikel Was ist eine SVG-Datei?.

Beide Konverter laufen vollständig in Ihrem Browser, Ihre Bilder werden also nie hochgeladen. Verwandte Werkzeuge finden Sie bei den Bild-Tools und den Entwickler-Tools.

Häufig gestellte Fragen#

Was ist Base64-Kodierung, einfach erklärt? Base64-Kodierung ist eine Methode, jede Datei, etwa ein Bild, als reinen Text aus 64 sicheren Zeichen zu schreiben (den Buchstaben A bis Z und a bis z, den Ziffern 0 bis 9 sowie + und /). So können Binärdaten durch Systeme reisen, die nur Text verarbeiten, etwa HTML, CSS, JSON und E-Mail.

Warum nutzen Websites Base64 für Bilder? Websites nutzen Base64, damit ein kleines Bild direkt im HTML oder CSS stehen kann, statt als separate Datei geladen zu werden. Das ist vor allem bei winzigen Icons und bei in sich geschlossenen Dateien wie E-Mail-Vorlagen nützlich.

Macht Base64 Bilder größer? Ja, Base64 macht Bilder um etwa 33 % größer, weil aus je 3 Bytes der Originaldatei 4 Textzeichen werden. Ein Bild mit 30 KB wird zu rund 40 KB Base64.

Ist Base64 eine Verschlüsselung? Nein, Base64 ist keine Verschlüsselung, denn jeder kann es sofort und ohne Schlüssel oder Passwort dekodieren. Es ändert nur, wie Daten geschrieben werden, nicht, wer sie lesen kann. Nutzen Sie es also nie, um sensible Informationen zu verbergen.

Wann sollte ich keine Base64-Bilder verwenden? Für große Bilder und Fotos sollten Sie kein Base64 verwenden, weil die zusätzlichen 33 % und das fehlende eigene Caching Ihre Seite verlangsamen. Liefern Sie sie als normale Bilddateien aus und betten Sie nur Bilder von höchstens ein paar Kilobyte ein.

Wie wandle ich ein Bild in Base64 um? Sie wandeln ein Bild in Base64 um, indem Sie es in einen Konverter wie das Bild-zu-Base64-Tool von ConvertOwl ziehen. Es läuft in Ihrem Browser und liefert die kodierte Zeichenkette samt einfügefertigem img-Tag oder CSS-Regel.

Kurz zusammengefasst#

• Base64 schreibt jede Datei als Text aus 64 sicheren Zeichen. Es ist eine Kodierung, keine Verschlüsselung.
• Aus je 3 Bytes werden 4 Zeichen, das Ergebnis ist also rund 33 % größer.
• Websites nutzen es, um kleine Bilder als Data-URL direkt in HTML oder CSS zu packen.
• Betten Sie nur winzige Bilder ein; Fotos und alles Größere gehören in normale Dateien.
• Probieren Sie den Bild-zu-Base64-Konverter oder den SVG-zu-Base64-Konverter aus, und mehr finden Sie in unseren Technik-Artikeln.