Is my image uploaded to a server?

All Base64 encoding runs in your browser using the FileReader API. Our servers are not involved at any point.

What output formats are available?

Three formats are offered: a full data URI starting with data:image, the raw Base64 payload alone, and a ready-to-paste CSS background snippet.

Which image formats are accepted?

JPEG, PNG, WebP, GIF, SVG, and AVIF are all supported. Any image format the browser can read can be encoded.

How much larger is a Base64 image compared to the file?

About 33 percent larger because Base64 uses 4 ASCII characters per 3 binary bytes. The size badge under the output shows the exact numbers.

When should I avoid inlining images as Base64?

For images over about 2 MB it is usually faster to keep them as separate assets so the browser can cache them and parallelise downloads.

Image to Base64

Image to Base64 is a browser-based encoder that turns any image into a Base64 string. Pick a data URI for HTML and CSS, raw Base64 for binary-safe transport, or a CSS background snippet. All encoding runs in your browser using FileReader.

Drop an image or click to choose

JPEG, PNG, WebP, GIF, SVG, AVIF, up to 50 MB. Stays in your browser.

OUTPUT FORMAT

Runs entirely in your browser

Dedicated pages

Direct links for specific encoding tasks.

Convert Image to Base64

Convert any image to a Base64 data URI in your browser. Paste directly into HTML…

PNG to Base64

Encode any PNG image to Base64 in your browser. Get a ready-to-paste data URI, r…

Image to Data URI

Convert any image to a data URI in your browser. Output starts with data:image a…

How to convert an image to Base64

Drop an image on the upload area or click to choose a file.
Pick an output format: full data URI, raw Base64, or CSS background.
Click Copy to put the encoded string on your clipboard.
Paste into an HTML img src, a CSS background, a JSON field, or Markdown.

Common uses

Inlining a small icon or logo in an HTML email so it renders without an external request
Embedding a placeholder image directly in a CSS file or design token using a background url()
Including image bytes in a JSON payload for an API client, before sharing as a single document
Building a standalone HTML report that bundles all assets inline, then compress images first to keep the document small

Technical specification

Algorithm or formula: FileReader.readAsDataURL produces a complete data:{mime};base64,... URI in one step. Raw-Base64 output strips the URI prefix; CSS background snippet wraps the URI in background-image: url(...).
Browser API or library: FileReader API. No external library.
Input limits: Files up to 50 MB. The size badge warns that Base64 inflates payloads by roughly 33 percent.
Output: Three formats selectable: full data URI, raw Base64 payload, or CSS background snippet. Copyable to clipboard.
Known limitations: No automatic chunking for MIME line-length limits. Large images encoded inline can slow down page parsing in the consuming HTML or CSS file.

Frequently asked questions

Is my image uploaded to a server?: All Base64 encoding runs in your browser using the FileReader API. Our servers are not involved at any point.
What output formats are available?: Three formats are offered: a full data URI starting with data:image, the raw Base64 payload alone, and a ready-to-paste CSS background snippet.
Which image formats are accepted?: JPEG, PNG, WebP, GIF, SVG, and AVIF are all supported. Any image format the browser can read can be encoded.
How much larger is a Base64 image compared to the file?: About 33 percent larger because Base64 uses 4 ASCII characters per 3 binary bytes. The size badge under the output shows the exact numbers.
When should I avoid inlining images as Base64?: For images over about 2 MB it is usually faster to keep them as separate assets so the browser can cache them and parallelise downloads.

Reviewed and tested May 25, 2026.