Image to Base64 / Data URI
✓ Link copiedTurn any image into a Base64 text string right in your browser, with one-click output as a raw Base64 string, a ready-to-use Data URI, or a CSS background-image snippet. Drop in a PNG, JPG, GIF, WebP, SVG, or ICO and instantly get a copyable string for embedding images directly in HTML, CSS, JSON, or email — no extra HTTP request needed. The tool also works in reverse: paste a Base64 Data URI and it decodes and previews the image so you can verify it at a glance. Everything runs entirely on your device — your images are never uploaded, so even private or sensitive graphics stay local.
How to use
In Image → Base64 mode, drag and drop an image (or click to choose one). The tool shows a preview plus the file type and size, then pick your output format — Data URI, plain Base64, or a CSS background declaration — and click Copy to grab the string. Switch to Data URI → Image mode to paste an existing Base64 Data URI and see it rendered as an image, with its type and decoded size shown below the preview.
Frequently asked questions
- Are my images uploaded anywhere?
- No. The file is read and Base64-encoded entirely in your browser using your device's own processing. Your images are never sent to a server, which makes this safe for private, confidential, or unreleased graphics.
- What's the difference between Base64, a Data URI, and the CSS snippet?
- Plain Base64 is just the encoded bytes of the file. A Data URI prefixes that with the MIME type (data:image/png;base64,…) so it can go straight into an <img src> or CSS url(). The CSS snippet wraps the Data URI in a background-image declaration you can paste into a stylesheet. All three come from the same encoding — pick whichever fits where you're embedding the image.
- Why is the Base64 string bigger than my original image?
- Base64 represents binary data using only printable text characters, which adds about 33% overhead. That's why the encoded size is larger than the file on disk. Inlining images this way avoids an extra network request, but for large images the size increase can outweigh that benefit, so it's best for small assets like icons and logos.