Image to Base64 Converter: Data URI, HTML and CSS Snippets, No Upload
Choose an image and get its Base64 text, the full data URI, an HTML img tag and a CSS background-image line, each with a copy button.
Maintained by Hirantha Sandaruwan Lakshan. Updated 15 October 2026.
About this tool
You see the exact size before and after, and a plain verdict on whether inlining that image is a good idea. Paste Base64 or a data URI the other way round to preview the picture and download it. Nothing is uploaded.
How it works
Base64 writes bytes as text. It reads the file 3 bytes (24 bits) at a time and writes them as 4 characters, each standing for 6 bits, chosen from A to Z, a to z, 0 to 9, plus and slash (RFC 4648, section 4). If the last group is short, one or two equals signs pad it out to 4 characters. So the text is always 4 x ceil(n / 3) characters for n bytes: about one third bigger than the file. This tool shows the exact figure, not an estimate.
A data URI wraps that text so a browser treats it as a file: data:[type][;base64],data. For a PNG the start is data:image/png;base64, which is 22 characters. Paste the whole thing into an img src or a CSS url() and the browser needs no separate request for the image. MDN notes that browsers are not required to support any particular length, and that Chromium and Firefox limit data URLs to 512 MB and Safari to 2048 MB. This tool asks before converting a file over 5 MB and refuses over 25 MB, because the text becomes too large to select and copy comfortably.
Whether to inline is a trade. A tiny image saves a request, but the Base64 text is a third bigger, it is repeated inside every page or stylesheet that contains it, and the browser cannot cache or lazy-load it on its own. As a rule of thumb (ours, not a standard) the tool calls up to 4 KB small, up to 20 KB borderline, and anything bigger better kept as a normal file. Shrinking the picture first with the resize tool often changes the answer.
Decoding is strict but forgiving where it is safe. Spaces and line breaks inside the data are ignored, URL-safe Base64 (minus and underscore) is read as plus and slash, and missing equals-sign padding is added, each with a visible note. Anything else is reported with the exact character and its position. The first bytes are then compared with the signatures of PNG, JPEG, GIF, WebP, AVIF, BMP, SVG and ICO, and the real type wins if the prefix is wrong. Pasted text is never inserted into the page as HTML: the picture is shown by an img element whose source is built from an allow-listed image type and the cleaned Base64. MDN states that JavaScript is disabled when SVG is used as an image, so an SVG shown this way cannot run scripts.
Worked examples
A tiny PNG: 80 bytes become 108 characters
The 4 by 4 pixel PNG behind the Try an example button is 80 bytes. Base64 turns it into 108 characters (4 x 27 groups), which is 28 more than the file: +35.0%. The data URI adds the 22 character prefix data:image/png;base64, so it is 130 characters in all.
A 1,000,000 byte photo: 1,333,336 characters
The length is 4 x ceil(1,000,000 / 3) = 4 x 333,334 = 1,333,336 characters, an increase of 33.3%. Put it in a stylesheet and every visitor downloads that extra third, including on pages that never show the picture.
Using the result in CSS
Copy the CSS line, which starts background-image: url("data:image/png;base64, and paste it into a rule. The icon now travels with the stylesheet and needs no request of its own, which is the one real benefit of inlining a small image.
File size and the Base64 text it becomes
| File size (bytes) | Base64 characters | Increase | With the PNG data URI prefix |
|---|---|---|---|
| 3 | 4 | 33.33% | 26 |
| 30 | 40 | 33.33% | 62 |
| 300 | 400 | 33.33% | 422 |
| 1,024 | 1,368 | 33.59% | 1,390 |
| 10,240 | 13,656 | 33.36% | 13,678 |
| 102,400 | 136,536 | 33.34% | 136,558 |
| 1,048,576 | 1,398,104 | 33.33% | 1,398,126 |
Frequently asked questions
How much bigger is Base64 than the original image?
About one third. Every 3 bytes become 4 characters, so the text is 4 x ceil(bytes / 3) characters long. A 1,024 byte file becomes 1,368 characters (+33.6%) and a 1,048,576 byte file becomes 1,398,104. The data URI prefix, 22 characters for a PNG, comes on top.
When is it a good idea to inline an image as a data URI?
When the image is tiny and used on every page that loads the file it sits in: a small icon, a one-colour spacer, or a very low-quality blurred placeholder. You save one request and the extra third is only a few hundred bytes. The tool calls files up to 4 KB small. That cut-off is our rule of thumb, so test your own page.
When is inlining a bad idea?
For anything large. The Base64 text makes your HTML or CSS a third bigger than the image, it is downloaded again with every page that includes it, and the browser cannot cache it or lazy-load it separately. Photos and big graphics are almost always better as normal image files. Above 20 KB the tool recommends a separate file.
Is it safe to paste Base64 that someone else sent me?
For looking at it, yes. The text is only decoded, never inserted into the page as HTML, and the picture is drawn by an img element, which MDN says runs no JavaScript even for SVG. Be careful with the download instead: an SVG file you save and then open directly in a browser tab can run scripts it contains, so only open one from a source you trust.
Why does it say invalid Base64 character?
Base64 text uses only A to Z, a to z, 0 to 9, plus, slash and equals signs. The message names the first other character and its position in what you pasted, for example a stray quote mark or a smart quote copied from a web page. Spaces and line breaks are fine and are ignored.
Does Base64 compress or encrypt my image?
Neither. It is only a way to write bytes as text, so anyone can turn it back into the picture, and it makes the data bigger, not smaller. If the file needs to be smaller, shrink or compress the image first, then convert it.
Is there a limit on the file size?
The tool asks before it converts a file over 5 MB and refuses over 25 MB, because the text gets too large to show and copy in a web page. Browsers have their own ceilings for data URLs: MDN lists 512 MB for Chromium and Firefox and 2048 MB for Safari, and says browsers are not required to support any particular length.
Can I convert a HEIC photo from an iPhone?
HEIC files are not accepted by the file chooser, because most browsers cannot show HEIC inside a page, so a data URI of one would not work where you need it. Convert the photo to JPG with the HEIC to JPG tool on this site first, then drop the JPG here.
Is my image uploaded anywhere?
No. The file is read and encoded inside this browser tab with no network request, and the same is true when you paste Base64 to decode it.
Sources & references
Updated Oct 15, 2026