Skip to main content
ToolsBay

Runs in your browser — nothing is uploaded · verify

Image to Base64 — free, and nothing is uploaded

Encode an image as a Base64 data URI you can paste into CSS or HTML.

  • Take the complete data URI, or just the raw Base64, depending on what you are pasting into.
  • Removes a network request for small icons, sprites and inline logos.
  • The correct MIME type is filled in for you, which is where most hand-written data URIs go wrong.

Drop an image here

or click to browse · PNG, JPG, SVG, WebP, GIF · up to 5 MB

Base64 data URI

1 line

  • 70 tools

    Free, with no account and no watermark

  • 0 bytes

    Of your files or text uploaded — this tool runs in the tab

  • No queue

    The work happens in this tab, not in a line behind other users

Three steps, nothing to install

Image to Base64 in three steps

  1. IMAGEDrag it in, or click to browse

    Choose an image

    Drop in a PNG, JPG, WebP, SVG or GIF. It is read into the page and never sent anywhere.

  2. IMAGEBASE64Converted on your own device

    Encode it

    The bytes are Base64-encoded and prefixed with the right data URI header for the file’s actual type.

  3. Copy BASE64

    Copy it where you need it

    Take the whole data URI, or just the raw Base64, and paste it into your stylesheet, template or payload.

Why use Image to Base64

  • The right prefix, automatically

    A data URI with the wrong MIME type fails silently in some browsers and renders in others. The type is read from the file rather than guessed from its extension.

  • Size shown before you paste

    Base64 adds about a third to the byte count. The encoded size is displayed so you can tell whether inlining is actually a win.

  • The file never leaves the tab

    There is no upload because there is nowhere to upload to. The site is static files, and the work runs as code on your own machine.

Frequently asked questions

For small, decorative assets — an icon, a 1px gradient, a logo under about 4 KB — where saving the extra HTTP request is worth the cost. Above that the encoded copy is larger than the file, cannot be cached separately, and blocks the stylesheet or document it sits in.

What a data URI actually is

A data URI carries the file itself in place of an address. The data:image/png;base64, prefix names the media type and the encoding, and everything after the comma is the file's bytes written in Base64 — an alphabet of 64 characters that survives being pasted into a stylesheet, a JSON payload or an HTML attribute without being mangled.

That last point is the whole reason the encoding exists. Raw image bytes include values that terminate strings, break out of quotes, or get rewritten by anything that assumes text. Base64 trades about a third more size for the guarantee that the data passes through text-only channels unchanged.

Using the output

In CSS, put it straight in a url(). In HTML, it is the src of an <img>. In JSON it is just a string. To go the other way, or to encode text rather than a file, use the Base64 encoder and decoder. If the image is larger than you expected, compress it first — the encoding multiplies whatever you start with.

Often used alongside

  • Base64 Encoder & Decoder

    Encode text to Base64 or decode it back, with full Unicode support.

  • CSS Minifier

    Strip comments and whitespace to shrink a stylesheet.

  • Compress Image

    Shrink JPG, PNG and WebP files with quality and size controls.

  • JPG to PNG

    Convert JPG photos to the lossless PNG format.

  • PNG to JPG

    Convert PNG images to smaller JPG files with adjustable quality.

  • WebP to PNG

    Convert modern WebP images into widely-supported PNG files.

Related guides

More tools

70 tools, none of which want your file

Everything this tool does happens in the page you are looking at. No account, no upload, no watermark.

Browse all toolsRead the guides