HTMLでのインライン画像にデータURIを使用する

データURIによる画像の埋め込み

データURIにより、HTML <img>タグ内に画像を直接埋め込むことができ、各画像に対する個別のHTTPリクエストを排除できます。これはアイコン、アバター、UI要素など小さくて頻繁に使用される画像に特に効果的です。

基本構文

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Small icon" />

ブラウザはBase64文字列をデコードし、外部URLから読み込まれた場合と同様に画像をレンダリングします。

サポートされる画像フォーマット

フォーマット	MIMEタイプ	最適な用途
PNG	image/png	アイコン、ロゴ、透明度のあるスクリーンショット
JPEG	image/jpeg	写真、透明度のない複雑な画像
GIF	image/gif	シンプルなアニメーション、非常に小さなグラフィック
WebP	image/webp	より良い圧縮のモダンフォーマット
SVG	image/svg+xml	スケーラブルベクターグラフィック

インライン画像のサイズガイドライン

• 2 KB未満: 常にインライン化 — HTTPリクエストオーバーヘッドがBase64オーバーヘッドを超える
• 2-10 KB: 通常インライン化が有益、特にファーストビューの画像
• 10-32 KB: クリティカルレンダリングパスの画像のみインライン化を検討
• 32 KB超: 適切なキャッシュを持つ外部ファイルを使用

パフォーマンスの考慮事項

インライン化された画像はブラウザによって独立にキャッシュできません。HTMLページが読み込まれるたびに、画像データはドキュメントの一部として再ダウンロードされます。これにより、大きな画像や複数のページで共有される画像にはインライン化が逆効果になります。しかし、小さな一回限りの画像の場合、HTTPラウンドトリップの排除による節約（モバイルネットワークで通常50-200ms）がキャッシュの欠点を上回ります。

レスポンシブ画像とデータURI

データURIはsrcset属性で動作しますが、複数のサイズをBase64として埋め込むとHTMLサイズが劇的に増加するため、実用的ではありません。レスポンシブ画像には、srcsetとsizes属性を持つ外部ファイルがより良いアプローチです。