Image to Base64
Encode images as Base64 data URIs.
100% private — runs in your browser, nothing is uploaded.
Click to upload, drag & drop, or paste
PNG, JPG, WebP or GIF
Ctrl+Vto paste from clipboard
How to use the Image to Base64
- 1Upload an image
Drag and drop or click to select a small image such as an icon or logo.
- 2Get the data URI
The Base64 data URI is generated instantly, with the file and encoded sizes shown.
- 3Copy a snippet
Copy the raw data URI, or the ready-made HTML <img> or CSS background snippet.
- 4Paste into your code
Drop it into your HTML, CSS or email template — no separate image file needed.
Examples
| Input | Output |
|---|---|
icon.png (2 KB) | data:image/png;base64,iVBORw0KG… |
Use in CSS | background-image: url("data:image/png;base64,…") |
Free online image to Base64 encoder
This image to Base64 tool converts an image into a data URI you can embed directly in HTML or CSS. It is a favourite of web developers for inlining small icons and logos to save an HTTP request.
What you get
- The full data URI with the correct MIME type.
- A ready-to-paste HTML
<img>tag. - A CSS
background-imagesnippet. - The original and encoded sizes, so you can judge whether inlining is worth it.
A word on size
Base64 encoding grows the data by roughly a third and cannot be cached like a normal file, so reserve it for small assets. For anything larger, a regular image file served normally will perform better. Because the encoding runs in your browser with the FileReader API, your image stays completely private.
Frequently Asked Questions
What is a Base64 image (data URI)?
A data URI encodes an image's bytes as Base64 text so it can be embedded directly in HTML or CSS, with no separate file. It starts with data:image/…;base64, followed by the encoded data.
Why embed an image as Base64?
It removes an extra HTTP request, which can speed up small assets like icons, and keeps everything in one file — handy for emails, single-file pages and inline SVGs.
When should I not use Base64 images?
Avoid it for large images. Base64 is about 33% bigger than the binary file, can't be cached separately, and bloats your HTML or CSS. It is best for small icons and logos.
How do I use the encoded string?
Copy the data URI into an <img src> attribute or a CSS background-image url(). This tool gives you ready-made HTML and CSS snippets to paste straight in.
Is my image uploaded to a server?
No. The file is read and encoded entirely in your browser using the FileReader API, so your image never leaves your device.
Which image formats can I encode?
Any image your browser can read — PNG, JPG, WebP, GIF and SVG. The correct MIME type is included automatically in the data URI.