Free Online Base64 Image Converter
Convert images to Base64 data URIs or decode Base64 strings to image previews — free, online, and 100% client-side. Supports PNG, JPEG, WebP, SVG, and more.
100% Client-Side · Your data never leaves your browserHow to Use Base64 Image Converter
This tool has two modes, selectable via the tabs at the top of the tool:
- File mode (Image → Base64): drag and drop any image file onto the drop zone, or click to open a file browser. The tool reads the file locally, detects its MIME type, and outputs the full Base64 string along with a ready-to-paste CSS
data:URI. - Image mode (Base64 → Image): paste a Base64 string — with or without the
data:image/...;base64,prefix — into the input field. The tool decodes it and renders a live image preview below.
Common use cases include embedding small icons in CSS without an extra HTTP request, inlining images in HTML emails, and storing image thumbnails in JSON or databases. Use Ctrl/Cmd+K to clear all fields.
Frequently Asked Questions
What is a Base64 image / data URI?
A data URI embeds file content directly inside a URL using Base64 encoding. For images it looks like data:image/png;base64,iVBORw0K.... Browsers render it exactly like a regular URL, so you can use it in CSS background-image, HTML src, SVG, or any JSON payload.
Which image formats are supported?
Any image format your browser can read: PNG, JPEG, GIF, WebP, AVIF, SVG, ICO, BMP, and TIFF. The MIME type is detected automatically from the file and included in the data URI prefix.
Is there a file size limit?
No server-side limit — everything runs in your browser. However, Base64 encoding increases file size by ~33%, so embedding images larger than 100 KB as data URIs is generally not recommended for production use.
How do I use the result in CSS?
Copy the data URI and use it as: background-image: url("data:image/png;base64,..."). For HTML: <img src="data:image/png;base64,...">.
Why does Base64 end with = or ==?
Base64 encodes 3 bytes into 4 characters. If the input is not a multiple of 3 bytes, padding characters (=) are appended. One = means one padding byte; == means two.
Is my image sent to any server?
No. The conversion runs entirely in your browser using the FileReader API. Your image never leaves your device.