Image to Base64

Turn a picture into a data URI, an img tag or a CSS background rule — encoded in this tab and handed back as a file to open.

Runs on your deviceImagesWorkingNo account needed

What this tool does

Image to Base64 reads the bytes of your picture, re-expresses them in the 64 printable characters Base64 allows, and puts the correct MIME type in front of the result. That type comes from what the browser reports about the file; when the browser says nothing, the signature in the first few bytes decides between JPEG, PNG, WebP, GIF, AVIF and BMP, then the extension is consulted, and .svg is trusted last of all, because SVG is text and carries no signature to read. Those six plus SVG are the whole fallback list, so a HEIC or TIFF the browser declines to type is refused rather than guessed at.

The same encoded string is offered in five shapes, because where it is going decides the wrapper it needs. A data: URL is the plain value; Base64 on its own drops the prefix, with optional wrapping at 76 characters; and the img tag, the CSS background rule and the Markdown syntax each paste straight into that kind of document. The CSS rule takes its class name from the source file, with punctuation folded to hyphens, and sets background-size to cover.

Base64 costs about a third more than the original — four characters for every three bytes — so a 30 KB icon arrives as roughly 40 KB of text. Read the percentage in the summary carefully: it weighs the encoded characters against the original bytes and stops there, so the data: prefix, the img tag or the CSS rule around them is counted in the byte figures beside it but not in the percentage itself. Past 20 KB the summary adds a warning, because bytes carried inside a document cannot be cached on their own and are re-sent with every copy of the HTML or CSS holding them.

The work happens in this browser tab, so the image is not uploaded and nothing about it is stored. Three ceilings shape what comes out. The text is never printed on screen: the result panel gives a summary, a few figures and a download, so the data: URL is read by opening the saved file rather than copied from a box. Nothing is resized or recompressed, so a 2 MB photograph becomes about 2.7 MB of text. And when several images go in together, each becomes its own download, with a ZIP of the set, while the single summary line above them describes the last file only.

How to use it

  1. Choose an image. Anything the browser types as an image is taken; PNG, JPG, WebP, GIF, AVIF, BMP and SVG are also recognised on their own. A file that is not an image is refused rather than encoded blindly.
  2. Pick what you want back. A data: URL, Base64 with no prefix, an img tag, a CSS background rule or Markdown image syntax. The remaining settings change to match that choice.
  3. Set the details that apply. Alt text for the img tag, which is HTML-escaped so quotes and angle brackets in your description cannot break the markup — or wrapping at 76 characters for raw Base64.
  4. Save the file, then open it. The encoded text does not appear on the page. It arrives as a download named after the source image, with a .txt, .html, .css or .md extension to match the output you picked.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Inlining a small icon in CSS

A 2 KB logo carried inside a background-image rule is one request fewer on first paint. The CSS output writes the whole rule, class name included.

Putting an inline image in an HTML email

Base64 wrapped at 76 characters is the line length MIME bodies expect, which keeps the value intact where one very long line would be mangled.

Making a page that carries its own pictures

A bug report or a single-file demo that embeds its screenshots survives being emailed, copied or opened from disk with no assets folder beside it.

Dropping a fixture into a test

A data URI drops into a unit test, a component story or a JSON payload, where a file path would need a server or a build step behind it.

Questions

Is my image uploaded anywhere?
No. The file is read and encoded inside this browser tab, and no request carries it or anything about it away. The page itself is still fetched over the network — there is no offline cache — but once it has loaded, encoding needs nothing further. The practical ceiling is your device's memory rather than an upload limit.
Where does the encoded text appear?
In the file you download, not on the page. The result panel reports the MIME type, the two sizes, the overhead and the character count, then offers the encoded text as a file to open in an editor. There is no preview box and no copy button on this tool.
How much bigger is the encoded version?
Roughly a third: four characters for every three bytes, plus padding. The percentage shown covers that alone, so a wrapped output such as a CSS rule or an img tag can grow more in bytes than the percentage implies, because the wrapper text is not part of the measurement.
When should I not inline an image?
Once it is much past 20 KB, which is where the summary starts warning you. The bytes then travel inside your HTML or CSS, so they are re-downloaded with every page that carries them and cannot be cached separately or fetched in parallel. A linked file wins from there on.
Does it compress or resize the picture first?
No. The bytes are encoded exactly as they arrive. Send the image through Image Compressor or Resize Image first if you want the data URI to be small.
Why does my Markdown carry the file name as its alt text?
Because the Alt text box is only shown for the img tag output, and Markdown falls back to the file's own name. A value typed while the img tag was selected does survive a switch to Markdown, but it is inserted there unescaped, so square brackets in it will break the link.
Can I encode a PDF or a font this way?
Not here. Anything not recognised as an image is refused with a message saying so. Base64 Encoder and Decoder converts arbitrary text you paste in, though it takes no file upload of its own.
What happens if I select several images at once?
Each one is encoded in turn and offered as its own download, with a button to take the whole set as a ZIP. The summary line describes the last file, so read the individual sizes from the file rows themselves.

Related tools