Image to Base64
Encode an image as a Base64 data URL for embedding directly in HTML, CSS or JSON.
Upload an image
Drag & drop files here, or
Converted instantly to a Base64 data URL
How It Works
- 1Upload an image.
- 2The Base64 string is generated instantly.
- 3Copy it to your clipboard.
Features
- Instant conversion
- One-click copy
Privacy
This tool runs entirely in your browser using the Canvas API — your image is never uploaded to a server.
About Image to Base64
Base64 encoding represents binary data — like the raw bytes of an image file — as plain ASCII text, using a 64-character alphabet of letters, digits, and two symbols. It does this by regrouping every 3 bytes of binary data into 4 text characters, which is why Base64 output is always roughly 33% larger than the original binary file. That overhead is the trade-off for being able to embed binary content anywhere only text is allowed, such as inside HTML, CSS, JSON payloads, or database text fields.
The most common use is a CSS or HTML data URL — a string starting with data:image/png;base64, followed by the encoded bytes — which lets a small image, icon or logo be inlined directly into a stylesheet or markup file instead of requiring a separate network request to fetch it. This can reduce the number of round trips a browser makes, which matters more for many tiny icons than for a handful of large photos.
Because of the size increase, Base64 embedding works best for small images — icons, small logos, tiny UI graphics — rather than large photos, where the extra 33% and the loss of independent browser caching outweigh the benefit of avoiding a separate file request.