Image ↔ Base64
Encode images to Base64 data URIs and decode them back.
Image ↔ Base64 converts in both directions: drop an image to get a Base64 string, or paste a string to get an image back. The two mode buttons read "Image → Base64" and "Base64 → Image"; the card describes the job as "Encode images to Base64 or decode Base64 strings back to images." Encode mode reports Original Size, MIME Type, and "Base64 Output ({n} chars)" ready to copy or download as .txt.
Decode mode accepts either a full data URI or raw Base64 (placeholder: "Paste base64 encoded string here... Supports raw base64 or data URI format (data:image/png;base64,...)"). When the input has no data: prefix, the tool sniffs magic bytes to infer JPEG, PNG, GIF, WebP, or BMP. Everything runs through FileReader and atob locally — nothing is uploaded.
How it works
Encoding uses FileReader.readAsDataURL, then strips the prefix when you need raw Base64. Stats and the truncated preview (200 chars until "Show all") update with "Image encoded successfully!"; "Copy Base64" and "Download .txt" hand off the string, and "Decode Back" round-trips it without re-uploading the file.
Decoding accepts data: URIs directly or runs atob on raw Base64, then sniffs the leading bytes — ffd8ff JPEG, 89504e47 PNG, 47494638 GIF, 52494646 WebP, 424d BMP — to pick the MIME when none is declared. The result previews as an image you can "Download Image" (decoded.{ext}) or "Copy Data URL"; bad input surfaces "Invalid Base64 string".
How to use
- Start in "Image → Base64" mode (it is the default).
- Drop an image; the toast "Image encoded successfully!" confirms the read.
- Review Original Size and MIME Type, and expand the truncated preview with "Show all" (toggle back with "Show less").
- Click "Copy Base64" or "Download .txt" to take the raw string.
- Switch to "Base64 → Image" mode.
- Paste a data URI or raw Base64 into the "Paste Base64 String" textarea and click "Decode".
- Preview the decoded image, then "Download Image" or "Copy Data URL".
- Use "Clear" to reset the decode box, or "Remove" to clear the encoded file.
Tips
- The preview truncates at 200 characters until you hit "Show all" — that keeps megabyte strings from bogging down the UI.
- Raw Base64 without a data: prefix still decodes — magic-byte sniffing fills in the MIME type.
- "Decode Back" in encode mode round-trips the just-encoded string without choosing the file again.
- Base64 inflates size by about 33% — great for inlining a logo in CSS, poor for storage.
- Toasts cover the failure paths: "Paste a Base64 string first", "Failed to encode image", and "Invalid Base64 string".
Image ↔ Base64 FAQ
Does encoding upload the file?
No — FileReader runs locally in the browser; the image never leaves the device.
What inputs can decode mode handle?
Raw Base64 or full data URIs, with MIME sniffed for JPEG, PNG, GIF, WebP, and BMP when needed.
Why does only part of the Base64 show?
The UI truncates the preview at 200 characters — click "Show all" to expand it.
Can I get the data URL form?
Yes — in decode mode, "Copy Data URL" copies the data: URI to the clipboard (toast: "Data URL copied!").
What is in the .txt download?
The raw Base64 string for the encoded image, with no data: prefix.
Credits
- FileReader / atob / Blob — Local Base64 encode and decode primitives