Image Base64 Decode

Decode from Base64 string to image data.

Please enter the Base64 string

What is Image Base64 Decode Tool?

This tool allows you to convert Base64-encoded strings back into their original image files. It's particularly useful when working with encoded image data in web development, data processing, creative work, and various other scenarios.

Problems This Tool Solves

  • Extracting and verifying Base64 image data embedded in web applications
  • Visualizing image data included in API responses or JSON data
  • Extracting images encoded as Data URLs in CSS files
  • Verifying the actual appearance of inline images in HTML (img src="data:image/...")
  • Validating image data stored in databases

How to Use

  1. Paste your Base64-encoded image string into the "Base64 Conversion Target" input field
  2. The image preview will automatically appear

Important Notes

  • The Base64 string must include a Data-URL declaration at the beginning
    • Example: data:image/png;base64,
    • Example: data:image/jpeg;base64,
    • Example: data:image/svg+xml;base64,
  • Without this declaration, browsers cannot recognize the image format

Usage Examples

Example 1: Extracting an Inline HTML Image

Base64 image data found in HTML code:

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48IS0tIEljb24gZnJvbSBMdWNpZGUgYnkgTHVjaWRlIENvbnRyaWJ1dG9ycyAtIGh0dHBzOi8vZ2l0aHViLmNvbS9sdWNpZGUtaWNvbnMvbHVjaWRlL2Jsb2IvbWFpbi9MSUNFTlNFIC0tPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOCAxNHMxLjUgMiA0IDJzNC0yIDQtMk05IDloLjAxTTE1IDloLjAxIi8+PC9nPjwvc3ZnPg==" >

Inputting the value of the src attribute (the part starting with data:image/svg+xml;base64,...) into the tool will retrieve the original image.

Example 2: Extracting from CSS background-image

Inline image in CSS:

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48IS0tIEljb24gZnJvbSBMdWNpZGUgYnkgTHVjaWRlIENvbnRyaWJ1dG9ycyAtIGh0dHBzOi8vZ2l0aHViLmNvbS9sdWNpZGUtaWNvbnMvbHVjaWRlL2Jsb2IvbWFpbi9MSUNFTlNFIC0tPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOCAxNHMxLjUgMiA0IDJzNC0yIDQtMk05IDloLjAxTTE1IDloLjAxIi8+PC9nPjwvc3ZnPg==');
}

Entering the Base64 string from inside the url() into the tool will display the original SVG icon.

Technical Background

Base64 is an encoding scheme that converts binary data into ASCII strings. In web development, Base64-encoded images are commonly used in scenarios such as:

  • Embedding small icons or simple images directly in HTML to reduce HTTP requests
  • Sending and receiving binary data through APIs in JSON format
  • Embedding images in CSS using the data URI scheme

This tool helps you visually inspect such Base64-encoded image data and save it as files when needed.