画像Base64 デコード

Base64文字列から画像ファイルへデコードします。

Base64文字列を入力してください

画像Base64デコードツールとは？

Base64形式でエンコードされた文字列から元の画像ファイルを復元するためのツールです。ウェブ開発、データ処理、クリエイティブワークなど様々なシーンでBase64エンコードされた画像データを扱う際に役立ちます。

このツールが解決する課題

  • ウェブアプリケーションに埋め込まれたBase64画像データの抽出と確認
  • APIレスポンスやJSONデータに含まれる画像データの可視化
  • CSSファイル内のData URLエンコードされた画像の抽出
  • HTMLのinline画像（img src="data:image/..."）の実際の表示確認
  • データベースに保存された画像データの検証

使い方

  1. 「Base64変換対象データ」入力フィールドにBase64エンコードされた画像文字列を貼り付けます
  2. 画像プレビューが自動的に表示されます

重要な注意点

  • 変換対象のBase64文字列には先頭にData-URL宣言が必要です
    • 例：data:image/png;base64,
    • 例：data:image/jpeg;base64,
    • 例：data:image/svg+xml;base64,
  • この宣言がないとブラウザは画像形式を認識できません

使用例

例1: HTMLのインライン画像を抽出する

HTMLコード内で見つけたBase64画像データ:

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

このsrc属性の値（data:image/svg+xml;base64,...から始まる部分）をツールに入力すると、元の画像を取得できます。

例2: CSSのbackground-imageからの抽出

CSS内のインライン画像:

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

url()内のBase64文字列をツールに入力すると、元のSVGアイコンが表示されます。

技術的な背景

Base64は、バイナリデータをASCII文字列に変換するエンコーディング方式です。ウェブ開発では以下のようなケースでBase64エンコードされた画像が使われます：

  • 小さなアイコンやシンプルな画像をHTMLに直接埋め込んでHTTPリクエストを減らす
  • バイナリデータをJSON形式でAPIを通じて送受信する
  • データURIスキームを使用してCSS内に画像を埋め込む

このツールは、そのようなBase64エンコードされた画像データを視覚的に確認し、必要に応じてファイルとして保存するのに役立ちます。