How to Convert an Image to a Base64 Data URL
Base64 turns an image into a long string of text. That sounds odd until you need it: embedding a small icon directly in HTML or CSS so it loads with the page and needs no separate file, storing an image in a JSON payload, or pasting a picture into a config that only accepts text. Converting an image to Base64 makes it portable as plain text. This guide explains what Base64 is, when to use it, and when not to.
What Base64 encoding is
Base64 represents binary data — like the bytes of an image — using only printable text characters. The result is a string, often prefixed with a data URL header like `data:image/png;base64,` so a browser knows it is an embeddable image. Anywhere that accepts text can then carry the image.
How to convert an image to Base64 with this tool
- Open the Image to Base64 tool.
- Load your image.
- Copy the generated Base64 string or full data URL.
Everything runs in your browser — the image is never uploaded.
When Base64 is the right choice
- Tiny icons and logos in CSS/HTML — embedding a small image inline saves an extra network request, which can speed up page load.
- Images inside JSON or APIs — when a system only moves text, Base64 lets an image ride along.
- Self-contained files — a single HTML file with images embedded needs no accompanying folder.
- Email or config where an external image link is not allowed.
When to avoid it
Base64 is not free. The encoded string is about 33% larger than the original binary file. That overhead is negligible for a 2 KB icon but wasteful for a 2 MB photo. Rules of thumb:
- Only embed small images. For anything sizeable, a normal image file with a link is more efficient and cacheable.
- Big Base64 blocks bloat your HTML/CSS and cannot be cached separately by the browser.
- Compress and resize first — shrink the image with Compress Image and Resize Image so the string stays small.
The reverse trip
To turn a Base64 string back into a usable image file, Base64 to Image decodes it. The two tools are a matched pair — encode to embed, decode to extract.
Common uses
- Inline icons in stylesheets.
- Images in JSON payloads.
- Single-file HTML documents.
Privacy and limits
Encoding is fully local — no upload, no size limit, nothing stored, offline once loaded. Open the Image to Base64 tool to turn a picture into text.
Try the tool
Open Image to Base64 →