Image to Base64
Encode any image into a Base64 data URI and get a ready-to-paste CSS snippet. Free, private and processed entirely in your browser.
Encoding happens in your browser — your image is never uploaded.
How it works
When you choose an image, the browser’s FileReader.readAsDataURL reads the raw
bytes and returns a string that starts with the file’s MIME type and the
base64, marker, followed by the encoded data. That single string is a complete,
self-contained representation of the image. The tool drops it into a text box for you to
copy, and also wraps it in a CSS background-image: url(...) rule so you can use
it straight away. No canvas, no network — the encoding is a direct, local read, so your
image never leaves the page.
How to convert an image to Base64
- Click the box and choose an image, or drag one in.
- The Base64 data URI is generated instantly in your browser.
- Copy the data URI for use in HTML, JSON or an
imgsrc. - Or copy the ready-made CSS
background-imagesnippet. - Paste it into your code.
Why encode an image to Base64
Inlining an image as a data URI removes a network request. For a small icon, a sprite or a background used in a single component, embedding it directly in the HTML or CSS can make the page render without waiting for a second round trip — useful in email templates, where external images are often blocked, and in self-contained demos or bookmarklets that must ship as one file. JSON APIs sometimes carry small images this way too, so they travel inside a single payload.
The trade-off is size and caching: Base64 is about a third larger than the binary file and cannot be cached separately, so reserve it for small, frequently used graphics and keep big photos as normal linked assets. Everything here runs locally, so even unreleased artwork stays private. Need to shrink an image before inlining it? Use the compressor or resizer first, or sample its colors with the palette tool.
Related tools
Frequently asked questions
How do I convert an image to Base64?
Drop an image and the tool reads it as a data URI with the browser’s FileReader. The full Base64 string appears in a box you can copy, alongside a CSS snippet that uses it as a background.
What is a Base64 data URI used for?
A data URI embeds the image directly inside HTML, CSS or JSON as text, so the browser does not make a separate request for it. It is handy for tiny icons, email templates, single-file demos and inlining assets in stylesheets.
Why is the Base64 string larger than my file?
Base64 represents binary data using only text characters, which adds roughly one third to the size. The tool shows the original and encoded sizes so you can judge whether inlining is worth it for a given image.
Are my images uploaded to encode them?
No. Encoding happens locally with the FileReader API in your browser. The image is never sent to a server, so private or unreleased assets stay on your device.
When should I avoid inlining an image as Base64?
Avoid it for large images. A big data URI bloats your HTML or CSS, cannot be cached separately by the browser, and can slow the first render. Inlining suits small, frequently used graphics; keep large photos as normal linked files.
Does it work with PNG, JPG, SVG and WebP?
Yes. Any image type your browser can read is encoded, and the data URI keeps the correct MIME type, so transparent PNGs, SVGs, JPGs and WebP images all work as inline backgrounds or img sources.
Image Tools encodes images entirely within your browser. Files are never uploaded.