Image to Base64

Drop a File, Copy the String

You need an image as text, and you need it now. The API wants a string, or the CSS file wants an inline icon, and the file on your desk is stubbornly binary. Most converters make you upload first and wait. This image to Base64 tool does the work in your browser instead.

Drag a file in and four ready-to-paste outputs appear straight away. No account, no queue, no file leaving your machine.

We built it for our own work first, which is why it shows the size penalty next to the output. That number changes decisions, and most tools hide it.

How to Convert an Image to Base64 in Four Clicks

1. Add your file. Drag it onto the box or click to browse. PNG, JPG, GIF, SVG, WebP, and BMP all work.
2. Read the file panel. Original size, encoded length, and the exact percentage the file grew.
3. Pick your output. Data URL, raw string, a CSS rule, or a finished HTML tag.
4. Copy it. One click per format.

There is no Convert button, which surprises people. Encoding is instant, so waiting for a click would only add a step.

The honest limit: very large files will hang the tab for a moment while your browser allocates memory. Anything past about 20 MB is worth compressing first with our image compressor.

Image to Data URL, Raw String, CSS or HTML — Which Output Do You Need?

All four hold the same bytes. They differ only in the wrapping, and picking wrong is the most common mistake we see.

• Data URL. Includes the data:image/png;base64, header. Use it anywhere a browser expects a source.
• Raw Base64. The payload only. Use it for APIs and database columns that add their own header.
• CSS background-image. A finished declaration. Paste it inside a rule.
• HTML img tag. Complete markup with an alt attribute waiting for your text.

A caveat on that last one: we leave the alt attribute generic on purpose. Shipping alt="image" to production is worse for accessibility than leaving it empty, so write something real before you commit it.

Encoding by File Type

The mechanics never change, but the sensible choice does. Each format has a page of its own:

PNG to Base64 for logos and transparency

PNG is lossless and keeps its alpha channel, so a logo stays cut out rather than sitting on a white block. That makes it the right pick for icons, screenshots, and UI assets.

The cost is size. A photograph saved as PNG can be many times larger than the same photo as JPEG.

JPG to Base64 when the source is a photograph

For continuous-tone images, JPEG wins on size by a wide margin — often five to twenty times smaller than PNG. A shorter file means a shorter string.

The trade-off is transparency, which JPEG simply does not support. Encode a cut-out logo as JPEG and you will get a white rectangle behind it.

SVG and WebP each have a catch

SVG is already plain text, so Base64 pads it for nothing. Percent-encoding is usually shorter, and our SVG page shows both so you can compare on your own file.

WebP compresses beautifully but is not universally safe in email clients, which lag years behind browsers. Check your audience before inlining one.

Image to Base64 and the 33% Size Penalty

Encoding always makes a file bigger. Three bytes become four characters, so the output runs about a third larger than the input. Our file panel shows the exact figure for your file.

That penalty is why inlining is a small-asset technique. A 2 KB icon costs you 700 extra bytes and saves a whole network request — a clear win. A 400 KB hero photo costs 130 KB and blocks rendering.

Gzip claws back less than people hope. Image data is already compressed, so there is little left to squeeze. We go through the full trade-off in our guide on when Base64 images are worth it.

Going the Other Direction

Decoding used to live on this page. We moved it, because encoding and decoding are genuinely different jobs and cramming both into one screen helped nobody.

Head to the Base64 to image decoder to paste a string and get a file back. It detects the format automatically, even when the data: header is missing.

For text and non-image files — PDFs, fonts, ZIP archives — use the Base64 encoder and decoder instead.

Does Anything Leave Your Browser?

No. The conversion runs on the FileReader API, which is built into your browser. Your file is read from disk into memory and never sent anywhere.

Check it yourself if you like. Open dev tools, watch the Network tab, and encode something. Nothing goes out.

The nuance worth naming: privacy here is about transmission, not about the string itself. Base64 is trivially reversible, so anyone who sees your output can recover the image. Never treat it as a way to hide anything.

Frequently Asked Questions

The Short Version

Drop a file, copy a string, paste it where you need it. Converting an image to Base64 should take seconds, and here it does.

Just keep the size penalty in view. Inline the small things, host the big ones, and check the percentage in the file panel before you decide which is which.