Bild → Base64 / Data-URI

Inline in CSS oder HTML

Drop an image

oder klicken zum Durchsuchen - Dateien bleiben auf deinem Gerät

Max. Dateigröße: 5 MB

Über dieses Tool

Convert any image into a base64 data URI you can embed directly in HTML, CSS or JSON. Useful for inlining tiny icons, embedding email-template images that survive aggressive client filters, shipping single-file demos, or avoiding an extra HTTP request for above-the-fold artwork.

Privvert outputs three handy snippets: a full <img> tag, a CSS background-image declaration, and the raw data URI string. The conversion runs in your browser - the source image is never uploaded.

A data URI inlines a file's bytes directly into a CSS or HTML string as base64 text. The browser decodes it on the fly with no extra HTTP request - useful for tiny icons in critical CSS, single-file HTML emails, or sandboxed environments where external assets are blocked. The tradeoff is size: base64 inflates the payload by roughly 33%, so reserve data URIs for assets under ~5 KB.

Funktionen

Reads PNG, JPG, GIF, SVG, WebP
Outputs <img> tag, CSS background and raw data URI
File-size warning for inputs that don't belong inlined
Copy any snippet with one click
Browser-only - images stay on your device
Free and unlimited

So funktioniert's

Drop in an image.
Pick which snippet you want (HTML <img>, CSS background, or raw URI).
Click Copy.
Paste into your code.

🔒 100 % privat

Alles passiert direkt in deinem Browser mit JavaScript und WebAssembly. Deine Dateien werden nie hochgeladen, nie gespeichert und nie von uns gesehen.

Häufig gestellte Fragen

Should I always inline images?

Only for very small images - icons, spinners, single-pixel transparent GIFs. Inlining big images bloats your HTML/CSS, hurts caching (a 50 KB image embedded in a 100 KB page now ships on every load), and slows initial render.

What's the size limit?

Technically unlimited, but data URIs are about 33% larger than the original binary because of base64 encoding. Inputs over ~10 KB are usually a bad idea - the tool warns you.

Why use data URIs in email?

Some email clients block external images by default. Inlined images render immediately.

Can I inline an SVG?

Yes, but you can also paste raw SVG XML directly into HTML - usually smaller and zoomable. Use data URI for SVG only when XML is awkward (e.g. inside a CSS background-image).

When should I NOT use a data URI?

Anything over ~5 KB. The base64 overhead, the loss of caching (every page reload re-downloads the inline asset), and the bloated HTML/CSS file usually outweigh the saved HTTP request. Modern HTTP/2 multiplexing also makes the 'extra request' argument much weaker.

Does this work for fonts or PDFs?

Yes - any file type can be encoded as a data URI. WOFF2 fonts and small PDFs are common use cases for HTML email and offline single-file documents.