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.