A data URI embeds a file's contents directly inside a URL, like data:image/png;base64,AAAA.... Browsers decode it inline, so the image needs no separate network request.

When should I inline an image as base64?

Inlining suits very small, frequently used assets such as icons or 1x1 spacers, where avoiding an extra HTTP request outweighs the size cost. For larger images, a normal file reference is usually faster and more cacheable.

Why is the base64 bigger than the original file?

Base64 encodes 3 bytes as 4 ASCII characters, so the data URI is roughly 33% larger than the source image. The tool shows the exact overhead for your file.

Is my image uploaded?

No. The image is read entirely in your browser with FileReader. It is never sent to any server, which makes the tool safe for private or unreleased assets.

Can I embed SVGs this way?

Yes. SVG files encode to base64 just like raster images, though for SVGs a URL-encoded (non-base64) data URI is often smaller. This tool outputs the base64 form, which works everywhere.

What is the Image to Base64 Encoder?

Free image to base64 encoder. Convert PNG, JPEG, GIF, SVG, or WebP images into a data URI you can embed inline in CSS, HTML, or JSON, with a live preview and size-overhead estimate. All local; nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

Image to Base64 Encoder

Name: Image to Base64 Encoder
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

A base64 data URI lets you embed an image directly inside your HTML, CSS, or a JSON payload, so the browser renders it without a separate file download. This free encoder converts an image to that inline form in your browser and shows the size overhead so you can decide whether inlining is worthwhile.

How it works

The tool reads your selected image with FileReader.readAsDataURL, which returns a string of the form data:image/png;base64,<payload>. The data: scheme tells the browser the bytes follow inline; the MIME type identifies the format; and ;base64 marks the payload encoding. Because base64 maps every 3 bytes to 4 ASCII characters, the resulting string is approximately 33% larger than the original file — the tool computes and displays this exact overhead.

The three output formats

Raw data URI — the full data:image/...;base64,... string. Paste it anywhere a URL is accepted, including CSS url(), HTML src, Markdown image syntax, or REST API JSON payloads.

CSS rule — wraps the data URI in a background-image declaration ready to paste into a stylesheet:

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

HTML img tag — wraps the data URI in a complete <img> element with the filename as alt text. Edit the alt text to something descriptive before shipping, since alt="logo.png" is not meaningful to screen reader users.

When inlining makes sense — and when it does not

Inlining a base64 image is a genuine trade-off:

Good candidates:

Small icons and glyphs (under about 2 KB) used on every page — the single-request saving outweighs the encoding overhead
Images embedded in emailed HTML, where external URLs may be blocked by mail clients
Images in JSON API responses where a URL would require a second request
SVG logos inlined in a CSS theme where separate file management is inconvenient

Poor candidates:

Photographs and large images — the 33% size overhead is significant, and inline content cannot be cached by the browser between page loads
Images reused across many pages — a standalone file allows the browser to cache it once; a data URI is re-downloaded every time the HTML document loads
Images you need to swap independently of the page — deploying a new image URL is simpler than editing the document

Practical note

If you are inlining an SVG, a URL-encoded data URI (replacing special characters with percent-encoding) is often slightly smaller than base64 for SVGs specifically, because SVG is text and base64 expands it. This tool outputs base64, which works universally across all image types and all environments.

All encoding runs in your browser using the FileReader API. Your images are never sent to any server — the entire conversion from binary file to base64 string happens client-side. This makes the tool safe for encoding private, unreleased, or proprietary assets without risk of exposing them.