Base64 Image

How to use it

1. To encode: choose an image up to 5MB. The data URL appears immediately.
2. Toggle Strip the data: prefix if you need the raw Base64 payload only.
3. Click Copy to grab the output.
4. To decode: paste a data URL or raw Base64 into the second panel and click Preview image.
5. The decoded dimensions and approximate size appear under the preview.

Common use cases

• Inlining small icons - embed a tiny icon directly in CSS with background-image: url(data:...) and save a request.
• Self-contained HTML files - ship a single file with images embedded for email templates or offline docs.
• Debugging payloads - paste a Base64 blob from an API response and see the actual picture.

Why it stays private

Encoding uses FileReader and decoding uses an img element, both inside your browser tab. Images and Base64 strings never leave your device.

FAQ

Q: Why does the Base64 output look bigger than my file? A: Base64 encodes every 3 bytes into 4 characters, so text output is roughly a third larger than the binary file. That is the cost of representing bytes as text.

Q: Are huge images suitable for inlining? A: Data URLs skip caching and bloat the host document, so inlining pays off for icons and small graphics under a few kilobytes. Full photos belong in separate files.

Q: The preview says the Base64 is valid but shows nothing. Why? A: The string may decode to a format the browser cannot render in an img element, or to a non-image file. Check that the payload really is image data.