Image to Base64
Encode an image as a Base64 data URI for inline CSS, HTML or JSON.
Image Tools
IMAGE → DATA URI
Loading tool…
Files are processed in your browser. Nothing is uploaded to a server.
A Base64 data URI embeds an image directly inside your code as text, so the browser needs no extra request to load it. Developers use it for tiny icons, email templates and self-contained HTML where an image must travel with the markup.
This tool reads your image and outputs a ready-to-paste data: URI, plus snippets for HTML and CSS.
How to encode an image
- Upload the image (small files work best for inlining).
- Copy the generated Base64 data URI.
- Or copy the ready-made
<img>or CSSbackgroundsnippet. - Paste it directly into your HTML, CSS or JSON.
When to inline (and when not to)
| Scenario | Inline as Base64? |
|---|---|
| Tiny icon or logo (< 5 KB) | Good idea — saves a request |
| Email HTML | Often necessary for reliability |
| Large hero photo | Avoid — bloats the file and can’t be cached |
Encoder features
- Outputs a complete data URI with the correct MIME type.
- Copy-ready HTML and CSS snippets.
- Shows the encoded size (Base64 is ~33% larger than the file).
- Encoding happens locally in your browser.
Frequently asked questions
Why is the Base64 string bigger than my image?
Base64 encoding adds roughly 33% overhead because it represents binary data with text characters. That is normal.
Can Base64 images be cached?
Not independently — they are part of the file that embeds them, so they reload whenever that file does. Keep large images as separate, cacheable files.
Is there a size limit?
Technically no, but inlining anything over a few kilobytes usually hurts more than it helps.