Tiny icons (< 4 KB) inline in CSS — saves an HTTP request and avoids a flash on first paint. Self-contained HTML emails, single-file demos, or offline-capable PWAs. Quick pastes into Markdown notes, Notion pages, or chat threads that need to travel with the image. Test fixtures and snapshot files where you want the asset committed alongside the test.

Size penalty. Base64 inflates payload by ~33%. Above ~4–8 KB the embedding cost outweighs the saved request, especially since data URIs cannot be cached separately by the browser. No de-duplication across pages. Each page that embeds the URI ships the bytes again. For anything reused, keep it as a real URL so the browser caches it once. Email clients vary. Most modern clients render data URIs, but Outlook on Windows historically blocks them in . CID attachments are still safer for mass email. SVG ≠ raster. For SVG, embedding the markup directly (or url-encoding the SVG) is usually smaller than Base64.

Bild zu Base64

Bilder in Base64-Data-URIs umwandeln, fertig zum Einfügen in HTML, CSS oder Markdown. Datei bleibt im Browser.

Pick or drop an image

Preview

No image yet.

Data URI

Geben Sie oben eine Eingabe ein, um das Ergebnis zu sehen.

Snippets

What is this for?

A data URI embeds the bytes of a file directly into a URL using Base64 — no separate request, no external file. This converter reads any image you drop on it and produces a data:image/...;base64,... string ready to paste into HTML, CSS, Markdown, or JSON. The file never leaves your browser; conversion happens via FileReader.readAsDataURL.

When to use it

Tiny icons (< 4 KB) inline in CSS — saves an HTTP request and avoids a flash on first paint.
Self-contained HTML emails, single-file demos, or offline-capable PWAs.
Quick pastes into Markdown notes, Notion pages, or chat threads that need to travel with the image.
Test fixtures and snapshot files where you want the asset committed alongside the test.

Common gotchas

Size penalty. Base64 inflates payload by ~33%. Above ~4–8 KB the embedding cost outweighs the saved request, especially since data URIs cannot be cached separately by the browser.
No de-duplication across pages. Each page that embeds the URI ships the bytes again. For anything reused, keep it as a real URL so the browser caches it once.
Email clients vary. Most modern clients render data URIs, but Outlook on Windows historically blocks them in <img src>. CID attachments are still safer for mass email.
SVG ≠ raster. For SVG, embedding the markup directly (or url-encoding the SVG) is usually smaller than Base64.