Skip to content

Image to Base64 Converter

Drop an image and get back a ready-to-use Base64 data URI — the kind you can inline directly into a CSS `background-image`, an `<img src>`, or a JSON payload. The image never leaves your browser.

  • Drag-and-drop or file picker
  • Ready-to-use data URI and raw Base64
  • Shows the exact size increase from encoding
  • Live image preview
  • The image never uploads anywhere

Converter

Encoded locally, the image never uploads

How to convert an image to Base64

  1. 01

    Drop or select an image

    Drag an image file onto the drop zone, or use the file picker.

  2. 02

    Check the preview and size

    A preview confirms the right file loaded, alongside the original size and the encoded size.

  3. 03

    Copy the data URI or raw Base64

    Copy the full `data:image/...;base64,...` string for CSS/HTML, or just the raw Base64 for an API payload.

What a data URI actually is#

A data URI embeds a file's content directly inside a string, instead of pointing to it with a URL — data:image/png;base64,iVBORw0KG... is a complete, self-contained image with no separate HTTP request needed to load it. It works anywhere a normal image URL works: a CSS background-image, an <img src> attribute, or an background in an email template that cannot rely on external image loading.

The real trade-off: fewer requests, more bytes#

Base64 encoding turns every 3 bytes of binary data into 4 characters of text — about 33% larger than the original file, before any HTML/CSS surrounding it. Inlining a small icon or a tiny sprite eliminates a separate network request, which can be a net win; inlining a large photo just bloats the HTML or CSS file it lives in and defeats the browser's own image caching. This tool shows both sizes side by side so that trade-off is visible before deciding whether to inline something.

Why the image never leaves your browser#

The conversion uses the FileReader API built into every browser, which reads the file from disk and encodes it locally — there is no upload step, so this works for private or unpublished images without exposing them anywhere. That also makes it fast: nothing waits on a network round trip.

Frequently asked questions

Is the image uploaded to a server?

No. The file is read and encoded entirely in your browser using the FileReader API — it never leaves your device.

Why is the Base64 output bigger than the original file?

Base64 encoding turns every 3 bytes into 4 characters of text, about a 33% size increase. This tool shows the exact original and encoded sizes so you can judge whether inlining is worth it.

What is a data URI used for?

Embedding an image directly inside CSS, HTML or JSON without a separate file request — common for small icons, email templates, or single-file component libraries.

Is there a file size limit?

No hard limit is enforced, but very large images produce very large Base64 strings and are rarely a good fit for inlining — the size comparison shown makes that obvious quickly.

Related tools

Developers

UUID Generator

Generate cryptographically random UUID v4 or time-ordered UUID v7, in bulk.

Developers

Base64 Encoder & Decoder

Encode and decode Base64 with correct UTF-8 handling, including the URL-safe alphabet.

Developers

ULID Generator

Generate ULIDs — sortable by creation time like UUID v7, but Crockford Base32 instead of hex.