How do I convert an image to Base64?

Drop the image onto the converter on this page. It reads the file locally with the FileReader API and outputs a data URI of the form data:image/png;base64,iVBORw0KGgo... You can paste that directly into an attribute or a CSS background-image url().

Is it safe to convert images to Base64 online?

On base64.dev, yes — the conversion runs entirely in your browser with JavaScript. The image is never uploaded to any server, so even private or sensitive images stay on your machine.

Should I inline images as Base64 data URIs?

Base64 data URIs avoid an extra HTTP request, which helps for tiny images like icons or 1x1 trackers. But Base64 is about 33% larger than the binary file and cannot be cached separately, so for large or reused images a normal is usually faster.

What image formats can be converted to Base64?

Any format your browser can read: PNG, JPEG/JPG, GIF, SVG, WebP, AVIF, BMP, and ICO. The data URI's MIME type is taken from the file, e.g. data:image/webp;base64,... for a WebP image.

Image to Base64 Converter

Drop an image and get a Base64 data URI you can paste straight into HTML or CSS. Everything runs in your browser — the file is never uploaded.

How to convert an image to Base64

Drag any image onto the drop zone above (or click to browse). The tool reads it locally with the browser's FileReader API and produces a data URI — a string of the form data:image/png;base64,iVBORw0KGgo… that embeds the whole image inline. Click Copy, then paste it where you need it. Use the Raw Base64 toggle if you want only the encoded payload without the data: prefix.

Using the data URI in HTML and CSS

In HTML, drop it into an <img> src:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="logo">

In CSS, use it as a background-image:

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

When should you inline an image as Base64?

Inlining removes one HTTP request, which is a real win for tiny, critical assets — icons, a small logo in the header, an inline SVG, or a placeholder. The tradeoffs:

Size: Base64 is ~33% larger than the original binary. A 12 KB PNG becomes ~16 KB of text.
Caching: An inlined image can't be cached on its own — it's re-downloaded with the HTML/CSS every time it changes.
Rule of thumb: inline assets under a few KB; keep larger or reused images as normal files served with proper cache headers.

Tip: for SVGs, plain URL-encoding is often smaller than Base64. But Base64 is the universally safe choice when an asset contains characters that break inline markup.

Is this converter private?

Yes. The conversion happens entirely client-side in JavaScript. Your image is read into memory in the browser and encoded locally — it is never sent to a server. You can confirm this by opening DevTools → Network: adding an image fires no upload request.

Frequently asked questions

What image formats are supported?

Any format the browser can read — PNG, JPEG, GIF, SVG, WebP, AVIF, BMP, and ICO. The data URI's MIME type comes from the file itself.

How do I go the other way (Base64 back to an image)?

Use the Base64 to Image tool to decode a data URI or raw Base64 back into a viewable, downloadable image.

Need text, files, or URL-safe Base64?

The main base64.dev tool handles text, files, and URL-safe mode with auto-detect.

Open base64.dev →