Base64画像とは
Base64は、バイナリデータをプレーンテキストにエンコードする方式です。画像をBase64に変換すると、長いテキスト文字列になり、HTML/CSSに直接埋め込めます。独立した画像ファイルは不要です。この使い方を「インライン画像」と呼びます。
Base64画像を使うべきとき
インラインに適したケース
- 小さなアイコン： 数KBの小さなアイコンをインライン化すると、HTTPリクエストが減り、読み込みが速くなる
- メールテンプレート： メールクライアントは外部画像に制限が多いため、インラインの方が信頼できる
- 単一ファイル納品： HTMLレポートやデモを1つのファイルにまとめたい場合
- データURI： CSS背景画像、SVG参照
インラインに不適なケース
- 大きな画像： Base64エンコード後のサイズは原本より33%大きくなり、大きな画像をインライン化するとかえって遅くなる
- キャッシュが必要な画像： インライン画像はブラウザ単体でキャッシュできず、HTML読み込みのたびに再ダウンロードされる
- 頻繁に再利用する画像： 複数ページで共有する画像は、外部ファイル＋キャッシュの方が効率的
変換方法
DocsAll画像→Base64ツールでワンクリック変換：
- 画像→Base64を開く
- 画像をアップロード
- Base64文字列とData URLが自動生成される
- コピーして使用
逆に、Base64から画像を復元するには、Base64→画像ツールを使います。
使い方
生成されたData URLは data:image/png;base64,iVBORw0KGgo... のような長い文字列になります。
- HTMLに配置：imgタグのsrc属性に直接書き込む
- CSSに配置：background-imageのurl()の中に書く
メリット・デメリット
| 項目 | 外部画像ファイル | Base64インライン |
|---|---|---|
| HTTPリクエスト | 画像ごとに1回 | 追加リクエストなし |
| サイズ | 原本のサイズ | 33%大きい |
| キャッシュ | 単独でキャッシュ可能 | HTMLと一緒にキャッシュ |
| 適用 | 大きな画像、再利用画像 | 小さなアイコン、単一ファイル |
推奨
アイコン系の小さな画像（4KB未満）はインライン化し、写真などの大きな画像は外部ファイルにします。画像圧縮で先にサイズを小さくしてから、インライン化するか判断すると効果的です。Base64の詳細はBase64エンコード・デコードガイドをご覧ください。