What is the Image to Base64 tool?#
Image to Base64 turns an image file into a base64 string you can embed in HTML or CSS. Base64 is an encoding scheme that represents binary data, such as images, as text. Pick one of four shapes — the raw base64 string, a data URL, an <img> tag, or a CSS url() value — then copy the result or download it as a .txt file.
Everything runs in your browser. The image is read on your device and never uploaded.
How to Use#
- Select an image by clicking the drop zone, or drag and drop a file onto it.
- Choose the output format from the row above the result: Raw base64, Data URL, img tag, or CSS url().
- Copy the result with the Copy button, or save it as a .txt file with the Download button.
The selected image shows in the preview panel. Press the Clear button to reset the image and the output together.
For a large image, only the beginning of the result is shown in the result box. The full text is available through Copy or Download.
Output Formats#
- Raw base64: the base64 string with no prefix. Use it when you need the base64 text itself, such as in an API or your own code.
- Data URL:
data:image/png;base64,..., a complete value that includes the MIME type and the base64 data. Use it directly in an HTML attribute such assrc. - img tag: a ready-to-paste
<img src="..." alt="">element. - CSS url():
url("..."), ready forbackground-imageand similar properties.
Common Use Cases#
- Embedding a small icon or logo into an HTML email or a self-contained document.
- Inlining an image into a stylesheet so it loads together with the CSS.
- Using a data URI image in a prototype or a code example.
- Passing image data as a string, such as in an API or a JSON payload.
FAQ#
PNG, JPG, WEBP, GIF, SVG, BMP, and other image files your browser can read.
Yes, SVG is encoded like any other image. Note that SVG is already text, so its base64 version is larger than the source file.
No. Base64 only changes how the image data is represented. Nothing is re-encoded or compressed, so the original image data is preserved in base64 form.
No, one at a time. Choosing or dropping another image replaces the previous result.
Notes#
- Base64 adds about 33% to the data size. A 1 MB image becomes roughly 1.33 MB of base64 text.
- Embedding a large image in HTML or CSS increases the file size and load time, so base64 is generally best for small images.