Wie sieht eine Base64-Bild-Data-URI aus?

Es ist eine einzelne Zeichenkette, die mit data: beginnt, gefolgt vom MIME-Typ, der Kodierung und den Base64-kodierten Bytes — zum Beispiel data:image/png;base64,iVBORw0KGgoAAAANSU... —, die überall dort verwendet werden kann, wo sonst eine normale Bild-URL stünde: in einem , einem CSS background-image oder einem SVG- -Tag.

Schadet die Nutzung von Base64-Bildern der Seitenperformance?

Das kann sie, bei allem über kleine Icons hinaus. Die kodierte Zeichenkette ist rund 33 % größer als die Originaldatei, sie kann nicht separat vom Browser zwischengespeichert werden (sie steckt fest im HTML- oder CSS-Dokument selbst), und große eingebettete Bilder blähen die initiale Seitenlast auf, was das Rendern von allem anderen auf der Seite verzögert.

Wann sollte ich ein Bild tatsächlich als Base64 einbetten?

Bei sehr kleinen, häufig wiederverwendeten Assets — Icons, winzigen UI-Sprites, einem Platzhalter-Weichzeichner für lazy geladene Bilder — wo das Einsparen einer Netzwerkanfrage den Größennachteil aufwiegt. Bei allem über wenigen Kilobyte, oder jedem über mehrere Seiten hinweg wiederverwendeten Bild, schneidet eine reguläre, cachefähige Bilddatei fast immer besser ab.

Kann ich ein Base64-Bild direkt in CSS einbetten?

Ja — background-image: url('data:image/png;base64,...') funktioniert in jedem modernen Browser und ist eine gängige Methode, winzige, sich wiederholende Hintergrundmuster oder Icons ohne zusätzliche HTTP-Anfrage einzubetten.

Guide

Base64-Bilder als Data-URI: wann sich das Einbetten lohnt

Ein Bild einzubetten vermeidet einen Netzwerk-Roundtrip, bedeutet aber auch, dass der Browser dieses Bild nie eigenständig zwischenspeichern kann.

By Buğra SözeriPublished September 25, 2026

Eine Base64-Data-URI erlaubt es, die Bytes eines Bildes direkt als Textzeichenkette in HTML, CSS oder JSON einzubetten, anstatt auf eine separate Bilddatei zu verweisen, die der Browser anfragen muss. Sie sieht aus wie data:image/png;base64,iVBORw0KGgo... und wird, einmal in ein <img src> oder ein CSS-background-image eingefügt, vom Browser dekodiert und gerendert, ganz ohne zusätzliche Netzwerkanfrage. Das klingt nach einem reinen Gewinn — weniger Roundtrips sind meist schneller —, doch es tauscht einen Nachteil gegen einen anderen, und der Kompromiss lohnt sich nur für bestimmte, meist kleine Anwendungsfälle.

Was Sie gewinnen: eine Anfrage weniger

Jede separate Bilddatei ist eine eigene HTTP-Anfrage, und auf einer Seite mit vielen kleinen Icons trägt jede dieser Anfragen ihren eigenen Latenz-Overhead — DNS (bei einem anderen Host), Verbindungsaufbau und Roundtrip-Zeit —, der sich zu mehr Verzögerung summieren kann als die Bytes selbst. Eine Handvoll kleiner, häufig wiederverwendeter Icons als Base64 einzubetten fasst diese Anfragen in dasselbe Dokument zusammen, das der Browser ohnehin schon lädt, was für dieses konkrete Muster wirklich schneller ist.

Was Sie verlieren: Größe und Caching

Base64 vergrößert die kodierte Größe um rund ein Drittel gegenüber der Rohdatei — siehe warum Base64 Dateien vergrößert für die genaue Rechnung — und diese vergrößerte Zeichenkette wird Teil des HTML- oder CSS-Dokuments selbst. Das bedeutet, der Browser kann das Bild nicht mehr eigenständig zwischenspeichern: Jedes Mal, wenn er die Seite erneut abruft oder parst, lädt er die Bildbytes zusammen mit allem anderen erneut herunter, statt eine zwischengespeicherte Kopie von der Festplatte zu holen, wie er es bei einer normalen .png-Datei täte. Bei einem über Dutzende Seiten wiederverwendeten Icon bedeutet das Dutzende wiederholter Downloads statt einer einzigen zwischengespeicherten Datei.

Faustregel: Größe und Wiederverwendung

Situation	Bessere Wahl
Winziges Icon (unter ~2 KB), einmalig genutzt	Base64 eingebettet
Kleines Icon, über viele Seiten wiederverwendet	Reguläre, cachefähige Datei
Platzhalter-Weichzeichner für lazy geladene Bilder	Base64 eingebettet (von Natur aus winzig)
Jedes Foto oder Hero-Bild	Immer eine reguläre, cachefähige Datei

Das Muster, das fast nie sinnvoll ist, ist das Einbetten eines vollständigen Fotos oder eines Hero-Bildes — der Größennachteil und der Verlust des Cachings wirken in diesem Maßstab beide gegen Sie, ohne ausgleichenden Nutzen. Bleiben Sie bei kleinen, statischen, häufig wiederkehrenden Assets, und nutzen Sie den Bild-zu-Base64-Umrechner, um die genaue kodierte Größe zu sehen, bevor Sie sich entscheiden.

Frequently asked questions

Wie sieht eine Base64-Bild-Data-URI aus?: Es ist eine einzelne Zeichenkette, die mit data: beginnt, gefolgt vom MIME-Typ, der Kodierung und den Base64-kodierten Bytes — zum Beispiel data:image/png;base64,iVBORw0KGgoAAAANSU... —, die überall dort verwendet werden kann, wo sonst eine normale Bild-URL stünde: in einem <img src>, einem CSS background-image oder einem SVG-<image>-Tag.
Schadet die Nutzung von Base64-Bildern der Seitenperformance?: Das kann sie, bei allem über kleine Icons hinaus. Die kodierte Zeichenkette ist rund 33 % größer als die Originaldatei, sie kann nicht separat vom Browser zwischengespeichert werden (sie steckt fest im HTML- oder CSS-Dokument selbst), und große eingebettete Bilder blähen die initiale Seitenlast auf, was das Rendern von allem anderen auf der Seite verzögert.
Wann sollte ich ein Bild tatsächlich als Base64 einbetten?: Bei sehr kleinen, häufig wiederverwendeten Assets — Icons, winzigen UI-Sprites, einem Platzhalter-Weichzeichner für lazy geladene Bilder — wo das Einsparen einer Netzwerkanfrage den Größennachteil aufwiegt. Bei allem über wenigen Kilobyte, oder jedem über mehrere Seiten hinweg wiederverwendeten Bild, schneidet eine reguläre, cachefähige Bilddatei fast immer besser ab.
Kann ich ein Base64-Bild direkt in CSS einbetten?: Ja — background-image: url('data:image/png;base64,...') funktioniert in jedem modernen Browser und ist eine gängige Methode, winzige, sich wiederholende Hintergrundmuster oder Icons ohne zusätzliche HTTP-Anfrage einzubetten.

Sources & references

Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.

IETF RFC 2397 — The 'data' URL scheme — Die Spezifikation, die das data:-URI-Format für eingebettete Inhalte definiert(as of 2026-09-25)
web.dev — Encode images to Base64 (or not) — Googles Leitlinien dazu, wann eingebettete Base64-Bilder der Seitenperformance helfen oder schaden(as of 2026-09-25)

Published September 25, 2026