データURIの見た目
データURIは、ファイル全体を1行のテキストにしたものです。例:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA… カンマより前は宣言された形式(image/png)と中身がBase64であることを示し、カンマより後ろがファイル本体です。HTMLではimgタグのsrc属性に、CSSではurl(…)の中に書かれます。全体を貼り付けても、カンマ以降のBase64だけを貼り付けても使えます。
Base64またはデータURIを貼り付けると、すぐに画像が表示されます。本当の形式・縦横サイズ・容量を確認して、そのままダウンロードできます。
ここに結果が表示されます
データURIは、ファイル全体を1行のテキストにしたものです。例:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA… カンマより前は宣言された形式(image/png)と中身がBase64であることを示し、カンマより後ろがファイル本体です。HTMLではimgタグのsrc属性に、CSSではurl(…)の中に書かれます。全体を貼り付けても、カンマ以降のBase64だけを貼り付けても使えます。
Base64の先頭の文字を見るだけで形式がわかります。iVBORw0KGgo はPNG、/9j/ はJPEG、R0lGOD はGIF、UklGR はWebP(RIFF)、PHN2Zy や PD94bWw はSVGです。このツールは接頭辞を信用せずにこれらのバイトを読み取り、データURIが別の形式を宣言している場合はお知らせします。
データURIまたはBase64を入力欄に貼り付けるか、それを含む.txtファイルを読み込みます。
本当の形式、縦横サイズ、デコード後の容量とともに、画像がすぐに表示されます。
「ダウンロード」をクリックすると、本当の形式に合った拡張子(.png、.jpg、.svgなど)で保存されます。
データURIはHTMLメール、CSSファイル、APIのJSONレスポンス、テスト用データ、書き出した文書などでよく見かけます。デコードすれば、再利用する前に中身を確認できます。
画像を本物のファイルとして取り出せば、圧縮やリサイズをしたり、ページ内のテキストではなく通常のキャッシュされるファイルとして配信したりできます。
豆知識デコードはすべてブラウザ内で行われます。Base64も画像もサーバーを経由しません。
SVGのプレビューは画像として描画されるため、中に隠れたスクリプトがこのページで実行されることはありません。
プライバシーBase64画像のデコードについて知っておきたいこと