Data-URI-Generator

• Umwandlung von Text und Dateien in Data URIs: Wandeln Sie jeden Textinhalt oder jede Datei sofort in eine Data URI um. Tippen oder fügen Sie Text direkt ein oder laden Sie Bilder, Dokumente, Schriftarten und mehr hoch. Das Tool erkennt den MIME-Typ automatisch anhand von Dateiendungen und Inhaltsmustern und erzeugt eine korrekt formatierte Data URI, bereit zum Einbetten.
• Intelligente MIME-Typ-Erkennung: Erkennt MIME-Typen automatisch anhand von mehr als 60 Dateiendungen und über 10 Inhaltsmustern. Erkennt HTML, JSON, SVG, CSS, JavaScript, Markdown, CSV und mehr aus Textinhalten. Bei Dateien wird der Inhaltstyp gelesen und Dateiendungen dem korrekten MIME-Typ zugeordnet, um genaue Data URIs zu erzeugen.
• Größenanalyse und Empfehlungen: Sehen Sie für jede Umwandlung die Originalgröße, die Data-URI-Größe und den Overhead-Prozentsatz. Erhalten Sie Empfehlungen, ob eine Data URI für Ihren Anwendungsfall geeignet ist - Data URIs unter 10 KB sind ideal, während größere Dateien für bessere Leistung klassische URLs verwenden sollten.
• 100 % Verarbeitung im Client: Alle Umwandlungen erfolgen vollständig in Ihrem Browser. Dateien werden lokal über die FileReader-API gelesen, Text wird im Speicher kodiert und es werden niemals Daten an einen Server hochgeladen. Ihre Textinhalte und Dateien bleiben vollständig privat auf Ihrem Gerät.

• Inline-Bilder in HTML und CSS: Betten Sie kleine Icons, Logos und Grafiken direkt in HTML ein, indem Sie Data URIs statt separater Bilddateien verwenden. Nutzen Sie unseren Data-URI-Generator, um PNG-, SVG- und WebP-Bilder in Data URIs für Inline-Hintergründe, Tags und CSS-Pseudoelemente umzuwandeln. Das spart zusätzliche HTTP-Anfragen und verbessert die Ladezeit für kleine Assets.
• Eigenständige E-Mail-Signaturen: Erstellen Sie E-Mail-Signaturen, die ohne externes Bildhosting korrekt angezeigt werden, indem Sie Bilder als Data URIs einbetten. Wandeln Sie Ihr Logo und Ihre Social-Media-Icons in Data URIs um und binden Sie sie direkt in Ihre HTML-Signatur ein. Die Bilder werden in den meisten E-Mail-Clients korrekt angezeigt, ohne auf externe Server angewiesen zu sein.
• HTML-Prototypen als Einzeldatei: Erstellen Sie eigenständige HTML-Prototypen, die offline funktionieren, indem Sie alle Assets als Data URIs einbetten. Wandeln Sie CSS, JavaScript, Bilder und Schriftarten in Data URIs um und binden Sie sie direkt in eine einzelne HTML-Datei ein. Perfekt zum Teilen von Prototypen, Demos und Machbarkeitsnachweisen, die ohne externe Abhängigkeiten funktionieren müssen.
• Assets für E-Mail-Kampagnen: Betten Sie Bilder und Styling direkt in HTML-E-Mail-Kampagnen ein, um konsistentes Rendering über E-Mail-Clients hinweg sicherzustellen. Viele E-Mail-Clients blockieren externe Bilder standardmäßig, Data URIs werden jedoch sofort angezeigt, da sie Teil des E-Mail-Texts sind. Wandeln Sie kleine Hero-Bilder, Logos und Icons für eine zuverlässige Zustellung um.
• WebView-Inhalte für Mobile Apps: Laden Sie Inhalte in WebViews mobiler Apps ohne Netzwerkanfragen, indem Sie Assets als Data URIs einbetten. Wandeln Sie HTML, CSS, Bilder und Schriftarten in Data URIs für offline-fähige WebView-Inhalte um. So werden Ihre In-App-Inhalte unabhängig von der Konnektivität sofort geladen.
• Webentwicklungs-Tooling und Automatisierung: Nutzen Sie unseren Data-URI-Generator in Webentwicklungs-Workflows - wandeln Sie SVGs in Data URIs für JavaScript-Sprite-Sheets um, kodieren Sie Schriftarten für CSS-@font-face-Deklarationen oder betten Sie JSON-Konfigurationsdaten ein. Das Tool bietet präzise MIME-Typ-Erkennung für automatisierte und manuelle Abläufe.

Eine Data URI (Uniform Resource Identifier) ist ein URL-Schema, mit dem Sie Daten direkt in HTML-, CSS- und JavaScript-Dokumente einbetten können, im Format data:[MIME-Typ];base64,... Anders als normale URLs, die auf externe Dateien verweisen, enthalten Data URIs die eigentlichen Daten inline - der Browser dekodiert den Base64-kodierten Inhalt und rendert ihn direkt, ohne eine HTTP-Anfrage zu stellen. Data URIs wurden in RFC 2397 definiert und werden von allen modernen Browsern unterstützt. Häufige MIME-Typen sind image/png, image/svg+xml, text/html, application/json und font/woff2.

1. Inhalt Eingeben: Wählen Sie zwischen Texteingabe (Inhalt tippen oder einfügen) und Datei-Upload (Drag-and-drop oder durchsuchen). Bei der Texteingabe können Sie den automatisch erkannten MIME-Typ optional über die Auswahlliste überschreiben.
2. MIME-Typ-Erkennung: Bei Dateien wird der MIME-Typ aus der Dateiendung erkannt (über 60 Endungen unterstützt). Bei Text wird der Inhalt auf gängige Muster analysiert - HTML-Tags, JSON-Objekte, CSS-Regeln, SVG-Elemente, Markdown-Überschriften und mehr. Sie können den erkannten MIME-Typ manuell überschreiben.
3. Kodierung und Erzeugung: Textinhalt wird mit UTF-8 in Bytes und dann in Base64 kodiert. Dateien werden über die FileReader-API mit readAsDataURL gelesen, was direkt die korrekt formatierte Data URI erzeugt. Das Tool berechnet Größenstatistiken und gibt Empfehlungen.

• Data URIs verwenden für: kleine Bilder unter 10 KB (Icons, Logos, dekorative Elemente), Schriftarten für @font-face mit kleinen Zeichensätzen, Inline-SVGs, eigenständige HTML-E-Mails, Prototypen als Einzeldatei, Favicons und kleine JSON-Konfigurationsdaten, die in Skripte eingebettet sind.
• Normale URLs verwenden für: große Bilder, Audio- und Videodateien, herunterladbare Dokumente (PDF, DOCX), Assets, die sich häufig ändern (Caching ist mit URLs effizienter), und jede Ressource über 100 KB, bei der der Base64-Overhead (etwa 33 %) Ihr HTML oder CSS deutlich aufblähen würde.
• Leistungsaspekte: Data URIs werden nie getrennt vom übergeordneten Dokument zwischengespeichert - wenn Sie dieselbe Data URI auf mehreren Seiten verwenden, wird sie mit jeder Seite heruntergeladen. Data URIs blockieren außerdem das Rendern von CSS-background-images, bis die übergeordnete Ressource vollständig geladen und analysiert ist.

Unser Data-URI-Generator verarbeitet alles lokal in Ihrem Browser. Text wird im Speicher über die TextEncoder-API kodiert, Dateien werden über die FileReader-API gelesen und es werden niemals Daten an einen Server gesendet. Das Tool ist 100 % kostenlos, ohne Anmeldung, ohne Konto und ohne Nutzungslimits.

Wichtige Einschränkungen: Data URIs haben in den meisten Browsern eine Längengrenze (typischerweise etwa 2-4 MB für Bilder in <img>-Tags). Sehr große Dateien können beim Kodieren Speicherprobleme im Browser verursachen. Der Base64-Overhead beträgt etwa 33 % - eine 10-KB-Datei wird als Data URI etwa 13,3 KB groß. Für Dateien über 100 KB sollten Sie für bessere Leistung und Caching unbedingt klassische Datei-URLs in Betracht ziehen.