Is there a size limit?

10 MB. Larger images make data URLs that are impractical to use.

Which formats are recognised?

PNG, JPEG, GIF, WebP, AVIF, BMP, ICO and SVG.

Why does my Base64 not show as an image?

The bytes do not start with a known image signature. It may be a different file type or not Base64 at all.

Is the image uploaded?

No. It is read with FileReader and shown from memory.

Image to Base64 and back

Turn an image into a Base64 data URL, or preview a Base64 string as an image.

Runs in your browser. Your input is not uploaded.

Drop an image here, or choose a file. Up to 10 MB.

What it does

A data URL embeds a file directly in HTML or CSS: data:image/png;base64, followed by the Base64 of the file. It saves a request for small icons but makes the file about 33% larger and cannot be cached separately.

In the other direction, paste Base64 or a data URL and the tool checks the bytes to see which image format it really is before showing it.

How to use it

Choose or drop an image to get the data URL, an <img> tag and a CSS url().
Or paste Base64 to preview it as an image and download it.

Things to watch for

Inlining large images slows the first paint, because the HTML or CSS cannot be parsed until the whole string arrives. Keep it for images of a few kilobytes.
SVG is usually smaller and clearer as URL-encoded text than as Base64.
The format is detected from the file’s bytes, not its extension. A .png that is really a JPEG is reported as JPEG.

Questions

Is there a size limit?: 10 MB. Larger images make data URLs that are impractical to use.
Which formats are recognised?: PNG, JPEG, GIF, WebP, AVIF, BMP, ICO and SVG.
Why does my Base64 not show as an image?: The bytes do not start with a known image signature. It may be a different file type or not Base64 at all.
Is the image uploaded?: No. It is read with FileReader and shown from memory.