Image to Base64

Turn any image into a data URI with ready-to-paste HTML and CSS snippets.

Drag & drop images here
or click to choose files — you can also paste from clipboard

A Base64 data URI embeds an image directly inside your code as text, eliminating an extra HTTP request. It is a popular technique for small icons, logos and placeholder graphics in CSS, HTML emails, and single-file demos.

Drop an image and the data URI is generated instantly — no button needed. Alongside the raw Base64 string you get copy-ready snippets for an HTML <img> tag and a CSS background-image property, plus a size comparison showing the ~33% overhead Base64 adds over binary.

Because encoding is pure text transformation, it happens entirely on your device in milliseconds. Icons, avatars and screenshots alike never touch a server.

How to use

  1. Drop or paste an image (one at a time works best for copying).
  2. Copy the data URI, or grab the pre-built HTML or CSS snippet.
  3. Paste it into your code — done. No hosting required.

Why use this tool?

Frequently Asked Questions

When should I use Base64 images?
For small assets under roughly 5–10 KB: tiny icons, bullets, simple logos. There the saved HTTP request outweighs the 33% size overhead. For photos or anything larger, serve a proper compressed file instead — Base64 would bloat it and defeat caching.
Why is the Base64 version bigger than my file?
Base64 encodes every 3 bytes of binary data as 4 text characters, adding about 33%. Gzip compression on servers claws some of that back, but the encoded form is still larger than the original bytes.
Do Base64 images work in email?
Support is inconsistent. Many desktop and webmail clients strip or block data URIs for security reasons. For email campaigns, host images normally instead.
Is there a size limit?
Technically no, but browsers and editors get sluggish with multi-megabyte strings in a textarea. The tool handles icons and mid-size graphics comfortably; huge photos are better linked as files.