About Base64 Image Encoder & Decoder
Base64 Image Encoder & Decoder turns an image file into a Data URL you can paste into HTML, CSS, JSON, or a test fixture, and turns a Data URL or a bare Base64 payload back into a picture you can actually look at. Every conversion reports the media type and the decoded byte size, so you can tell what a payload contains before you commit it to a file.
A Data URL is three parts glued together: the scheme and media type, the encoding marker, and the payload, as in data:image/png;base64, followed by the encoded bytes. Base64 represents three bytes with four characters, so the payload is always about 33 percent larger than the file, before you add the prefix. That trade buys one thing only: the image travels inside the document instead of costing a separate request, which is why it pays off for a 200-byte icon and rarely for a 200-kilobyte photograph.
How to use this developer tool
- Drop an image onto the upload area or choose a file. Anything the browser reports with an image/* media type is accepted, up to 64 MB.
- Read the line under the drop area: it shows the detected media type and file size, and that media type is what goes into the Data URL prefix.
- Copy the Data URL from the left pane, or keep only the part after the comma when the target field wants a bare Base64 payload.
- To go the other way, paste a Data URL or a bare payload into the same pane and run Decode & preview.
- Check the preview, then download the decoded file when you need the bytes rather than the text.
Worked example: reading an unknown payload
Someone pastes a Data URL into an issue and claims it is a broken logo. Decoding it answers what it really is in one step.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mN4KGsFAAMbATlDltX9AAAAAElFTkSuQmCCimage/png · 69 B
Preview: one opaque pixel, #E11D3A
Download: image.png (69 bytes)Sixty-nine bytes cannot be a logo; this is a one-pixel PNG, the kind used as a tracking pixel or a CSS placeholder. Note the arithmetic: 69 bytes become 92 Base64 characters, and the data:image/png;base64, prefix adds 22 more, for 114 characters of text carrying 69 bytes of image.
Identifying a payload from its first characters
The start of a Base64 payload encodes the file's magic number, so you can recognize the real format without decoding anything.
| Format | First bytes | Payload starts with | Data URL prefix |
|---|---|---|---|
| PNG | 89 50 4E 47 | iVBORw0KGgo | data:image/png;base64, |
| JPEG | FF D8 FF | /9j/ | data:image/jpeg;base64, |
| GIF | 47 49 46 38 | R0lGOD | data:image/gif;base64, |
| WebP | 52 49 46 46 | UklGR | data:image/webp;base64, |
| SVG (text) | 3C 73 76 67 | PHN2Zy | data:image/svg+xml;base64, |
| ICO | 00 00 01 00 | AAABAA | data:image/x-icon;base64, |
| PDF (not an image) | 25 50 44 46 | JVBERi0 | data:application/pdf;base64, |
Troubleshooting
A decoded JPEG downloads as image.png.
Why it happens When you paste a bare payload there is no media type to read, so the tool labels it image/png and the download falls back to the default file name. The bytes are still the original JPEG.
Fix Paste the full Data URL including data:image/jpeg;base64, so the media type is detected, or rename the downloaded file. Browsers sniff image data anyway, which is why the preview looks correct despite the wrong label.
The preview stays empty and no error appears.
Why it happens The payload was truncated during copying. Terminals wrap long lines, log viewers cut them with an ellipsis, and spreadsheet cells silently drop the tail.
Fix Copy the value from the raw source rather than from rendered output. A quick check: a complete Base64 payload has a length divisible by four once whitespace is removed, and PNG payloads end with RK5CYII=.
Decoding reports invalid Base64 for a value that looks like Base64.
Why it happens Whitespace, line breaks, missing padding, and the URL-safe characters - and _ are all handled automatically, so the cause is almost always a character from outside the alphabet: a soft hyphen, a smart quote, or an email client's > quote markers.
Fix Paste the value into a plain-text field first, or retype the few characters around the position where the string was wrapped.
The Data URL works locally but the image disappears in production.
Why it happens A Content-Security-Policy without data: in img-src blocks it, and several email clients strip data: images entirely.
Fix Add data: to the img-src directive if inlining is intentional, or host the file and reference it by URL. For email, an attached image referenced with cid: is the portable option.
When this tool is the right choice
- Inlining a small icon, spinner, or placeholder into a single-file HTML page or a style sheet.
- Embedding a fixture image inside a JSON or YAML test payload that has nowhere to put a binary attachment.
- Recovering an image out of a log line, an API response, or a database column that stores it as text.
- Checking the real media type and size of a payload someone pasted, without saving it to disk first.
When to use something else
- Making images smaller. Base64 adds roughly a third; use a real image optimizer, or the Gzip tool if you only need to see how the payload compresses in transit.
- Converting between formats or resizing. This tool copies bytes verbatim; the ID Photo tool handles sizing for portrait photos.
- Encoding non-image files. Use the Base64 Encoder & Decoder for text, and a command-line base64 for arbitrary binaries.
Privacy and data handling
The file is read into an ArrayBuffer with FileReader and encoded in this browser tab; the preview is a data: URL rendered by a local img element. No request is made and nothing is stored between visits. Be aware that encoding copies the file byte for byte, so EXIF metadata, including camera model and GPS coordinates, survives the round trip and will be inside any Data URL you paste into a ticket or a chat.
Related developer tools
Frequently asked questions
Is a Data URL the same thing as Base64?
No. Base64 is the encoding of the bytes; a Data URL is a URL that carries a media type plus that encoded payload. A bare payload has no idea what it represents, which is why pasting one here makes the tool assume PNG.
Why is the encoded image bigger than the file?
Base64 spends four characters on every three bytes, a fixed 4:3 ratio, and the prefix adds about twenty more characters. A 69-byte PNG becomes 114 characters of text. Transport compression recovers some of that, but never all of it.
Should I inline images in production CSS?
Only tiny ones. An inlined image cannot be cached separately, is re-downloaded with every change to the style sheet, and blocks rendering of the file it lives in. A few hundred bytes is a reasonable ceiling.
Does encoding strip EXIF or GPS data?
No. The encoder copies the file byte for byte, so every metadata block survives. Strip metadata with an image tool before encoding a photograph you intend to share.
Can I paste a URL-safe payload?
Yes. The decoder maps - back to + and _ back to /, and re-adds missing padding, so payloads taken from a JWT or a URL parameter decode without editing.
What is the largest image I can encode?
The file picker rejects anything over 64 MB, but practical limits arrive earlier: a multi-megabyte Data URL is slow to paste, slow to render, and unusable in most text fields.