ToolHub

Image to Base64

Encode images to Base64 data URIs and decode back

Add an image to get the Base64 string.

Base64 encoding makes a file ~33% larger but lets you embed images directly in HTML, CSS, or JSON with no separate request. Best for tiny icons; large images are better as normal files. Everything runs in your browser.

Overview

What this tool does

Encode an image into a Base64 data URI you can paste directly into HTML, CSS, or JSON, and decode Base64 back into a downloadable image. It gives you ready-to-use CSS and HTML snippets, shows the size overhead, and runs entirely in your browser so the file is never uploaded.

The basics

What is a Base64 data URI?

Base64 is a way to represent binary data (like an image) using only printable text characters. A data URI wraps that encoded data with a small header so a browser knows what it is:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

The image/png part is the MIME type, and everything after the comma is the Base64-encoded file. Drop this string into an <img src="..."> or a CSS url(...) and the image renders with no separate file request.

The right tool for the job

When to use Base64 images

Good uses

  • Tiny icons and logos embedded in CSS to avoid an extra request
  • Single-pixel or simple background images
  • Embedding an image inside JSON for an API response
  • Self-contained HTML emails or single-file documents
  • Inlining an SVG or small asset in a code snippet

Poor uses

  • Large photos — the 33% size increase hurts and the page can't cache the image separately
  • Images reused across many pages — a normal file gets cached once and reused
  • Anything where total page weight matters more than request count

Why Base64 is bigger

The size overhead

Expect about +33%

Base64 represents every 3 bytes of binary as 4 text characters, so the encoded string is roughly one-third larger than the original file. A 9 KB icon becomes about 12 KB of Base64. That's fine for small assets but adds up fast for large images — which is why Base64 is best reserved for small files.

Behind the scenes

Privacy and how it runs

Your file never uploads

The image is read and encoded locally with the browser's FileReader API. Nothing is sent to a server, which matters for private logos, screenshots, and unreleased designs.

Common questions

How do I convert an image to Base64?

Drag your image into the upload area (or click to choose). The Base64 data URI appears instantly, along with copy-ready CSS and HTML snippets. The image is encoded in your browser, not uploaded.

How do I use a Base64 image in CSS?

Use it as a background: background-image: url("data:image/png;base64,...");. Our CSS snippet tab gives you this line ready to paste.

How do I decode Base64 back to an image?

Switch to Base64 to Image mode and paste the string (with or without the data: prefix). You'll see a preview and a download button to save it as a file.

Which formats are supported?

Any image your browser can read: PNG, JPG, GIF, WebP, and SVG. The data URI preserves the original MIME type so it renders correctly when embedded.

Does Base64 reduce image quality?

No. Base64 is a lossless text representation of the exact same bytes — the image quality is identical. It only changes how the data is stored (text instead of binary), not the pixels.

Related tools

Base64 Encoder/Decoder

Encode and decode Base64 text

SVG to PNG

Rasterize SVG to PNG at any scale, transparent or color background

Image Compressor

Reduce image file size without losing quality

Favicon Generator

Turn any image into a complete favicon set

Quick steps

1

Pick a direction

Image to Base64 to encode a file, or Base64 to Image to decode and preview a string.

2

Add your input

Drag an image in (or click to choose), or paste a Base64 string / data URI. Files are encoded locally and never uploaded.

3

Copy the snippet you need

Get the raw data URI, a CSS background-image rule, an HTML img tag, or just the Base64 — whichever fits your code.

Frequently asked questions

What is a Base64 data URI?

A way to embed a file's binary data directly inside text using the Base64 alphabet. For images it looks like 'data:image/png;base64,iVBORw0...'. You can drop it straight into an HTML img src or CSS url() without a separate image file.

When should I use Base64 images?

Best for very small images — icons, tiny logos, single-pixel backgrounds — where avoiding an extra network request matters. It's also handy for embedding images in JSON, emails, or self-contained HTML files. For normal-sized images, a regular file is better.

Why is the Base64 bigger than my image?

Base64 encoding inflates size by about 33% because it represents 3 bytes of binary as 4 text characters. A 9 KB image becomes roughly 12 KB of Base64. That overhead is why Base64 only makes sense for small assets.

Does the image get uploaded to a server?

No. The file is read and encoded entirely in your browser using the FileReader API. Nothing is sent anywhere, which matters for private logos, screenshots, and work-in-progress designs.

Can I decode a Base64 string back to an image?

Yes. Switch to Base64 to Image mode, paste the Base64 (with or without the data: prefix), and you'll see a preview plus a download button to save it as a file.

Which image formats are supported?

Any image your browser can read: PNG, JPG, GIF, WebP, and SVG. The data URI keeps the original format's MIME type so it renders correctly when embedded.