Image to Base64 Converter

How to convert an image to Base64

1. Drop an image on the box, paste one from the clipboard with Ctrl+V (Cmd+V on a Mac), or use the file picker. Screenshots can go straight from the clipboard; several files at once are fine.
2. Optionally shrink or convert it first: type a Max width in pixels, choose PNG, JPEG or WebP under Convert to, set Quality, or tick Strip metadata (EXIF).
3. Pick a format under Output as. This page starts on Data URI.
4. Press Copy output, or Save as .txt for long results.

The preview shows the file name, size, MIME type and pixel dimensions. Under the buttons you see the input size, the output size and the overhead in percent, so you know what you are about to paste.

Output formats and where they go

The Base64 data is the same in every format. Only the wrapper around it changes. Examples below use a 32×32 PNG named logo.png, shortened:

The <img> output includes width and height, which lets the browser reserve space before the image decodes. Some Markdown renderers, especially on hosted platforms, strip data: URLs from images, so check yours before relying on the Markdown output.

Resize and convert before you encode

Base64 adds a third to the size of whatever you feed it, so the best way to get a short string is a smaller image. A phone photo shown as a 300-pixel thumbnail does not need its original 4000 pixels. Setting Max width to 600, twice the display size for sharp high-DPI screens, saves far more than any encoding trick.

What the options do:

• Max width only scales down. Narrower images keep their dimensions, and the aspect ratio is always kept.
• Convert to JPEG fills transparent areas with white, because JPEG has no alpha channel. Use WebP if you need both transparency and small size.
• Quality applies to JPEG and WebP output whenever one of the other options triggers a re-encode. PNG is lossless and ignores it.
• Strip metadata (EXIF) removes camera data such as GPS coordinates, the device model and the capture time. It works by redrawing the image, so a JPEG is compressed again at the chosen quality.
• GIF, BMP and AVIF are written as PNG when re-encoded with Keep format, since browsers cannot produce those formats from a canvas. An animated GIF keeps only its first frame.
• Safari cannot encode WebP. If you choose WebP there, the tool tells you it produced PNG instead.
• SVG files are encoded as they are. They are text already, and rasterizing a vector would defeat its purpose.

A PNG that was already squeezed by an optimizer can come out larger after re-encoding. The preview shows the new size next to the original, so compare before you copy.

When to inline an image, and when not

A data URI saves one HTTP request and keeps everything in one file. That pays off for:

• icons, logos and small UI graphics of a few kilobytes,
• single-file HTML documents such as reports, offline docs or exported dashboards,
• tiny blurred placeholders shown while the real image loads,
• test fixtures and JSON payloads where a separate file is awkward.

It works against you for photos and anything large. The encoded copy is about 33% bigger, it cannot be cached apart from the HTML or CSS that contains it, and it is downloaded again on every page that embeds it. An image inside a stylesheet also delays the stylesheet, which delays rendering. loading="lazy" does not help either: the bytes are already in the document. More detail is in data URI performance, and the size calculator shows the encoded size before you commit.

Email is a special case. Gmail and several other webmail clients do not display data URI images at all, so newsletters normally use hosted images or CID attachments. See Base64 in email.

Images for APIs and AI vision models

JSON has no binary type, so APIs that take an image in the request body expect Base64. That includes many multimodal AI models that can describe, classify or read text from an image. The image goes in one of two ways:

• a full data URI in one string: data:image/jpeg;base64,/9j/4AAQ...
• bare Base64 in one field, with the media type (image/jpeg) in another.

Use Data URI for the first and Plain Base64 for the second. Sending the data: prefix to an API that expects bare Base64, or the reverse, is a frequent reason such a request is rejected. These services usually cap the request size and often scale big images down on their side anyway, so resizing before encoding keeps the request small at little cost.

Image formats you can embed

HEIC and TIFF encode fine, but a data URI of either shows a broken image in Chrome and Firefox. The HEIC and TIFF pages explain what to do instead. For more signatures, see common Base64 prefixes.

The same in code

In the browser, FileReader returns a data URI directly:

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

In Python, read the bytes and add the prefix yourself:

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

More variants, including streaming large files, are on Base64 in JavaScript and Base64 in Python.

When the image does not show up

• Broken image in HTML. Untick URL-safe for data URIs. Browsers decode data: URLs with the standard alphabet only, and a - or _ in place of + or / breaks the image.
• Works in HTML, fails in CSS. Wrap at 76 puts line breaks into the string. HTML attributes tolerate them, but a line break inside a CSS url("...") string makes the rule invalid. Keep wrapping off for anything except email bodies.
• Doubled prefix. A string that starts data:image/png;base64,data:image/png;base64, came from pasting a data URI into a template that adds its own prefix. Use Plain Base64 there.
• Wrong picture or no picture after decoding. Check the first characters against the table above. If the start does not match the format, the string was cut or mixed up. Base64 to Image shows what the bytes really are.

FAQ