Base64 を画像に変換

Base64 を画像に変換する方法

1. 入力欄に文字列を貼り付けます。ファイルに保存された長い値は、.txt ファイルを開く で開くか、入力欄にドロップできます。
2. リアルタイム がオンなら、貼り付けた時点で画像がデコードされます。ステータス行には、Base64 が有効か、バリアント（標準か Base64URL）、バイト数、検出 された形式が表示されます。
3. プレビューを確認します。その下に、形式、MIME タイプ、拡張子、バイト単位のサイズ、ピクセル寸法、SHA-256 ハッシュが表示されます。
4. 必要なら ファイル名 を変えて、ファイルをダウンロード を押します。HTML や CSS 用には、代わりに data URI としてコピー で整った data: URI を取得できます。

サンプル は小さな PNG を読み込むので、自分のデータを貼り付ける前に出力の様子を確認できます。

貼り付けられるもの

画像の文字列がきれいな形で届くことはめったにないので、デコーダーは Base64 を包むものに寛容です。

• 素の Base64（API が返す形）：iVBORw0KGgoAAAANSUhEUg...
• data URI：data:image/png;base64,iVBORw0KGgo...
• data URI を含むコード：background-image: url("data:image/svg+xml;base64,...")、<img src="data:image/jpeg;base64,...">、Markdown の画像 ![](data:...)、値が data URI になっている JSON フィールドなど。最初の data URI が自動で取り出されます。
• 折り返された Base64：メールのソースや PEM 形式の出力のように、64 文字か 76 文字ごとにスペースや改行が入ったもの。
• URLセーフ Base64：- と _ を使うもの、= パディングのない文字列、引用符で囲まれた値。

Base64 が data: 接頭辞なしで JSON のフィールドに入っている場合は、引用符の間の値だけをコピーしてください。{ は Base64 のアルファベットに含まれないため、JSON 文書全体は無効な Base64 として拒否されます。

形式の判別方法

どの画像形式も、マジックバイトと呼ばれる決まったシグネチャで始まります。ツールは文字列をデコードし、先頭のバイトをそれらのシグネチャと比べるので、image/png と書かれていても中身が JPEG なら JPEG と判別します。同じシグネチャは Base64 の段階でも見えるので、ログやデータベースのダンプを読むときに役立ちます。

AVIF、JPEG XL、カーソル（.cur）ファイルも判別できます。data URI が宣言する形式と内容が食い違う場合は、両方を示す注意書きが表示されます。データがそもそも画像でない場合、たとえば PDF なら、ページがそのことを知らせ、.pdf としてダウンロード ボタンを表示します。さらに多くのファイル形式のシグネチャは よく見る Base64 の接頭辞 のページにあります。

画像が表示されない原因

文字列が途中で切れている。 Base64 の値は、ログの行長制限、データベースのカラムサイズ、スプレッドシートのセル（32,767 文字）、ターミナルからのコピー＆ペーストで切れてしまいます。その場合 JPEG や PNG は一部しか描画されないか、プレビューに失敗します。1 文字の過不足で長さがあり得ない値になると、「長さが不正です」エラーが出ます。有効だが短い文字列はエラーなしでデコードされるので、サイズ を想定していた値と比べてください。

data URI の MIME タイプが間違っている。 JPEG のバイト列の前に data:image/png と付いていても、ラスター画像の形式を推測するブラウザでは、たいてい表示されます。しかし、ほかのソフトはラベルを信用します。SVG は推測の対象にならないため、image/svg+xml 以外の MIME タイプが付いていると <img> 内では描画されません。このツールはプレビューとダウンロードに実際の形式を使います。

途中で文字が変わっている。 フォームエンコーディングを通った + は、空白になって戻ってくることがよくあります。1 行の文字列に空白があって + が 1 つもない場合、デコーダーは空白を + に戻します。両方がある場合は区別できないため、画像が間違ったバイト列にデコードされることがあります。一部のライブラリが書き出す JSON はスラッシュを \/ とエスケープしますが、デコーダーはこうしたエスケープや文字どおりの \n を取り除きます。もっと込み入った場合は、Base64 を修復 がすべての修正内容を一覧表示します。

二重にエンコードされている。 デコードしたバイト列自体が Base64 テキストなら、注意書きが表示され、もう一度デコード で次の層を取り出せます。戻る で 1 つ前の段階に戻ります。Base64 の中の data URI や、gzip や zlib で圧縮されたデータにも同じように対応しています。

ブラウザがその形式を表示できない。 iPhone の HEIC 写真は Safari 17 以降でしか表示されず、TIFF は Safari だけ、JPEG XL には Safari 17、Chrome 155、Firefox 158 以降が必要です。その場合、プレビューにはブラウザで表示できない旨のメッセージが出ますが、バイト列は無傷です。ファイルをダウンロード で保存したファイルは、写真アプリで開ける正常なファイルです。

画像ではない。 JVBER で始まる Base64 文字列は PDF、UEsDB は ZIP アーカイブです。文書、アーカイブ、音声などもプレビューできる Base64 をファイルに変換 を使ってください。

正しい拡張子で保存する

拡張子 と MIME タイプ の項目は、自分で編集するまで判別した形式から入力されるので、入力のどこにも「PNG」と書かれていなくても、PNG は .png として保存されます。Windows やアップロードフォームは、ファイルを拡張子で判断します。WebP の名前を .jpg に変えても中身は WebP のままなので、厳格なソフトでは拒否されます。

どちらの項目も上書きできます。たとえばアイコンを .cur として保存したり、自分で MIME タイプを入力したりできます。MIME タイプを変えると、その形式でプレビューも描画し直されます。

SHA-256 と 16進ダンプ

プレビューの下の SHA-256 ハッシュは、デコード後のバイト列から計算されます。送信側から受け取ったハッシュ、データベースの記録、sha256sum image.png の結果と比べれば、保存した画像がエンコードされたファイルとバイト単位で完全に同じであることを証明できます。ほかのデータのハッシュについては SHA-256 ツール を参照してください。

16進ダンプを表示 は先頭 512 バイトを表示します。ヘッダーを調べるにはこれが一番の近道です。オフセット 0x10 にある PNG の幅と高さ、カメラで撮った JPEG の Exif マーカー、ICO ファイルの画像ディレクトリなどを確認できます。

プライバシー：画像は端末の外に出ません

Base64 の画像は、見知らぬ Web サイトにはアップロードしたくないものであることがよくあります。バグ報告のスクリーンショット、身分証明書やパスポートのスキャン、患者ポータルから書き出した医療画像、タブレットで取り込んだ署名などです。このページは、それらをすべてブラウザ内でデコードします。ページの Content Security Policy が、Cloudflare のページビュー計測を除いてスクリプトからのネットワークリクエストをブロックし、ファイルをダウンロード はローカルの blob: URL から保存します。貼り付けた内容がサイトに保存されることはありません。

コードで Base64 画像をデコードする

Python では、接頭辞を取り除き、パディングを補い、シグネチャから拡張子を選びます。

import base64, re

def save_image(b64: str, stem: str = "image") -> str:
    b64 = re.sub(r"^data:[^,]*;base64,", "", b64.strip(), flags=re.I)
    b64 = re.sub(r"\s+", "", b64).replace("-", "+").replace("_", "/")
    data = base64.b64decode(b64 + "=" * (-len(b64) % 4))
    if data.startswith(b"\x89PNG"):
        ext = "png"
    elif data.startswith(b"\xff\xd8\xff"):
        ext = "jpg"
    elif data.startswith(b"GIF8"):
        ext = "gif"
    elif data[:4] == b"RIFF" and data[8:12] == b"WEBP":
        ext = "webp"
    else:
        ext = "bin"
    with open(f"{stem}.{ext}", "wb") as f:
        f.write(data)
    return f"{stem}.{ext}"

ブラウザでは、文字列を Blob に変換してオブジェクト URL で表示します。

function base64ToBlob(b64, type = "image/png") {
  const bin = atob(b64.replace(/^data:[^,]*;base64,/, "").replace(/\s+/g, ""));
  const bytes = Uint8Array.from(bin, c => c.charCodeAt(0));
  return new Blob([bytes], { type });
}

img.src = URL.createObjectURL(base64ToBlob(str));

バイナリデータの読み書きについては Python での Base64 と JavaScript での Base64 で詳しく解説しています。逆方向には、リサイズや形式変換もできる 画像を Base64 に変換 で画像をエンコードできます。

よくある質問