Image to Base64
Convert an image to base64 and get three copyable outputs: the full data URI, an HTML img tag and a CSS background-image rule, with the original size, encoded size and dimensions.
Encode an image as text.
How to use Image to Base64
- Drop or select a PNG, JPG, SVG, or WebP file
- Grab the generated data URI, img tag, or CSS snippet
- Click copy to paste it into your code
About Image to Base64
Image to Base64 turns any image into a Base64 data URI string right in your browser. Drop or pick a PNG, JPG, GIF, SVG, or WebP file and the converter instantly returns the full data URI, a ready-to-paste HTML img tag, and a CSS background-image rule, each with its own one-click copy button, plus a readout of the original size, the encoded length, and the roughly 33% overhead so you can see exactly how much bigger the string becomes.
Because it reads the file with the browser's built-in FileReader — the same readAsDataURL call you would write to convert an image to base64 in JavaScript — you get precisely the string your own code would produce, with the file's real MIME type baked in (an SVG comes out as data:image/svg+xml;base64,…). This tool encodes only. If you already have a base64 string and want to go the other way, base64 to image, paste the whole data:image/… URI into your browser's address bar and the picture renders — no separate decoder needed for a quick check.
It is completely free with no sign-up, no watermarks, and no upload limits, and it works entirely online without installing anything. Every step happens on your device, so an unreleased logo, an icon, or a screenshot with private data is read locally and never sent to a server — only the text you choose to copy ever leaves the page.
Frequently asked questions
- Which image types can I encode?
- Anything your browser reports as an image — PNG, JPG, GIF, SVG, WebP, BMP and so on. The file's own MIME type goes straight into the data URI, so an SVG comes out as data:image/svg+xml;base64,… and the format never changes.
- Can I encode an image to base64 online for free?
- Yes. This is a free online encoder with no account and nothing to install — open the page, drop in your image, and copy the result. There are no file-size or usage limits, so you can convert as many images to base64 as you need.
- How do I convert an image to base64 in JavaScript?
- In code you read the file with a FileReader and call reader.readAsDataURL(file), which returns a data:image/…;base64,… string in the reader's onload event. This tool runs exactly that under the hood, so it is a fast way to preview the string your own JavaScript will generate before you wire it up.
- How do I convert base64 back to an image?
- This tool only encodes, it does not decode. To turn a base64 string back into a picture, copy the complete data:image/…;base64,… URI and paste it into your browser's address bar — the image renders immediately, which is enough to verify a data URI. To save it as a file you would need a dedicated base64-to-image decoder.
- Does it resize or re-compress my image?
- No. The file is read byte for byte with the browser's FileReader, so pixels, format and metadata are untouched. A 2 MB JPG becomes roughly a 2.7 MB text string — compress or resize it first if you need something smaller.
- Why is the Base64 version about a third larger?
- Base64 represents every 3 bytes of binary data as 4 text characters, a fixed increase of about 33%. The stat row shows the original file size, the length of the finished data URI, and the exact overhead for your file.
- When is a data URI a bad idea?
- Data URIs suit small assets: icons, logos, tiny textures, an inline signature image. Large ones bloat the HTML or CSS that carries them, cannot be cached separately by the browser, and hold up everything else in that file, so normal images are better left as normal files.
- What is the difference between the three outputs?
- The data URI is the raw base64 string, usable anywhere a URL is expected. The second box wraps it in a ready HTML img tag and the third wraps it in a CSS background-image rule, each with its own copy button, so you can paste directly into markup or a stylesheet.
- Why are the dimensions missing for my file?
- Width and height are read by decoding the image after encoding, which is best-effort. An SVG with no intrinsic width or height, or a format your browser cannot decode, simply shows no dimensions — the data URI itself is still correct.
- Is it safe to encode an unreleased or private image?
- The file is read locally by FileReader and no network request is made with it, so an unreleased logo or a screenshot containing private data stays on your machine. Only what you copy out leaves the page.