Image to Base64 converter
Turn an image into a Base64 string you can paste into code.
Base64 text is about 37% larger than the original file. It is a good fit for small icons, not full photos.
Runs in your browser. Your files never leave your device.
- Data URL, CSS and HTML output
- Works with any image type
- Nothing uploaded
How to convert an image to Base64
- Drop an image here, or tap Choose files.
- Copy the data URL, raw Base64, or a ready CSS or HTML snippet.
- Paste it into your code.
How the encoding works
Base64 turns every 3 bytes of the image into 4 text characters, using the 64 characters A to Z, a to z, 0 to 9, plus and slash, the standard alphabet from RFC 4648.
A data URL is that text with a short prefix, like data:image/png;base64, so a browser or app knows what it is looking at without a separate file.
| Original file | Base64 text (about 37% larger) |
|---|---|
| 5 KB icon | About 6.9 KB |
| 20 KB logo | About 27 KB |
| 100 KB photo | About 137 KB |
That overhead is why data URLs work best for small graphics, not full photos.
Where data URLs are used
- CSS, inside background-image, so a small icon loads with the stylesheet instead of a separate request.
- HTML, inside an img src attribute or inline SVG markup.
- JSON API responses and database fields that store an image as text.
- Email HTML, since some email clients block linked images but allow inline data.
When to keep a normal file instead
Data URLs are not cached separately from the page that holds them, so a photo used on ten pages gets downloaded ten times instead of once. For anything larger than a small icon, a normal image file with browser caching loads faster.
Image to Base64 FAQ
What is a Base64 data URL?
It is an image's bytes written out as text, so you can paste an image straight into HTML, CSS or JSON without a separate file.
Does Base64 make the file bigger?
Yes, by about 37 percent, since encoding turns every 3 bytes of the image into 4 characters of text.
When should I use a data URL instead of a file?
For small icons and simple graphics, where saving a network request matters more than page size. For photos, keep a normal image file.
Is my image uploaded anywhere?
No. The encoding runs in your browser, so the image never leaves your device.
Does converting to Base64 change the image quality?
No. The pixel data is not touched, only rewritten as text, so decoding it back gives you the exact original bytes.
Is there a maximum size for a data URL?
Browsers do not enforce a hard limit, but a long data URL cannot be cached on its own and slows down parsing, so keep them to small icons and graphics.
Does every browser support data URLs?
Yes. Data URLs have worked in every major browser since Internet Explorer 8, including all current mobile browsers.
Can I use this for a favicon?
A small favicon can be inlined as a data URL in the HTML head, though a normal favicon.ico file plus the PNG sizes is still the more common setup.