Web ToolBox

画像Base64デコード

Base64文字列を画像ファイルにデコード

Base64テキストを画像に変換

Base64テキスト

Base64デコード画像

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

画像のData URLやBase64文字列を入力して、ブラウザ上で画像として表示を確認するツールです。HTML、CSS、APIレスポンスなどに含まれる画像データが実際にどんな見た目になるかをすぐ確かめたいときに役立ちます。

このツールは、文字列を画像としてプレビューする用途に向いています。貼り付けた内容がそのまま表示対象になるため、埋め込み画像の確認やData URLの検証がしやすくなっています。

使い方

  1. Base64テキストを入力欄へ貼り付けます。
  2. 右側のプレビューで画像を確認します。

入力するとすぐに表示が切り替わるため、Data URLの内容をその場で確かめられます。

使うときのポイント

Data URL形式の文字列が必要

このツールは、img 要素の src としてそのまま表示できる文字列を前提にしています。つまり、先頭に data:image/...;base64, のような宣言が付いた形式が必要です。

例:

  • data:image/png;base64,...
  • data:image/jpeg;base64,...
  • data:image/svg+xml;base64,...

Base64本体だけでは画像形式を判断できないため、そのままでは正しく表示できない場合があります。

活用シーン

  • HTML の img src="data:image/..." の見た目を確認したいとき
  • CSS の background-image に埋め込まれた画像を確認したいとき
  • APIレスポンスやJSON内の画像データを目で見たいとき
  • Data URLが正しく作れているか簡単にチェックしたいとき

入力例

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

このようなData URL形式の文字列を貼り付けると、画像として表示を確認できます。

使うときの注意点

  • Data URL宣言がない文字列は、そのままでは画像として表示できない場合があります
  • 非常に長い文字列や大きな画像は、ブラウザ上で扱いにくくなることがあります
  • このツールは画像プレビュー用であり、画像編集や再保存の機能はありません