画像をBase64データURIに変換する方法

なぜ重要か

トランザクションメールに小さなロゴが欲しい。リモート画像はユーザー環境で「プライバシーのため」読み込みブロックされることがあります。data:image/png;base64,...形式でインラインすれば済みます。コストはサイズ+33%ですが、数KB級ならレイテンシ削減と表示保証のほうが勝ちます。favicon、CSS背景アイコン、静的サイトのSVGスプライトにも同じです。

実際の3つのシーン

手順

画像→Base64ツールを開きます。

1. 1

   画像をドロップ

   PNG、JPEG、WebP、GIF、SVG、ICO。ブラウザのFile APIで読み込みます。

2. 2

   出力形式を選ぶ

   完全なdata URI（srcやCSSへ）か、接頭辞はサーバー側で付ける生Base64か。

3. 3

   URLセーフエンコードか選ぶ

   標準Base64の+/はHTML/CSSでOK。クエリやファイル名へ入れるなら -_ のURLセーフ版が有用です。

4. 4

   コピーまたはダウンロード

   非常に長いときは.txtでも取得できます。

icon.svg (412 bytes)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMMiAyMmgyMEwxMiAyeiIvPjwvc3ZnPg==

実践テクノ

• **インラインは小資産に限る（目安≤4KB）。**大きい画像はHTML/CSS/JSONが肥大化しリクエスト削減効果を超えます。
• **アイコンはSVGインライン優先。**Base64でも圧縮が効き、スケールで画質劣化しません。
• CSSならurl()形。background: url(data:image/png;base64,...)は広く対応します。
• **メールは実クライアントで確認。**Windows版Outlookは歴史的にdata URIが癖あり。一方モダンなGmail/Apple Mailは概ね問題なし。

よくある落とし穴

向いていない用途

• ビルド時に大量インライン—Webpack url-loaderやViteの?inlineが向きです。
• エンコード前処理—先に画像圧縮を。
• 5MB級をJSONボディへ—CDNのURL配信の方が合理的です。

FAQ

次のステップ

1. 逆方向はBase64→画像。
2. エンコード前に画像圧縮。
3. JPEG必須など形式変換は画像コンバーター。