Is there a size limit for data URIs?

There is no hard limit in the specification, but practical limits exist. Most modern browsers handle data URIs up to several megabytes, but Internet Explorer (legacy) limited them to 32 KB. Base64 encoding increases the data size by approximately 33%, so a 30 KB image becomes about 40 KB as a data URI. For assets larger than 5-10 KB, external files with proper caching are usually more efficient.

Do data URIs affect performance?

For small assets, data URIs improve performance by eliminating HTTP requests. However, base64-encoded data is about 33% larger than the original file, and data URIs cannot be cached independently by the browser (they are cached with the containing document). For large files or assets used across multiple pages, external files with cache headers perform better.

Are data URIs secure?

Data URIs have security implications. Most browsers block JavaScript execution in data URIs (preventing data: protocol XSS attacks). However, data URIs can bypass Content Security Policy (CSP) rules if not configured correctly. When accepting user-generated data URIs, always validate the MIME type and consider CSP directives that restrict data: sources.

Data-URI-Generator: Dateien inline als Base64 einbetten

In diesem Artikel

Was sind Data-URIs?

Ein Data-URI (Uniform Resource Identifier) ist ein Schema, mit dem Sie Dateiinhalte direkt in einer URL-Zeichenkette einbetten können, anstatt auf eine externe Datei zu verweisen. Data-URIs sind in RFC 2397 definiert und kodieren den Inhalt inline im Format data:[mediatype][;base64],data. Dadurch entfällt eine separate HTTP-Anfrage zum Abrufen der Ressource.

Data-URIs werden häufig verwendet, um kleine Bilder, Schriftarten, SVGs und andere Assets direkt in HTML oder CSS einzubetten. Statt eine externe Datei per URL zu referenzieren, wird der gesamte Dateiinhalt (typischerweise in base64) kodiert und inline eingefügt. Das kann HTTP-Anfragen reduzieren und die Bereitstellung kleiner Assets vereinfachen.

So erstellen Sie Data-URIs

Ein Data-URI-Generator wandelt Dateiinhalte oder Text in das Data-URI-Format um. Dabei werden der MIME-Typ bestimmt und der Inhalt kodiert.

Texteingabe — Text direkt eingeben und den MIME-Typ angeben (text/plain, text/html, text/css, application/json). Der Text kann URL-kodiert oder base64-kodiert werden
Datei-Upload — beliebige Datei hochladen (Bilder, Schriftarten, SVGs, Dokumente); der Generator ermittelt den MIME-Typ automatisch und kodiert den Inhalt in base64
MIME-Typ-Auswahl — der Medientyp teilt dem Browser mit, wie die Daten zu interpretieren sind. Gängige Typen sind image/png, image/svg+xml, text/css und application/javascript

Kostenlos testen – keine Registrierung erforderlich

Data-URI generieren →

Wann Data-URIs sinnvoll sind

Data-URIs sind am nützlichsten für kleine, häufig verwendete Assets, bei denen das Einsparen einer HTTP-Anfrage die Performance verbessert.

CSS-Hintergrundbilder — kleine Icons oder Muster direkt in CSS einbetten, um zusätzliche Anfragen zu vermeiden. Ideal für Bilder unter 2–4 KB, die auf jeder Seite erscheinen
Inline-SVGs in CSS — SVG-Icons als Data-URIs in background-image-Eigenschaften einbetten, wenn das SVG nicht direkt im HTML platziert werden kann
HTML-E-Mail-Vorlagen — Bilder direkt in das E-Mail-HTML einbetten, da viele E-Mail-Clients externe Bilder standardmäßig blockieren. Data-URIs werden angezeigt, ohne dass der Nutzer das Laden von Bildern aktivieren muss

Häufig gestellte Fragen

Gibt es eine Größenbeschränkung für Data-URIs?

Die Spezifikation kennt keine feste Obergrenze, aber praktische Grenzen existieren. Die meisten modernen Browser verarbeiten Data-URIs bis zu mehreren Megabyte, doch der Internet Explorer (veraltet) beschränkte sie auf 32 KB. Die base64-Kodierung vergrößert die Datenmenge um etwa 33 %, sodass aus einem 30 KB großen Bild als Data-URI rund 40 KB werden. Für Assets über 5–10 KB sind externe Dateien mit ordentlichem Caching in der Regel effizienter.

Beeinflussen Data-URIs die Performance?

Bei kleinen Assets verbessern Data-URIs die Performance, indem sie HTTP-Anfragen einsparen. Allerdings sind base64-kodierte Daten etwa 33 % größer als die Originaldatei, und Data-URIs können vom Browser nicht eigenständig zwischengespeichert werden (sie werden zusammen mit dem umgebenden Dokument gecacht). Für große Dateien oder Assets, die über mehrere Seiten hinweg genutzt werden, schneiden externe Dateien mit Cache-Headern besser ab.

Sind Data-URIs sicher?

Data-URIs haben sicherheitsrelevante Auswirkungen. Die meisten Browser blockieren die Ausführung von JavaScript in Data-URIs (und verhindern so XSS-Angriffe über das data:-Protokoll). Data-URIs können jedoch Regeln der Content Security Policy (CSP) umgehen, wenn diese nicht korrekt konfiguriert ist. Wenn Sie von Nutzern erzeugte Data-URIs akzeptieren, validieren Sie stets den MIME-Typ und berücksichtigen Sie CSP-Direktiven, die data:-Quellen einschränken.