About the Image to Base64
Image to Base64 encodes a picture as a text string called a data URL, beginning with data:image/png;base64,. You can paste that string straight into an HTML img tag or a CSS url(), so the image needs no separate file.
This is useful for tiny icons and email templates. Be careful with large pictures: Base64 text is about one third bigger than the original file and cannot be cached separately, so for larger images a normal file is better.
How to use it
- Click Choose image.
- Press Convert to produce the data URL.
- Press Copy and paste it where you need it.
Example use
HTML: <img src="data:image/png;base64,...">. CSS: background:url(data:image/png;base64,...).
Keep embedded images under a few kilobytes for best performance.
To turn Base64 text itself back into readable text, use the Base64 Encoder / Decoder.
Real-world examples
Email templates. Embed a tiny logo so it displays without an external link.
Single-file demos. Put small icons inside one HTML or CSS file with no image folder.
API payloads. Some services accept images as Base64 strings inside JSON.
Common mistakes
Embedding large photos bloats the page and blocks caching. Forgetting the data:image/png;base64, prefix when using only the encoded part makes the browser unable to show the image. Using the wrong type in the prefix (for example image/png for a JPEG) can also fail in some places.
How it works
The browser's FileReader reads the file and returns a data URL, which already contains the correct type prefix followed by the Base64 text of the file's bytes. Every three bytes of the image become four characters of text, so the string is about a third longer than the file.
Frequently asked questions
Does the image get uploaded?
No, it is read locally.
Is Base64 encryption?
No. It is just an encoding and offers no security.
Why is the text so long?
Binary data becomes about 33 percent bigger as text.