Base64
Base64埋め込みのサイズ目安｜私が50KBで後悔した話
2025-11-13
:::note ※Base64のサイズで迷っている人向けの「判断基準」記事です :::
結論（私の判断基準）
- 〜10KB: 迷わず埋め込む
- 10〜30KB: 条件付きで埋め込む
- 30KB〜: 外部ファイル一択
私は以前「50KBまで許容」と思っていた。後悔した。
🚀 今すぐ変換 → Base64エンコーダー
私が50KBで後悔した話
「リクエスト減らせる」と思って、アイコン画像をCSSにBase64で埋め込んだ。
1個30KB〜50KBのアイコンを10個。合計400KB。Base64化して約530KB。
CSSファイルが600KB超えた。
何が起きたか：
- 初回読み込みが遅い
- CSSが変わるたびに全部再ダウンロード
- 画像だけキャッシュできない
結局、外部ファイルに戻した。CDNに置いたら速くなった。
「リクエスト減らせる」は幻想だった。
なぜサイズが問題になるか
Base64はバイナリを文字列化するため、元データより約33%大きくなる。
| 元サイズ | Base64後 |
|---|---|
| 10KB | 約13KB |
| 30KB | 約40KB |
| 50KB | 約67KB |
| 100KB | 約133KB |
HTML/CSSに埋め込むと、その分だけファイルが肥大化する。
私の判断基準（今）
10KB以下：迷わず埋め込む
- 小さいアイコン（SVG、PNG）
- ファビコン
- ボタン画像
リクエスト削減のメリットがある。
10〜30KB：条件付き
- 初回表示に必須な画像 → 埋め込み検討
- 繰り返し使う画像 → 外部ファイル
- 1回しか使わない画像 → 埋め込み検討
30KB以上：外部ファイル一択
例外なし。CDNに置いてキャッシュさせる。
「リクエスト減らせる」の罠
「リクエスト減らしたいからBase64」は一理ある。
でも：
- HTTP/2以降は並列取得が効率化されている
- 外部ファイルはCDNでキャッシュできる
- Base64埋め込みはHTMLごとキャッシュになる
昔ほどメリットがない。
私がBase64を使う場面（今）
| 場面 | サイズ目安 |
|---|---|
| ファビコン | 〜5KB |
| 小さいアイコン | 〜10KB |
| インライン必須（メールHTML等） | 〜30KB |
これ以外は外部ファイル。
判断フロー
- 10KB以下？ → 埋め込みOK
- 30KB以下で、初回表示に必須？ → 埋め込み検討
- 繰り返し使う？ → 外部ファイル
- それ以外 → 外部ファイル
迷ったら外部ファイル。
この記事で解決しない場合
- Base64でエラーが出た → Base64でよくあるエラーと対処法
- Base64の思想を知りたい → Base64は本来、使うべき技術ではない
私は「50KBまで許容」で後悔した。今は「10KB以下」を基準にしている。