Image to Base64
Encode any image as Base64 and get four ready-to-paste outputs: the full data URI, the raw Base64 string, an HTML img tag and a CSS background rule. Encoding happens in your browser — the image is never uploaded.
Drag & drop a file here, or click to choose
When embedding images as Base64 makes sense — and when it doesn't
A Base64 data URI embeds the image directly in your HTML, CSS or JSON, removing a network request entirely. That's a genuine win for tiny assets — icons, logos, tracking pixels, email signatures — and for single-file documents where everything must travel together.
For anything bigger it usually backfires: Base64 inflates the payload by about 33%, the embedded image can't be cached or lazy-loaded separately, and it bloats the document that browsers must parse before rendering. A practical rule: embed under ~10KB freely, think twice up to 50KB, and above that serve a normal image file. The tool flags oversized images for exactly this reason.
How to use Image to Base64
- 1Drop an image into the box above (JPG, PNG, WebP, GIF or SVG).
- 2The four output formats are generated instantly.
- 3Copy the one your code needs — data URI for HTML/CSS, raw Base64 for JSON or APIs.
Frequently asked questions
Why is the Base64 version larger than my image?
Base64 represents every 3 bytes of binary as 4 text characters, adding roughly 33% overhead. That's the cost of making binary safe to embed in text.
What's the difference between the data URI and raw Base64?
The data URI includes the data:image/...;base64, prefix so browsers can render it directly in src or CSS. Raw Base64 is just the encoded bytes — what APIs and JSON fields usually expect.
Is my image uploaded to encode it?
No. The file is read and encoded locally with the FileReader API; it never leaves your device.