Data URI Generator

Data URI Generator

Ein Data URI bettet den Dateiinhalt direkt in ein HTML-Attribut oder eine CSS-Eigenschaft ein und ersetzt eine externe URL durch die Dateidaten selbst. Dieses Tool generiert Data URIs aus jeder Datei, indem es sie lokal liest, ihren MIME-Typ erkennt und den Inhalt als Base64 kodiert.

Wie man es verwendet

1. Ziehe eine Datei in den Upload-Bereich oder klicke zum Durchsuchen
2. Das Tool erkennt den MIME-Typ und kodiert die Datei
3. Das Ausgabeformat “Data URI” ist standardmäßig ausgewählt
4. Kopiere den vollständigen Data URI

Data URI Syntax

Jeder Data URI folgt dieser Struktur:

data:[<mediatype>][;base64],<daten>

• mediatype: Der MIME-Typ (z.B. image/png, application/pdf, audio/mpeg). Standard ist text/plain;charset=US-ASCII wenn nicht angegeben.
• ;base64: Zeigt an, dass die Daten Base64-kodiert sind. Ohne dies sind die Daten URL-kodierter Text.
• daten: Der eigentliche Inhalt, Base64-kodiert (für Binärdateien) oder URL-kodiert (für Text).

Beispiele:

data:image/png;base64,iVBORw0KGgoAAAANSU...
data:text/html,%3Chtml%3E%3Cbody%3EHallo%3C/body%3E%3C/html%3E
data:text/plain;charset=utf-8,Hallo%20Welt

Wo Data URIs funktionieren

HTML img-Tags

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Inline-Bild" />

CSS-Hintergründe

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
}

HTML-Link-Downloads

<a href="data:application/pdf;base64,JVBERi..." download="dokument.pdf">
  PDF herunterladen
</a>

Favicons

<link rel="icon" href="data:image/svg+xml;base64,PHN2Zy..." />

Iframes

<iframe src="data:text/html;base64,PCFET0NUWVBF..." width="100%" height="400"></iframe>

JavaScript

const audio = new Audio('data:audio/mpeg;base64,SUQz...');
const img = new Image();
img.src = 'data:image/png;base64,iVBOR...';

Data URIs vs externe URLs