Image to Base64 (and back)
Drop an image to get its Base64 data URI — ready to paste into CSS or HTML.
Drop images here or browse
JPG, PNG, WEBP, GIF, BMP
Your files stay in your browser. Nothing is uploaded.
Drop an image to get its Base64 data URI — ready to paste into CSS or HTML.
How to convert an image to Base64
- On the Image → Base64 tab, drop your image in.
- Copy the data URI, or grab the ready-made CSS or HTML snippet.
- To go the other way, switch to Base64 → Image and paste a string to preview and download it.
Embed images inline, no extra request
A Base64 data URI lets you drop an image straight into your code — a CSS background-image, an <img>tag, an email template, or a JSON payload. Because the image travels inside the file that references it, the browser doesn't make a separate request for it. For small, frequently-used assets that can mean one less round-trip and a faster first paint.
When to keep it a normal file
Base64 is about a third larger than the binary it encodes, and an inline image can't be cached or reused across pages the way a real file can. So reach for it on small assets; for big photos, leave them as files — and compress them first if you do need to encode.
Decode Base64 back to an image
Got a data URI from somewhere and need the actual file? Paste it into the decode tab. The tool reads the format from the data itself — PNG, JPG, WebP, GIF or BMP — previews it, and lets you download with the correct extension. It quietly handles strings with or without the data:image/... prefix.
Private by design
Everything runs on your own device. Your image is never uploaded, so nothing is stored or seen by anyone. No account, no watermark, no limits.
Next steps
Frequently asked questions
- What is a Base64 image / data URI?
- It's an image encoded as plain text. A data URI like data:image/png;base64,iVBOR... holds the whole image inline, so you can embed it directly in CSS or HTML instead of linking to a separate file.
- When should I use a Base64 image?
- For small assets — icons, tiny logos, a background pattern — embedding them inline saves an extra network request, which can speed up the first paint. For anything large, keep it as a normal file: Base64 adds about 33% to the size and can't be cached separately.
- How do I decode a Base64 string back to an image?
- Switch to the "Base64 → Image" tab and paste the string — with or without the data:image/... prefix. It previews instantly and you can download the file. The real format (PNG, JPG, WebP, GIF) is detected from the data, so the download has the right extension.
- Why is the Base64 bigger than my image?
- Base64 represents 3 bytes of data with 4 text characters, so encoded output is roughly a third larger than the original. That's normal — compress the image first if size matters.
- Is my image uploaded?
- No. Encoding and decoding happen entirely in your browser — nothing is sent to a server or stored.