What is Base64, and what is a data URI?
The Image to Base64 converter takes an image file and gives it back to you as plain text. You can paste that text anywhere that expects an image link. Drop a PNG, JPG, GIF, WebP, SVG or any of five other formats on the box, and you get four versions of the same string: a data URI, the bare Base64, a CSS background-image line, and a complete <img> tag. Pick one, copy it, done. There's no sign-up, and the file never leaves your browser.
Base64
An image file is made of bytes, and most of those bytes aren't printable characters. You can't type them into a stylesheet or a JSON field. Base64 fixes that by rewriting the bytes using only 64 safe characters: A–Z, a–z, 0–9, + and /, with = as padding at the end. The result is longer, but it's text, and text goes anywhere. It's been a standard since the early days of email attachments (the current spec is RFC 4648), which is why every browser, language and server can decode it.
Data URI
A data URI is Base64 with a label on the front that tells the browser what the text decodes to. It looks like this: data:image/png;base64, followed by the Base64. Put that whole string in an src attribute or a CSS url() and the browser draws the image straight from the text. There's no second request and no file to host. The label in the middle, image/png, is the MIME type. It matters more than it looks, and we'll come back to it.
How image to Base64 conversion works
Base64 reads the file three bytes at a time. Three bytes are 24 bits. It cuts those 24 bits into four groups of 6 bits, and each 6-bit group (a number from 0 to 63) becomes one character from the 64-letter alphabet. Three bytes in, four characters out, every time.
Base64 length = 4 × ⌈bytes ÷ 3⌉ — divide the file size by 3, round up, multiply by 4. That's why the text is always about 33% bigger than the file.
The classic worked example uses text, because it's easy to follow. The word Man is three bytes, and it encodes to TWFu. When the last group comes up short, = fills the gap: Ma becomes TWE=, and M alone becomes TQ==. So a string ending in one or two equals signs isn't broken. It just means the file's length wasn't a multiple of three.
Now a real image. The smallest valid PNG, a single transparent pixel, is 67 bytes. Drop it in and the summary line reads PNG · 1 × 1 px · 67 B file → 92 B of Base64 (+37%). The data URI is:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==
That's 114 characters: 92 of Base64 plus the 22-character data:image/png;base64, prefix. Tiny files grow by a bit more than a third, because the padding and the rounding-up take a bigger share. Past a couple of kilobytes the growth settles at 33% and stays there.
How big your image gets as Base64
This is the number that decides whether inlining is a good idea, so the tool shows it before you copy anything. Here's what the engine reports for common file sizes:
| Image file | Base64 characters | Shown as | Growth | Size note? |
|---|---|---|---|---|
| 67 B (1 × 1 PNG) | 92 | 92 B | +37% | No |
| 1 KB | 1,368 | 1.3 KB | +34% | No |
| 2 KB | 2,732 | 2.7 KB | +33% | No |
| 5 KB | 6,828 | 6.7 KB | +33% | No |
| 7.5 KB (7,680 bytes) | 10,240 | 10 KB | +33% | No |
| 20 KB | 27,308 | 26.7 KB | +33% | Yes |
| 100 KB | 136,536 | 133.3 KB | +33% | Yes |
| 1 MB | 1,398,104 | 1.3 MB | +33% | Yes |
| 10 MB (the limit) | 13,981,016 | 13.3 MB | +33% | Yes |
The "size note" column is where the tool starts telling you that inlining may be the wrong call. The line sits at 10 KB of Base64, which is 7,680 bytes of image. One byte more, and you'll see: "That's a lot of text for one image. Inlining suits icons and small graphics; at this size a normal image file usually loads faster." It's advice, not a block. You still get the full string.
Why does size matter so much? An image linked as a file gets cached once and reused on every page. An image pasted into a stylesheet as Base64 is downloaded again with every copy of that stylesheet. It can't be cached on its own, and it holds up the file it lives in. A 1 KB icon costs nothing. A 1 MB photo inlined into your CSS makes every visitor wait for 1.3 MB of text before the page can paint.
The four output formats
Same Base64, four wrappers. Switch between them with the Output as control; Copy and Download always take the full text, even when the box on screen is shortened for a big image.
| Output | What you get | Where it goes |
|---|---|---|
| Data URI | data:image/png;base64,iVBOR… | Any src, href or url() |
| Base64 | iVBOR… with no prefix | APIs and JSON fields that ask for the raw string |
| CSS | background-image: url("data:image/png;base64,iVBOR…"); | A stylesheet rule, pasted as one line |
| HTML | <img src="data:image/png;base64,iVBOR…" alt=""> | A page, a template, or a single-file demo |
The HTML tag ships with an empty alt="" on purpose. That's the correct value for a decorative image. If the image carries meaning, write a real description in there before you ship it.
When converting an image to Base64 makes sense
Inlining is a trade: one fewer request in exchange for a third more bytes and no separate caching. It pays off in a handful of situations.
- Icons and tiny UI graphics. A 600-byte arrow or checkmark in your CSS saves a round trip and loads with the styles that use it.
- Single-file deliverables. A prototype, a bug reproduction, or an HTML report you want to send as one attachment, with no folder of images to lose.
- APIs that take images as JSON. Plenty of upload and vision endpoints want a Base64 string in a field, not a multipart file. The bare Base64 output is exactly that.
- Loading placeholders. A blurred 20-pixel preview inlined into the page shows up instantly while the real image loads.
And the case against: photos, hero images, anything over a few kilobytes, and anything used on more than one page. Link those as files and let the browser cache them.
The job itself is small. Read a file, encode it, add a prefix. Yet a lot of converters online turn it into a production. Some upload your file to a server to do what one line of browser JavaScript does. Some cap you at a few conversions a day and ask for a card to lift it. Some sit three menus deep in a design suite you rent by the month. This one reads the file in your tab, encodes it there, and shows you the result. Nothing leaves your device, which matters when the image is a screenshot with a customer's details in it.
Edge cases and gotchas
A PNG with a .jpg name
This is the classic silent bug. Phones, chat apps and CDNs rename files freely, so a PNG often arrives as IMG_2041.jpg. A converter that trusts the name writes data:image/jpeg in front, the string looks fine, and some browsers and mail clients show a broken image. Nothing in the text tells you why. The Image to Base64 tool reads the file's first bytes instead, so it writes image/png and tells you: "This is really a PNG, even though it's labeled JPEG. The data URI says image/png, so it will display."
HEIC and TIFF
The encoding is exact, but most browsers can't draw these formats at all, from a file or from Base64. The tool flags them. If the image is headed for a web page, run it through the HEIC to JPG converter or the image format converter first, then encode the result.
Files that aren't images
Drop a text file named notes.txt and you get a plain refusal, not a mystery string: the tool lists the ten formats it takes. If a file has an image name but no recognizable signature, it still encodes, uses the type from the name, and warns you the file may be damaged.
The 10 MB limit
Ten megabytes of image is 13.3 MB of text, and nothing you'd paste it into copes well with that. Bigger files are refused before they're read, with a pointer to the image compressor. Shrink it there, then bring it back.
No line breaks, by design. Some older encoders wrap Base64 every 76 characters, the way email attachments do. A line break inside a quoted CSS url() breaks the rule, and a lot of APIs reject wrapped Base64 outright, so this tool outputs one unbroken line.
Related developer tools
Encoding text instead of a file? The Base64 encoder and decoder handles strings in both directions, which is also the fastest way to check what a Base64 blob actually contains. If the image is too heavy to inline, the image compressor and image resizer will usually get an icon under the 10 KB line. Building a data URI by hand for an SVG in CSS means escaping characters; the URL encoder does that part. And if you're pasting an <img> tag into a place that shows markup as text, the HTML encoder escapes it.
Frequently asked questions
Why does my Base64 string end with = or ==?
That's padding, and it's correct. Base64 works in groups of three bytes. If the file's size isn't a multiple of three, the last group is short, and one or two = signs fill it out. A 67-byte PNG ends in == because 67 leaves a remainder of 1 when divided by 3.
Is Base64 a way to hide or encrypt an image?
No. Base64 is an encoding, not a lock. Anyone who has the string can turn it back into the original image in one step, with no key. If the image is private, treat the Base64 exactly as you'd treat the file.
Does converting an image to Base64 lower its quality?
No. Base64 rewrites the exact bytes of the file, and decoding gives back the same bytes, bit for bit. Nothing is recompressed or resized. If you want a smaller string, make the image smaller first.
Can I paste a screenshot instead of saving it as a file?
Yes. Take the screenshot, click anywhere on the page outside a text box, and press Ctrl+V (Cmd+V on a Mac). The tool picks up the image from the clipboard and encodes it the same way as a dropped file.
What's the difference between Base64 and Base64URL?
Base64URL swaps + for - and / for _, and often drops the padding, so the string can sit in a URL path without escaping. Data URIs and almost every image API use standard Base64, which is what this tool outputs.
Why can't I see the whole string in the output box?
For large images, the box shows the first 50,000 characters, because a multi-megabyte string in a text box can freeze a phone. The line under the box says how much is hidden. Copy and Download always take the complete text.