Image to Base64
Convert an image to a data URL or preview a pasted data URL. Your files are never uploaded to our servers. ToolkitPoint processes them on your own computer, so confidential documents stay with you.
How to use Image to Base64
- Choose an image under "Choose an image", then press "Convert to Base64"; a specification box shows its name, MIME type, byte size and encoded length.
- Press "Copy Data URL (data:image/...)" for a string you can paste into a CSS url() or an img src.
- Press "Copy Raw Base64" if you only want the encoded characters without the data: prefix.
- Press "Copy HTML <img> Tag" to get a ready-made tag with the data URL as its source and a generic alt text you should replace.
- To go the other way, paste text into "Or paste Base64 / Data URL to decode back to image", clear the file field, and press the main button to see the picture and its dimensions.
Worked example
Encode a 3.0 KB PNG icon (3072 bytes). The specification box lists "Original Binary Size: 3.0 KB" and a Base64 length of 4,118 characters, which is 4096 for the payload (3072 divided by 3, times 4) plus 22 for data:image/png;base64,. The result box then contains a string starting with data:image/png;base64,iVBOR.
When to use this tool
- Inlining a tiny logo in an HTML email template so it does not depend on a hosted file.
- Checking what image is hidden inside a long data:image string found in a stylesheet.
- Putting a small icon inside a JSON config or a single-file demo page.
Important limitations
Base64 encoding increases file payload size by approximately 33% compared to binary files; recommended primarily for small icons and critical UI badges.
Frequently asked questions
How much bigger does Base64 make the image?
About one third bigger. Every three bytes become four characters, so a 3072-byte file yields 4096 characters plus a prefix of roughly 22 characters. The stats box shows the exact character count.
Should I embed large photos this way?
Rarely. Inline data cannot be cached separately from the page and bloats your HTML or CSS. It suits tiny icons and small placeholder images; larger pictures are better as normal files.
What if I paste bare Base64 without a data: prefix?
The tool assumes PNG and adds the prefix data:image/png;base64, before decoding. If your data is really JPEG or WebP, include the full data URL so the decoder sees the right type.
Which wins if I select a file and also paste text?
The selected file takes priority and the pasted text is ignored. Clear the file input first when you want to decode a string. This also means a stale file selection can hide a newly pasted string.
Does it work for SVG or GIF files?
Yes for any image type the browser will read, because the file bytes are encoded as they are, without re-compression. The MIME type in the data URL comes from the file itself.