画像Base64 デコード
Base64文字列から画像ファイルへデコードします。
Base64文字列を入力してください
画像Base64デコードツールとは?
Base64形式でエンコードされた文字列から元の画像ファイルを復元するためのツールです。ウェブ開発、データ処理、クリエイティブワークなど様々なシーンでBase64エンコードされた画像データを扱う際に役立ちます。
このツールが解決する課題
- ウェブアプリケーションに埋め込まれたBase64画像データの抽出と確認
- APIレスポンスやJSONデータに含まれる画像データの可視化
- CSSファイル内のData URLエンコードされた画像の抽出
- HTMLのinline画像(img src="data:image/...")の実際の表示確認
- データベースに保存された画像データの検証
使い方
- 「Base64変換対象データ」入力フィールドにBase64エンコードされた画像文字列を貼り付けます
- 画像プレビューが自動的に表示されます
重要な注意点
- 変換対象の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エンコードされた画像データを視覚的に確認し、必要に応じてファイルとして保存するのに役立ちます。