Preview · Download · Encode

Base64 to Image
Converter

Paste any Base64 string or data URI and instantly preview the image. Download it as a file, copy the data URI, generate HTML or CSS snippets all privately in your browser.

Base64 Input0 chars
Format: auto-detected from data URI
🖼️

Image preview will appear here

PNG Size: Dimensions:
8
Image Formats
4
Code Snippets
0ms
Server Latency
100%
Private & Secure
How It Works

From Base64 to Visible Image in Seconds

No account, no file uploads to any server. Paste, preview, and download in three steps.

1

Paste Base64 or Data URI

Copy your Base64 image string and paste it in the input. The tool accepts raw Base64 or a complete data:image/…;base64,… data URI the format is auto-detected.

2

Select Format & Preview

Choose the image format (PNG, JPEG, GIF…) or let it auto-detect from the data URI prefix. Click "Preview Image" to render the result inline with a checkerboard transparency background.

3

Download, Copy or Embed

Save the image file, copy the data URI for use in code, open it full-size in a new tab, or generate ready-to-paste HTML / CSS / React snippets from the Snippet tab.

Tool Features

A Complete Base64 Image Toolkit

Preview, download, encode, and generate embed code everything in one private browser tool.

🖼️

Instant In-Browser Preview

Decoded images render directly on a checkerboard transparency background so you can see exactly what the image looks like including transparent PNGs before saving.

🔍

Zoom & Inspect

Zoom in and out on the decoded image with the +/− controls. Open the full-resolution image in a new browser tab to inspect fine detail or check exact pixel dimensions.

🔄

Two-Way Conversion

Decode Base64 to an image and encode any image file to Base64. Drag-and-drop or browse for any image to generate its Base64 string and full data URI instantly.

💻

HTML / CSS Snippets

Generate ready-to-paste code: an HTML <img> tag, a CSS background-image rule, an inline style attribute, or a React JSX image component with one click.

📐

Image Metadata

After decoding, see the image format, file size in KB/MB, and pixel dimensions (width × height) displayed in the info bar below the preview.

🔒

100% Private

Everything runs locally in your browser no file uploads, no API calls, no tracking. Your images never leave your device, making it safe for sensitive or proprietary assets.

Supported Formats

Image Format Reference

MIME types, extensions, and key characteristics for all supported image formats.

MIME TypeExtensionTransparencyAnimationBest For
🖼️image/png.pngAlpha channelUI assets, screenshots, lossless graphics
📷image/jpeg.jpg / .jpegPhotos, complex images with many colours
🎞️image/gif.gif1-bitSupportedSimple animations, low-colour graphics
🖼️image/webp.webpAlpha channelSupportedModern web images smaller than PNG/JPEG
🎨image/svg+xml.svgNativeCSS/SMILIcons, logos, scalable vector graphics
🖼️image/bmp.bmpUncompressed raster, legacy Windows graphics
🔲image/ico.ico1-bit + alphaBrowser favicons, Windows application icons
🖼️image/avif.avifAlpha channelSupportedNext-gen compression, smaller than WebP
Use Cases

When You Need Base64 Images

Base64 images appear throughout modern web development from API responses to email templates.

01

API Response Inspection

Many REST APIs return generated images QR codes, charts, thumbnails, avatars as Base64 strings in JSON. Paste and preview them instantly without writing a line of code.

02

Email Template Development

HTML emails embed images as Base64 data URIs to avoid broken images when email clients block external URLs. Encode your assets here and paste the URI directly into your email template.

03

Frontend & CSS Development

Small UI assets icons, spinners, placeholders, dividers are often embedded as Base64 in CSS background-image rules. Generate ready-to-paste CSS snippets from any image file.

04

Canvas & WebGL Debugging

HTML5 Canvas and WebGL pipelines often export images as Base64 via canvas.toDataURL(). Paste the output here to visually verify what was rendered without saving intermediate files.

05

Progressive Web App Assets

PWA service workers and offline-first apps cache images as Base64 in IndexedDB or localStorage for instant display without network requests. Decode and verify cached assets here.

06

Database Image Storage

Applications that store images as Base64 in SQL or NoSQL databases can have their content decoded and previewed directly in the browser useful for data inspection and debugging.

How It Works Technically

Base64 Image Encoding Explained

Image files are binary data sequences of bytes that represent pixel colours, headers, and metadata. Base64 encodes this binary data as printable ASCII by converting every 3 bytes into 4 characters, making it safe to embed in text contexts like JSON, HTML, and CSS.

To decode, the browser reverses the process: the Base64 string is decoded back to a byte array, wrapped in a Blob with the correct image MIME type, and converted to an object URL. The <img> element then loads this URL exactly as it would any external image file.

A data URI combines the MIME type and Base64 payload in a single string: data:image/png;base64,iVBOR…. This self-contained format can be used anywhere a URL is accepted directly in src, background-image, or content CSS properties.

// Decode Base64 → <img> element
 
function b64ToImage(b64, mime) {
  // 1. Decode to byte array
  const raw = atob(b64);
  const bytes = Uint8Array.from(
    raw, c => c.charCodeAt(0));
 
  // 2. Wrap in Blob with MIME type
  const blob = new Blob(
    [bytes], { type: mime });
 
  // 3. Create object URL → img.src
  const url =
    URL.createObjectURL(blob);
  imgEl.src = url;
}
 
// Or use data URI directly:
imgEl.src =
  `data:${mime};base64,${b64}`;
FAQ

Frequently Asked Questions

Everything you need to know about Base64 image encoding and this tool.

The tool supports PNG, JPEG, GIF (including animated), WebP, SVG, BMP, ICO, and AVIF. For raw Base64 input, select the correct format from the dropdown. For data URIs, the MIME type is extracted automatically so data:image/gif;base64,… is correctly identified as a GIF.
Raw Base64 is just the encoded payload a long string starting with characters like iVBOR (PNG) or /9j/4 (JPEG). A data URI prepends the MIME type: data:image/png;base64,iVBOR…. Both are accepted by this tool. Data URIs can be pasted directly into HTML src attributes or CSS url() functions without modification.
The most common cause is a mismatched MIME type for example, selecting PNG when the data is actually a JPEG. Try switching the format dropdown. Also check that the Base64 string is complete and not truncated. If it came from a JSON payload, remove any JSON-escaped characters like \n or surrounding quotes before pasting.
Yes. In HTML: <img src="data:image/png;base64,…"/>. In CSS: background-image: url('data:image/png;base64,…'). The Snippet tab generates these ready-to-paste code blocks for you. Note that large Base64 images significantly increase HTML/CSS file size and can hurt page performance this technique is best for small icons and UI elements.
No. All encoding and decoding uses browser-native APIs: atob(), Blob, URL.createObjectURL(), and FileReader. Nothing is transmitted anywhere. The tool works fully offline after the initial page load, making it safe for confidential images, unreleased assets, and private design work.
Base64 encodes every 3 bytes of binary as 4 ASCII characters, so the output is approximately 33% larger than the original file. A 100 KB PNG becomes roughly 133 KB as Base64. This size overhead is the trade-off for embedding binary data in text-based formats like HTML, CSS, and JSON.
The checkerboard pattern is the standard visual indicator for transparency in image editing tools. It means the image has transparent or semi-transparent areas (alpha channel). For JPEG images, which have no transparency support, you will see the image's actual background colour instead.
Use the Image → Base64 tab to drag-and-drop or browse for any image file. In JavaScript you can also use FileReader.readAsDataURL(file) to get a data URI from an uploaded file, or canvas.toDataURL('image/png') to export a Canvas element. In Python, use base64.b64encode(open('image.png','rb').read()).