Was ist Data-URI-Generator?

Data-URI-Generator konvertiert Dateien in base64-kodierte Data-URIs, die Sie direkt in HTML, CSS oder JavaScript einbetten können. Spart zusätzliche HTTP-Anfragen bei kleinen Assets wie Icons und Schriftarten.

Eine Datei bis 20 MB hineinziehen, das Tool erkennt den MIME-Typ, codiert die Bytes als Base64 und liefert drei einsatzfertige Snippets: die rohe Data-URI, die CSS-Regel background-image und das HTML-img-Tag. Bilder erhalten eine Live-Vorschau, damit leere oder defekte Ausgabe vor dem Produktionseinsatz auffällt. Du kannst außerdem Text einfügen, um einen SVG- oder JSON-String zu codieren, große Bilder vor dem Codieren verkleinern, damit die URI klein bleibt, den MIME-Typ korrigieren, falls er falsch erkannt wurde, mehrere Dateien auf einmal codieren, eine entfernte Datei direkt über ihre URL abrufen oder in den Decodier-Modus wechseln, eine Data-URI einfügen und die Originaldatei wieder herunterladen.

Anleitung

1. Lade eine Datei über die Auswahl hoch oder wechsle in den Textmodus und füge einen String (SVG, JSON, CSS) zum Codieren ein.
2. Das Tool kodiert die Datei in Base64 und erzeugt die vollständige Data-URI mit dem korrekten MIME-Typ.
3. Kopieren Sie die Data-URI zur Verwendung in img-src-Attributen, CSS-Hintergrundbildern oder JavaScript-Code.

Wann verwenden

• Ein kleines Logo oder Icon in einer HTML-Demo aus einer einzigen Datei einbetten, ohne Hosting.
• Bilder in E-Mails einbetten, damit sie auch dann erscheinen, wenn das Fernladen blockiert ist.
• Eine Schrift oder ein SVG ins CSS schreiben, um eine renderblockierende Anfrage zu sparen.

Ergebnis

Konvertieren Sie ein 2-KB-Favicon.png in eine Data-URI und fügen Sie sie direkt in Ihr HTML ein — eine Netzwerkanfrage weniger bei jedem Seitenaufruf.

Häufige Fragen

Warum ist die codierte Data-URI rund 33 % größer als die Datei?

Base64 stellt 3 Binärbytes durch 4 ASCII-Zeichen dar, also +33 %. Gzip in der HTTP-Antwort holt das meiste zurück, aber die HTML- oder CSS-Datei auf der Festplatte bleibt größer als das Original.

Was ist die sinnvolle Obergrenze für eine Data-URI?

Etwa 10 KB vor der Codierung sind inline noch praktikabel. Darüber liest der Browser sie zwar weiter, der Cache-Vorteil verschwindet aber (jede Seite parst neu) und HTML beziehungsweise CSS werden mühsam zu pflegen. Größere Assets besser klassisch hosten.

Funktioniert eine Data-URI als CSS-Hintergrundbild?

Ja, das Tool liefert die fertige CSS-Regel. Die URI in url() innerhalb von background-image setzen. Der Browser decodiert sie beim ersten Rendern, ein kleines Icon bleibt inline und ein Netzwerk-Request entfällt, der das erste Bild sonst verzögern würde.

Cacht der Browser eine Data-URI wie ein normales Bild?

Nein. Die Data-URI ist Teil des Elterndokuments und wird nur mit ihm zwischengespeichert. Dasselbe Bild, das in zwanzig Seiten referenziert wird, muss zwanzigmal neu decodiert werden. Für seitenübergreifende Assets ist eine gehostete URL insgesamt schneller.

Funktionieren Data-URIs in HTML-E-Mails?

Gmail und Apple Mail zeigen sie an. Outlook (Windows-Desktop) entfernt sie. Für breite Kompatibilität das Bild als CID-referenzierten Anhang einbinden, statt eine Data-URI in den HTML-Körper zu schreiben.

Ähnliche Tools