How to use Image to Base64
- 1. Drop an image. PNG, JPEG, WebP, GIF, SVG, ICO, or AVIF.
- 2. Copy Data URI or HTML. Use the Data URI, HTML, CSS, or JSX snippet presets.
- 3. Check size overhead. Base64 is ~33% larger than the file — fine for small icons, not for huge photos in production.
About this tool
“Image to base64” and “convert image to base64 online” are among the strongest Base64 searches. Developers need Data URIs for email HTML, CSS backgrounds, and quick prototypes without hosting an asset.
Data URI format
Output looks like `data:image/png;base64,iVBORw0KGgo…`. Paste into an `<img src>` or CSS `url()`.
JavaScript and Python
In the browser, `FileReader.readAsDataURL` builds the same string. In Python, `base64.b64encode(open('x.png','rb').read()).decode()` then prefix the MIME type yourself.
Code examples
Node
Buffer.from("hello").toString("base64");
Buffer.from(b64, "base64").toString("utf8");Browser (UTF-8 safe)
btoa(unescape(encodeURIComponent(text)));
decodeURIComponent(escape(atob(b64)));Python
import base64
base64.b64encode(b"hello").decode() # aGVsbG8=
base64.b64decode("aGVsbG8=").decode()Data URI
const uri = `data:image/png;base64,${b64}`;
// <img src={uri} /> or CSS url('${uri}')