Image to Base64
Encode an image as a Base64 data URI for CSS or HTML.
- Instant
- Free
- Private (processed locally)
- No sign-up
- File size
- —
- Encoded size
- —
Large image: a data URI this big bloats your page. Prefer a regular file beyond a few dozen KB.
Processed locally: your image never leaves your device.
Encode an image to Base64 in two seconds
A data URI lets you embed an image directly in your code, without an external file. Drop your image, choose the output format — raw data URI, CSS property or HTML tag — and copy the result.
-
Drop your image
PNG, JPG, WebP, GIF, SVG… any image format is accepted and kept as-is: no re-encoding, no loss.
-
Choose the output
Raw data URI, ready-to-paste CSS background-image, or a complete HTML <img> tag.
-
Copy
One click on Copy and the code is in your clipboard, with before/after sizes displayed.
When to use (and avoid) Base64
| Situation | Data URI? | Why |
|---|---|---|
| Icon or logo < 10 KB | Yes | Saves an HTTP request, instant display |
| HTML email | Yes | External images are often blocked by default |
| Photo or banner > 100 KB | No | +33% weight, no separate caching, slower rendering |
| Image repeated across pages | No | A regular file is cached once and reused |
Tip: for vector icons, inline SVG (pasted directly into the HTML) is often lighter and sharper than its Base64 version.
Frequently asked questions
What is a data URI?
It is a URL that contains the file data directly, in the form data:image/png;base64,iVBOR… It can be used anywhere an image URL is expected: src attribute, CSS background-image, favicon…
Why encode an image as Base64?
To embed the image directly in HTML, CSS or JSON, without a separate file or an extra HTTP request. Handy for small icons, HTML emails or self-contained prototypes.
Does Base64 increase file size?
Yes, by about 33% compared to the original binary file. That is the price of text representation. Server gzip/brotli compression recovers part of it, but a regular file remains more efficient for large images.
Up to what size is it a good idea?
As a rule of thumb, keep data URIs for images under a few dozen KB (icons, logos, small patterns). Beyond that, they bloat your pages, prevent separate caching and slow down rendering.
Is my image sent anywhere?
No. Reading and encoding are done by your browser’s FileReader API. The image never leaves your device.