小さなアイコンをデータURIとして最適化する

データURIによる小さなアイコンの最適化

小さなUIアイコン（16x16から32x32ピクセル）は、データURIインライン化の理想的な候補です。これらのサイズでは、HTTPリクエストオーバーヘッドが実際の画像データを超えることが多く、インライン化がパフォーマンス上のネットゲインになります。

小さなアイコンのサイズ分析

アイコンサイズ	PNGサイズ	Base64サイズ	HTTPオーバーヘッド
16x16 px	200-400 B	270-540 B	500-2000 B
24x24 px	400-800 B	540-1070 B	500-2000 B
32x32 px	600-1500 B	800-2000 B	500-2000 B

アイコン配信方法の比較

データURIインライン化:

• 長所: 追加リクエストゼロ
• 長所: オフライン動作
• 短所: 独立したキャッシュなし
• 短所: HTML/CSSサイズの増加

CSSスプライト:

• 長所: すべてのアイコンに対して単一リクエスト
• 長所: 独立してキャッシュ可能
• 短所: 複雑なポジショニングCSS
• 短所: メンテナンスと更新が困難

ベストプラクティス: CSSカスタムプロパティでのSVGデータURI

モダンなアイコンシステムとして、CSSカスタムプロパティでのSVGデータURIが柔軟性とパフォーマンスの最良の組み合わせを提供します：

:root {
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");
}
.icon-search { background-image: var(--icon-search); }