Image to Base64 Converter
Drag in an image to get its Base64 data URI plus ready-to-use CSS, HTML and Markdown snippets — or paste a Base64 string to preview and download the image. Everything is processed locally, never uploaded.
Drop an image here, or click to choose
PNG · JPG · WebP · GIF · SVG — encoded locally, never uploaded
About this tool
The Image to Base64 Converter turns an image file into a Base64 data URI you can paste directly into CSS, HTML or Markdown — no separate image hosting required. It also works in reverse: paste a data URI or raw Base64 string and preview the decoded image, then download it as a file.
Inlining small images as data URIs removes an extra network request, which is handy for icons, logos, email templates and self-contained demos. The file is read locally with the browser's FileReader, so your image is processed on your device and never uploaded to a server.
How to use
- Drag and drop an image onto the drop zone, or click to pick a file.
- Copy the generated Base64 data URI, or grab a ready-made CSS, HTML or Markdown snippet.
- To decode, paste a data URI or Base64 string into the input to preview the image.
- Check the preview and file size before using the result.
- Download the decoded image as a file, or copy the encoded string into your project.
Features
- Convert PNG, JPG, WebP, GIF and SVG images to Base64 data URIs.
- Ready-to-paste CSS background, HTML <img> and Markdown snippets.
- Reverse mode: decode a data URI back to a viewable, downloadable image.
- Live preview and file-size readout so you can judge inline size.
- Drag-and-drop or click-to-upload input.
- Everything runs locally — images are never uploaded.
Frequently asked questions
Are my images uploaded to a server?
No. The image is read locally using the browser's FileReader API and converted on your device. Nothing is sent anywhere.
When should I inline an image as Base64?
Data URIs work best for small assets like icons and logos, where saving a request outweighs the size overhead. For large images, a normal file URL is usually more efficient.
Why is the Base64 string larger than the original file?
Base64 encoding adds about 33% to the size because it maps three bytes to four characters. That is expected and is the cost of embedding binary data as text.
What is a data URI?
A data URI embeds the file's content directly in a string, like data:image/png;base64,.... Browsers treat it as if it were a real image URL, so it can be used inline in CSS or HTML.
Can I convert the Base64 back into an image file?
Yes. Paste the data URI or Base64 string into the decode input, preview it, and download the reconstructed image file.