Base64 Image Decoder
Base64データURIを画像にデコード
Base64画像デコードとは何ですか?
Base64画像デコーディングは、Base64画像エンコーディングの逆過程です。画像を表すBase64文字列またはdata URIを取得し、表示可能な二進ピクセルデータに変換し直します。data:image/png;base64,iVBORw0KGgo...のような文字列を受け取ると、デコーディングはdata URIプレフィックスを削除し、RFC 4648で定義されるBase64エンコーディングを反転して、元の画像バイトを再構築します。その後、ブラウザはデコードされたバイトを表示可能な画像としてレンダリングできます。
Data URI (RFC 2397)はMIMEタイプとBase64エンコードされたコンテンツを単一の文字列にバンドルします。APIレスポンス、HTMLメールソースコード、CSSスタイルシート、および画像がテキストではなくバイナリファイルとして保存されるデータベースレコードに頻繁に表示されます。これらの文字列をデコーディングすることは、画像をプレビューし、そのコンテンツを検証し、スタンドアロンファイルとして保存するために必要です。Base64は3バイトのバイナリデータを表すために4つのASCII文字を使用するため、エンコードされた文字列は常に元の画像より約33%大きくなります。
このツールは、完全なdata URI (data:image/png;base64,...)と、data:プレフィックスなしの生のBase64文字列の両方を解析します。生の文字列の場合、最初のBase64文字を検査して画像フォーマットが自動的に検出され、これらはファイルのマジックバイトに対応します。例えば、iVBORw0KGgoは常にPNGファイルを示します。デコードされた画像はブラウザで直接レンダリングされ、ファイルとしてダウンロードできます。
一般的な開発者シナリオは、RESTAPIが配置写真またはドキュメントサムネイルをJSONフィールド内のBase64文字列として返す場合です。例えば、{"avatar": "data:image/png;base64,iVBORw0KGgo..."} のような場合です。画像を使用するには、フィールド値を抽出し、コンマを含めてdata URIプレフィックスを削除し、残りのBase64文字をatob() (JavaScript)またはbase64.b64decode() (Python)などのデコーダを通して渡して、元のバイトを回復します。このツールに完全な値を貼り付けると、すべてのこれらの手動ステップがスキップされ、画像が即座にレンダリングされます。
このBase64画像デコーダを使用する理由は何ですか?
このツールは、Base64画像データをブラウザ内完全に表示可能でダウンロード可能な画像に変換します。アップロードなし、サーバー処理なし、アカウント不要です。
Base64画像デコーディングのユースケース
画像のdata URI構造
data URIは、画像タイプとエンコードされたコンテンツを単一の文字列にパッケージ化します。各コンポーネントは正しいデコーディングに不可欠です。スキーム(data:)はURLが外部リソースへの参照ではなく自己完結していることを示します。MIMEタイプ(例:image/png)は、生バイトを解釈するときにレンダラーが使用するフォーマットを指示します。マーカー;base64,は、プレーンテキスト形式にパーセント符号化を使用するdata URIからBase64エンコードコンテンツを区別します。Base64ペイロード自体は、1つまたは2つのパディング文字= で終わることがあります。これらは、入力バイト数が3の倍数でない場合に必要であり、エンコードされた長さが常に4の倍数であることを保証します。これらのコンポーネントのいずれかを省略または切り詰めると、デコーディングが失敗するか、破損した画像が生成されます。
| コンポーネント | 説明 |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type declaring the image format |
| ;base64, | Encoding declaration (always base64 for binary) |
| iVBORw0KGgo... | Base64-encoded pixel data |
Base64から画像フォーマットを検出
Base64文字列にdata:プレフィックスがない場合、最初の数文字を検査して画像フォーマットを識別できます。これらの文字はファイルのマジックバイトに対応し、各画像ファイルの開始時の固定バイトシーケンスがフォーマットを識別します。
| フォーマット | Base64プレフィックス | 16進シグネチャ | MIMEタイプ |
|---|---|---|---|
| PNG | iVBORw0KGgo | 89 50 4E 47 | image/png |
| JPEG | /9j/ | FF D8 FF | image/jpeg |
| GIF | R0lGOD | 47 49 46 38 | image/gif |
| WebP | UklGR | 52 49 46 46 | image/webp |
| SVG | PHN2Zy | 3C 73 76 67 (text) | image/svg+xml |
| BMP | Qk | 42 4D | image/bmp |
| ICO | AAABAA | 00 00 01 00 | image/x-icon |
コード例
一般的なプログラミング言語や環境でBase64画像文字列を画像ファイルにデコーディングする方法:
// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Method 1: fetch API (simplest)
const res = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048
// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime = header.match(/:(.*?);/)[1] // → "image/png"
const binary = atob(b64)
const bytes = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2 = new Blob([bytes], { type: mime })
// Create a download link
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)import base64
import re
data_uri = 'data:image/png;base64,iVBORw0KGgo...'
# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1) # → "image/png"
b64_data = match.group(2)
# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')
with open(f'output.{ext}', 'wb') as f:
f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)
# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)import { writeFileSync } from 'fs'
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1] // → "image/png"
// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)
// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47> (\x89PNG)
// JPEG → <Buffer ff d8 ff e0># Decode a raw Base64 string to an image file (Linux) echo 'iVBORw0KGgo...' | base64 -d > output.png # Decode a raw Base64 string to an image file (macOS) echo 'iVBORw0KGgo...' | base64 -D > output.png # Extract Base64 from a data URI and decode echo 'data:image/png;base64,iVBORw0KGgo...' | \ sed 's/^data:.*base64,//' | base64 -d > output.png # Identify the image format from the decoded file file output.png # → output.png: PNG image data, 64 x 64, 8-bit/color RGBA