File Conversion
What It Does
Turns images into Base64 text (or a ready-to-paste data: URI, CSS, HTML, Markdown, or JSON snippet) so you can embed them directly in code — and turns a Base64/data-URI string back into a downloadable image. Everything happens in your browser; nothing is uploaded.
How to Use It
- Encode: drop images (up to 20), pick an output flavor (e.g. Data URI or CSS), then Copy the string or Download it as
.txt. - Decode: paste a Base64 body or a full
data:URI, then Download the reconstructed image. - Use Line wrap to format long strings for email/MIME, or leave it as a single line for code.
Options Explained
| Option | Description |
|---|---|
| Mode | Encode (image → text) or Decode (text → image). |
| Output flavor | Raw Base64, Data URI, CSS background-image, HTML <img>, Markdown, or JSON string. |
| Line wrap | Insert newlines every 64/76 (or custom) columns, or keep one continuous line. |
| CSS selector | The selector used when generating a CSS background-image rule. |
| Alt text | The alt attribute used when generating an HTML <img> tag. |
| Filename pattern | Template for the downloaded .txt file; must contain {name}. |
| Output format | (Decode) the extension used when the pasted string has no or an ambiguous MIME type. |
Drag & drop images here, or click to choose
PNG · JPEG · WebP · BMP · GIF · SVG (max 20, ≤ 10 MB each)
🔒 Processed entirely on your device — nothing uploaded.
About Base64 & Data URIs
Base64 encodes binary data (like an image) using only 64 printable ASCII characters, so it can travel safely through text-only channels — HTML attributes, CSS, JSON, email (MIME), and URLs. A data URI wraps that text with a data:<mime>;base64, prefix so a browser can treat the string itself as if it were a file, letting you embed an image directly in your markup with no separate request.
The trade-off is size: because Base64 represents 3 bytes with 4 characters, the text is about 33% larger than the original file, and inlined assets can’t be cached or reused across pages the way a linked file can. That makes data URIs great for very small, frequently-inlined graphics (icons, tiny backgrounds, email images) and a poor fit for large photos. Because this tool only re-packages the exact file bytes as text (it never re-encodes the pixels), the image is preserved bit-for-bit — including animation and metadata — unlike the format converter, which re-renders through a canvas.
Output Options & Limits
- Output flavors: raw Base64, a full data URI, and ready-to-paste snippets for CSS background, HTML
<img>, Markdown, and JSON. - Line wrapping: off, 64, 76 (MIME), or a custom width from 1 to 998 characters.
- Lossless: the exact file bytes are re-packaged as text, so pixels, animation, and metadata are preserved bit-for-bit.
- Batch limits: up to 20 files per run; outputs above ~1 MB trigger a warning, since large data URIs bloat your markup.
Example
Encode a 1 KB icon.png as a data URI → data:image/png;base64,iVBORw0KGgo…, which you can paste straight into a CSS background-image with no extra HTTP request.
Frequently Asked Questions
Why is the Base64 output larger than my file?
Base64 represents every 3 bytes with 4 characters, so the encoded text is about 33% larger than the original binary file.
When should I inline an image as a data URI?
Data URIs work best for very small, frequently-used graphics like icons. They’re a poor fit for large photos because inlined assets can’t be cached or reused across pages.
Does encoding change my image?
No. This tool re-packages the exact file bytes as text without re-rendering the pixels, so the image is preserved bit-for-bit, including any animation and metadata.
Is my image uploaded to a server?
No. Encoding happens entirely in your browser; your files never leave your device.