画像 ↔ Base64 変換
画像と Base64 Data URL を相互変換 — CSS・HTML スニペット付き
ローカル実行
loading…
このツールについて
画像をドロップ・選択・貼り付けると、必要になりそうなあらゆる形の Base64 が手に入ります:そのまま使える Data URL、CSS の background-image 宣言、実寸付きの完全な <img> タグ、そして生の Base64 ペイロード。逆方向も可能で、Data URL や裸の Base64 文字列を貼り付ければ画像がデコードされ、プレビューとファイルダウンロードができます。
形式の判定は拡張子や宣言された MIME タイプではなくマジックバイトで行うため、.jpg にリネームされた PNG(やラベルの間違った Data URL)も正しく変換されます。サイズ表示はコストに正直です:Base64 はデータを約 3 分の 1 膨らませます。エンコード後の正確なサイズが元のサイズの隣に表示されるので、インライン化する価値があるか一目で判断できます。
よくある画像 Base64 変換サイトと違い、何もアップロードされません — ファイルはブラウザの FileReader API で読み込まれ、ページ内でエンコードされます。社内ダッシュボードのスクリーンショットや未発表のプロダクト画像など、見知らぬサーバーに渡したくないものでも安心です。
よくある質問
- ファイルへのリンクではなく Base64 でインライン化すべきなのはいつ?
- 画像が小さく(およそ 10 KB 未満)、めったに変わらず、別リクエストのコストが惜しい場合です — アイコン、メール内のロゴ、単一ファイルの HTML 文書など。それより大きいものは独立ファイルが有利です:個別にキャッシュされ、並列で読み込まれ、HTML や CSS を 33% 膨らませることもありません。
- なぜ Base64 版は元のファイルより 3 分の 1 ほど大きいのですか?
- Base64 はバイナリ 3 バイトを ASCII 4 文字で表すため、構造的に +33% のオーバーヘッドがあります(さらに最大 2 文字のパディング)。サーバーの Gzip や Brotli である程度取り返せますが、この膨張はエンコーディングに固有のものです — サイズと引き換えにバイナリをテキストへ埋め込めるようにしています。
- スタイルシートや HTML で見つけた Data URL をデコードできますか?
- できます — 「Base64 → 画像」に切り替えて、data: プレフィックスごと全体を貼り付けてください。パーセントエンコードされた SVG の Data URL(;base64 なしのもの)もデコードでき、ペイロード内の改行や空白は自動的に取り除かれます。結果はページ内でプレビューされ、正しい拡張子でダウンロードされます。
- PNG と JPEG だけでなく、SVG・GIF・ICO も使えますか?
- スニファーが認識する形式はすべて Base64 に変換できます:PNG、JPEG、WebP、GIF、SVG、BMP、ICO、AVIF。SVG については、XML ソースを直接インラインした方が小さく読みやすいことが多い点に注意 — SVG の Base64 化が意味を持つのは、主に引用符やエスケープが問題になる場合です。