「画像 ↔ Base64」は、画像ファイルとテキストエンコードを相互変換するツールです。エンコード方向では、画像を 1 枚選ぶと 4 種類の出力が同時に得られます。完全な Data URL（data:image/png;base64,… で、src や url() にそのまま使えます）、接頭辞を除いた純粋な Base64、background-image: url('…'); の CSS スニペット、<img src=… alt=ファイル名 /> の HTML スニペットの 4 つで、それぞれに独立したコピーボタンがあり、カードのタイトルにはエンコード後のサイズと増加率が表示されます。デコード方向では、Data URL または純粋な Base64 を貼り付けると、ファイルヘッダーから PNG / JPEG / GIF / WebP / BMP / SVG を判別し、プレビューしてダウンロードできます。処理はブラウザ内で完結します。

汎用の「Base64 変換」との違いは、こちらが画像向けで MIME 接頭辞を補い、そのまま貼れる CSS / HTML を生成し、テキストを表示可能な画像へ戻せる点です。

1. 01方向を選ぶ上部で「画像 → Base64」または「Base64 → 画像」を切り替えます。
2. 02エンコード画像を 1 枚または複数枚追加し、ファイルリストの「表示」で切り替えます。「エンコード結果」の 4 つのテキスト欄は 1,500 文字を超えると先頭部分だけを表示して総文字数を明記しますが、コピーボタンでは完全な内容を取得できます。
3. 03デコード「Base64 を貼り付け」欄に data:image/...;base64, で始まる文字列か純粋な Base64 を貼り付け（空白と改行は取り除かれます）、「デコードしてプレビュー」を押します。
4. 04保存デコードに成功すると MIME とサイズが表示され、「画像をダウンロード」で base64画像.png など対応する拡張子のファイルが得られます。

Base64 のサイズは元ファイルの約 1.33 倍

接頭辞がない場合はファイルヘッダーで形式を判断

12 KB の PNG アイコン

Data URL は約 16 KB（+33%）。CSS スニペットは `background-image: url('data:image/png;base64,iVBOR…');`

`iVBORw0KGgo` で始まる純粋な Base64 を貼り付け

image/png と判別され、プレビューが表示され、`.png` としてダウンロード

半分に切れた文字列を貼り付け

「デコードに失敗しました: 有効な Base64 コンテンツではありません。完全か確認してください」

対応入力

JPG / PNG / WebP / GIF / BMP / AVIF / HEIC / SVG。HEIC は先に JPEG へ変換してからエンコードするため、元の HEIC のバイト列にはなりません

大きなファイル

3 MB を超えると文字列が非常に長くなる旨の案内が出ます。数十 MB の文字列ではブラウザのテキスト欄が目に見えて重くなります

判別範囲

デコード時に識別できるのは PNG、JPEG、GIF、WebP、BMP、SVG で、それ以外はすべて PNG として扱われます

SVG

data:image/svg+xml;base64,… としてエンコードし、URL エンコード形式のインライン化は行いません

やらないこと

圧縮や形式の変更（先に「画像を圧縮」「画像形式の変換」）、画像以外のファイルの Base64（→「Base64 変換」）

エンコードとデコードはすべてブラウザ内で FileReader と atob により行われ、画像と Base64 テキストがサーバーへアップロードされることはありません。