Your files are never uploaded — everything runs in your browser.

Image to Base64 converter

Turn an image into Base64 text you can paste into HTML, CSS or JSON, or decode a Base64 string back into an image file.

Related tools

HEIC → JPGTurn iPhone photos into JPGs that open anywherePopularJPG → PNGLossless PNG that is ready for editingPNG → JPGTurn heavy PNGs into light JPGsConvert to WebPSmall, sharp images for websitesPopularWebP → JPGOpen downloaded WebP files anywhereAVIF converterNext-gen format, smallest filesNew

What Base64 is used for

Base64 writes binary data, such as an image file, using only letters, digits and a few symbols. That lets you put an image directly inside text: an HTML page, a CSS stylesheet, a JSON payload or a configuration file. Developers use it for small icons that should arrive together with the page, for single-file HTML documents, and for APIs that expect images as text.

You also run into it the other way around, when a log, a database field or an API response contains a long string starting with data:image and you want to see the picture behind it.

How to use it

The tool has two tabs.

Image to Base64

  1. Drop an image onto the page or click to choose one.
  2. You get four results, each with its own copy button: the full Data URI (data:image/...;base64,...), the raw Base64 string, a ready-made HTML img tag, and a CSS background-image rule.
  3. Copy the one you need. The encoded length is shown, so you can see how much text you are adding.

Base64 to image

  1. Paste a Data URI or a raw Base64 string.
  2. The tool detects the image format and shows a preview.
  3. Download the decoded image.

Both directions run entirely in your browser; neither the image nor the text is uploaded.

Why Base64 is about a third larger

Base64 uses 4 text characters for every 3 bytes of data, so the encoded version is roughly 33 percent larger than the image file. A 30 KB icon becomes about 40 KB of text. On top of that, an image embedded in HTML or CSS cannot be cached on its own by the browser; it is downloaded again whenever the page or stylesheet that contains it is downloaded.

That is why Base64 is a good fit only for small images:

  • Good fits: icons and logos of a few KB, tiny placeholder images, images inside a self-contained HTML file, and images that must travel in a JSON or text field.
  • Poor fits: photos and large graphics. Serve them as normal image files instead, ideally in a modern format. Our guide on image optimization for websites covers the alternatives.

Before encoding, make the image as small as you can. Compress the image, or use the PNG compressor for icons and logos: every byte you save in the file saves about a byte and a third in the text. For a logo that exists as SVG, the SVG code itself is often shorter than any Base64 version of a PNG.

Frequently asked questions

Is Base64 a form of encryption?

No. It is only an encoding. Anyone can turn a Base64 string back into the original image, exactly as this tool does.

What is the difference between the Data URI and the raw Base64 string?

The Data URI adds a prefix such as data:image/png;base64, that tells the browser what type of file follows. Use it in HTML and CSS. The raw string is just the encoded data, which some APIs and programs expect on its own.

My pasted Base64 does not show an image. Why?

The string may be incomplete, which happens easily with very long text, or it may not contain an image at all. Make sure you copied it from the very start to the very end, including any = characters at the end.

Does encoding change the image quality?

No. Base64 is lossless: decoding gives back exactly the same file, byte for byte.