When should I use a Data URI vs a regular file?

Use Data URIs for small, infrequently-changed assets (icons, tiny sprites) where eliminating an HTTP request outweighs the ~33% size overhead of Base64. For large files or frequently-changed assets, serve them as separate files with cache headers.

Why does my Data URI not render?

Common causes: missing or wrong MIME type, missing ;base64 flag for binary data, or line breaks in the Base64 string. The Base64 must be a single unbroken line.

Codieren a file into a Data URI for inline embedding

Konvertieren a small image, font, or file into a data: URI so it can be embedded directly in HTML, CSS, or Markdown without a separate HTTP request.

1

A Data URI (data:[<mime>][;base64],<data>) embeds file contents directly in a URL. Browsers render it inline without a network request — useful for small icons, fonts, and sprites in HTML/CSS.
2

Base64-Kodierer →
Upload or paste the file bytes. The tool outputs the Base64 string with no line breaks.
3

Base64-Bildvorschau →
If the file is an image, preview it here to confirm the Base64 renders correctly before embedding.
4

MIME-Typen-Referenz →
Look up the correct MIME type for your file (e.g. image/png, font/woff2, text/css) to prefix the data URI.
5

Assemble the URI: data:<mime>;base64,<base64>. Paste it into <img src="..."> or url("...") in CSS. Keep Data URIs under ~32 KiB — larger ones hurt parse performance and some browsers impose limits.

Häufige Fragen

When should I use a Data URI vs a regular file?: Use Data URIs for small, infrequently-changed assets (icons, tiny sprites) where eliminating an HTTP request outweighs the ~33% size overhead of Base64. For large files or frequently-changed assets, serve them as separate files with cache headers.
Why does my Data URI not render?: Common causes: missing or wrong MIME type, missing ;base64 flag for binary data, or line breaks in the Base64 string. The Base64 must be a single unbroken line.

Workflows, die diese Aufgabe lösen

Ascii85 in Base64 umwandeln

Ascii85 dekodieren und als Base64 neu kodieren für breitere Kompatibilität.

Häufige Fragen

Workflows, die diese Aufgabe lösen

Verwandte Tools