Image to Base64 Converter
Convert an image into a Base64 data URL you can paste directly into HTML or CSS. Runs entirely in your browser.
Click to upload or drag and drop
Select an image file
How it works
Your browser reads the file with its built-in FileReader and returns a data URL: the text "data:", the image type (for example image/png), ";base64," and then the file's bytes written as text. Base64 turns every 3 bytes into 4 characters, which is why the output is about a third longer than the file. Nothing is resized, recompressed or edited, so decoding the string gives back exactly the file you chose.
Common uses
- Embedding a small image directly in HTML or CSS without a separate file request
- Passing image data through systems that only accept text
- Pasting an icon into a single-file HTML page or a stylesheet
In HTML, paste the whole string as the src of an img tag. In CSS, put it inside url() for a background-image. If you only need the encoded part, delete everything up to and including the comma.
Limits and good practice
Inlining pays off for tiny assets such as small icons. A large photo turns your HTML or CSS into a huge file that cannot be cached separately from the page and is slow to parse, so a normal image file is usually better. The tool takes one image at a time, up to 50 MB, and the file is read on your device and never uploaded.
Guide
- Base64 Explained: Why It's 33% Larger — How Base64 works, why it adds about a third to the size, why it isn't encryption, and how Base64URL differs.
Frequently asked questions
Does Base64 make the file smaller?
No — Base64 encoding actually makes data about 33% larger than the original binary file. It's used for embedding convenience, not compression.
Can I use a Base64 image in an email?
Often not reliably. Many email clients, Gmail among them, don't display images embedded as data URLs, so attach the image or link to a hosted copy instead.