Base64 to image decoder

Decoded image preview

Download image


Working with text instead of images? Open the Base64 encoder and decoder.

Base64 text encoder and decoder

Paste a Base64 string into the box above and it is turned back into an image you can see and download. It accepts a full data URL such as data:image/png;base64,iVBORw0... or the bare Base64 part on its own. When there is no data: prefix, the image type is worked out from the first characters of the data. Decoding happens in your browser, so the image is not uploaded to us.

Below the decoder you can also pick an image file to get its Base64 data URL, ready to paste into HTML, CSS or JSON.

What a Base64 image string looks like

A data URL has three parts: data:, the media type such as image/png, and ;base64, followed by the encoded bytes. The bytes themselves use only A-Z, a-z, 0-9, + and /, with one or two = signs of padding at the end when needed.

  • PNG data starts with iVBORw0KGgo.
  • JPEG data starts with /9j/.
  • GIF data starts with R0lGOD.
  • WebP data starts with UklGR.
  • SVG data usually starts with PHN2Zy (<svg) or PD94bWwg (<?xml).
  • If your string starts with something else, it may not be an image, or the start of it may be missing.

Why Base64 images are bigger than the file

Base64 writes every 3 bytes as 4 characters, so the text is about a third larger than the image file, before any line breaks. A 30 KB PNG becomes about 40 KB of Base64. The decoder shows both numbers so you can see the overhead for your own image.

  • Inlining small icons and logos as data URLs can save a separate request.
  • Large photos are usually better as normal image files: the page gets heavier and the browser cannot cache the image on its own.
  • If you need a smaller file first, compress the image, then encode it.

Common reasons a Base64 image will not decode

  • The string was cut off when it was copied, for example from a log line or a truncated API response. The end of the image is missing.
  • It is URL-safe Base64, which uses - and _ instead of + and /. The decoder converts these for you.
  • There are quotes or a JSON key around it. Copy only the value. Line breaks, spaces and JSON-escaped slashes (\/) are cleaned up automatically.
  • The data is not an image at all, for example a PDF (it starts with JVBER) or plain text. Use the Base64 text decoder for text.
  • The data: prefix names the wrong type. Remove the prefix and paste just the Base64 so the type is detected from the data.

Using a Base64 image in code

Once you have the data URL, it works anywhere a normal image URL does:

  • HTML: <img src="data:image/png;base64,..." alt="...">
  • CSS: background-image: url("data:image/png;base64,...");
  • JSON APIs often send only the Base64 part. Add data:image/png;base64, in front of it to show it in a browser.

Convert Base64 to an image

  1. Copy the Base64 string or data URL, all of it.
  2. Paste it into the box at the top of this page. It decodes as soon as you paste, or press Decode to image.
  3. Check the preview, size and pixel dimensions, then press Download image.

Related tools and guides

FAQ

How do I convert Base64 to an image?
Paste the Base64 string or data URL into the box at the top of this page. The image appears straight away and the Download image button saves it with the right file extension.
Is my image uploaded?
No. The Base64 text is decoded by your browser and shown from memory. Nothing is sent to our server except an anonymous count that the tool was used.
Which image formats work?
PNG, JPEG, GIF, WebP, SVG, BMP and ICO, plus AVIF in browsers that support it. The type comes from the data:image/... prefix, or is detected from the first bytes when there is no prefix.
Do I need the data:image/png;base64, part?
No. You can paste just the Base64 characters. If you do include the prefix, it is used to name the type.
Why is the Base64 text larger than the image?
Base64 uses 4 characters for every 3 bytes, so it is about 33% larger than the original file.
How do I turn an image into Base64?
Use the image to Base64 picker under the decoder. It gives you the full data URL and lets you copy either the data URL or just the Base64 part.