Base64 を画像に変換

Base64 テキストを画像に戻す

テキストしか扱えない経路で画像をやり取りするときには、Base64 がよく使われます。HTML や CSS の data URI、API が返す JSON、HTML メール、データベースのカラム、ログファイルなどです。エンコードしたテキストは元のバイナリファイルより約 3 分の 1 大きくなります。デコードはこの処理を逆にたどり、元のバイト列を復元します。

Base64 文字列だけを貼り付けても、data:image/...;base64, で始まる URI 全体を貼り付けてもかまいません。改行やスペースは無視され、URL セーフな Base64（- と _ を使用）も受け付けます。デコード、プレビュー、変換はすべてブラウザ内でローカルに行われるため、画像がアップロードされることはありません。

先頭の文字から形式を判別する

画像形式にはそれぞれ固定のバイトシグネチャがあり、そのバイト列は常に同じ Base64 の先頭文字にエンコードされます。このツールは data URI に記載された MIME タイプを信用せず、デコードしたバイト列を調べるため、ラベルが間違っている文字列でも正しく判別できます。

保存形式の選び方

オリジナルはデコードしたバイト列をそのまま書き出します。ファイルが必要なだけなら、これを選ぶのが適切です。その他の形式は、画像を canvas に描画してから再エンコードして作成します。

• PNG は可逆圧縮で、透過を保持します。
• JPEG は透明な部分を白で塗りつぶし、「品質」スライダーの設定を使用します。
• WebP と AVIF は通常、ファイルサイズが小さくなります。AVIF はブラウザがエンコードに対応している場合にのみ選択できます。
• GIF は 256 色に制限され、アニメーションは最初のフレームのみ保持されます。
• BMP、ICO、TIFF は、古いソフトウェア、ファビコン、印刷ワークフロー向けです。
• SVG はラスター画像を SVG ファイルで包むだけで、画像をトレースしてベクター図形に変換するわけではありません。