Image to Base64 Converter
Convert images to Base64 data URLs for embedding in HTML and CSS. Decode Base64 back to images. Free and private.
Drop your image here
or click to browse files
Base64 Converter Features
Two-way conversion between images and Base64 data URLs.
Upload any image and instantly receive a full data URL ready to paste into HTML, CSS, or code.
Paste any Base64 data URL to preview the image and download it as a file.
Copy the entire Base64 string to clipboard with a single click.
Key Takeaways
- The tool runs entirely in your browser using the FileReader API, so your image is read processed locally on your device.
- It works both ways: encode an image into a Base64 data URL with its file size and string length, or paste a data URL or raw Base64 to preview and save it back as a real image file.
- A Base64 string is about 33 percent larger than the original binary, so inlining is best for small icons, logos, and email images, while photos and large or reused images are better served as external files.
- If you decode raw Base64 with no data:image header the tool assumes PNG, so add the correct data:image prefix when you need a specific saved file extension.
How to Convert an Image to a Base64 Data URL
Load your image
Drag an image onto the upload area or click Choose Image to pick a file from your device. The file is read locally in your browser with the FileReader API, so it is never sent to a server.
Copy the generated data URL
The full data URL appears in the output box along with the original file size and the Base64 string length in characters. Click Copy to place the entire string on your clipboard.
Decode a string back to an image
Switch to the Base64 to Image tab, paste a data URL or a raw Base64 string, and click Decode Image. The preview renders in the browser and Save Image downloads it using the detected MIME type.
Base64 Data URL vs External Image File
Embedding an image as a Base64 data URL trades an extra network request for added bytes. The comparison below helps you decide when inlining is worth it and when a regular file URL serves you better.
| Factor | Base64 Data URL | External Image File |
|---|---|---|
| Extra HTTP request | None, the image travels inside the document | One request per image |
| Transfer size | About 33 percent larger than the binary | Original binary size |
| Browser caching | Cached only with the host file | Cached and reused independently |
| Best for | Small icons, logos, sprites, inline email images | Photos and large or frequently reused images |
| Where it lives | HTML src, CSS background-image, JSON, JS | Separate file referenced by URL |
| Editing later | Replace the whole string | Swap the file, keep the same URL |
Which Mode and Format Should You Use?
Encode an icon for CSS
Use Image to Base64 on a small PNG or SVG, then paste the data URL into a background-image url() value to drop the HTTP request for that asset.
Inline an image in HTML or email
Copy the full data URL and use it as the src of an img element. Keep inlined images small, since some email clients filter very long Base64 strings.
Recover an image from a string
Use Base64 to Image when you have a data URL or raw Base64 from code, an API, or a config file and need to preview or save it as a real file.
Raw Base64 with no header
If your string lacks the data:image prefix, the decoder assumes PNG and adds the header automatically so the preview still renders.
Common Problems and Fixes
Decoding shows Invalid base64 image data
The string is truncated or corrupted, or it is not actually an image. Paste the complete value including every character, and confirm it represents an image format the browser can render.
The saved file has the wrong extension
Save Image names the file from the MIME type in the data URL header. If you pasted raw Base64 with no header, the tool defaults to PNG. Add the correct data:image prefix to control the saved extension.
The Base64 string is far larger than the image
This is expected. Base64 encoding adds roughly 33 percent overhead because it represents binary bytes as ASCII characters. For large images, link to an external file instead of inlining.
Nothing happens when I drop a file
Only image files are accepted. If you dropped a non-image file or a folder, the tool ignores it. Choose a single image such as JPEG, PNG, WebP, GIF, or SVG and try again.
What is a Base64 Image Data URL?
A Base64 data URL is a way to encode binary files as text so they can be embedded directly in HTML, CSS, JSON, or any text-based format without needing a separate file request.
Frequently Asked Questions
When should I use Base64 for images?
Base64 is useful for small images like icons, logos, or sprites that you want to embed directly in HTML or CSS.
It eliminates a separate HTTP request for the image file.
For large images, a regular file URL is usually better due to the 33% size overhead.
How big does Base64 make an image?
Base64 encoding increases file size by approximately 33%.
A 100 KB image becomes roughly 133 KB when Base64 encoded.
This is a trade-off for the convenience of embedding images as text.
Can I use Base64 images in emails?
Yes, Base64 data URLs can be used in HTML emails to embed images inline.
However, very large Base64 strings may be filtered by some email services.
Test in your target email clients before relying on this approach.
What is the difference between the data URL and raw Base64?
A data URL includes the MIME type header: data:image/png;base64, followed by the raw Base64 string.
Some tools require just the raw Base64 without the header prefix.
The decoder in this tool accepts both formats automatically.
Sources and References
Format and tool details on this page are based on the official specifications and documentation below.
- RFC 4648: Base16, Base32, Base64 Data Encodings- IETF
- Data URLs- MDN Web Docs
- PNG Specification (Third Edition)- W3C
- PNG image type- MDN Web Docs
- JPEG standard (ISO/IEC 10918)- JPEG Committee