Image to Base64
Convert an image to a Base64 data URL with a copy button and a live size check — entirely in your browser.
What is Image to Base64?
A Base64 data URL encodes an image's binary bytes directly into a text string prefixed with data:image/png;base64, so the image can be embedded inside HTML, CSS, or JSON without a separate file request. The browser decodes that string back into pixels at render time, which removes an HTTP round trip but increases the payload by roughly 33 percent because Base64 uses only 64 of the 256 possible byte values. Data URLs are handy for tiny icons, inline CSS backgrounds, SVG avatars, and self-contained HTML or email templates where cutting external requests matters more than the size overhead. This tool reads a dropped or chosen image entirely in the browser through the FileReader API and returns a ready-to-paste data URL alongside a side-by-side size comparison.
How to Use Image to Base64
- Drag an image onto the drop zone, or click it to pick one from your device.
- The tool reads the file with FileReader and produces a data:image/...;base64,… string.
- Click "Copy data URL" to copy the full string, then paste it into an <img src="…"> tag, a CSS url(…), or a JSON field.
- Compare the original file size with the data-URL size to judge whether inlining is worth the ~33% overhead.
Examples
Small PNG icon
Input: 512-byte favicon.png
Output: data:image/png;base64,iVBORw0KGgo… (≈ 684 characters)
JPEG photo
Input: 120 KB photo.jpg
Output: data:image/jpeg;base64,/9j/4AAQ… (≈ 160 KB encoded)
Common Mistakes
- Inlining large photos as data URLs — the 33% expansion and loss of separate caching make pages slower, not faster, past a few hundred kilobytes.
- Forgetting to quote the data URL inside CSS url("…"), which can break parsing when the string contains characters that are not valid in an unquoted token.
- Pasting a data URL into a context that silently truncates very long attribute values (some CMSs and databases), corrupting the image without an error.
- Treating a data URL as a CDN replacement — it cannot be cached independently, served with cache headers, or deduplicated across pages.
Why Use This Tool
- 100% client-side — no upload, no server, and it keeps working offline once the page is loaded.
- One-click copy of the full data:image/...;base64,… string, ready for HTML, CSS, or JSON.
- Live size comparison between the original file and the encoded data URL so the inlining trade-off is visible.
- Handles PNG, JPEG, GIF, WebP, SVG, BMP, and more through the standard FileReader pipeline.