web-dev-qa-db-ja.com

base64イメージ文字列の長所と短所

画像をbase64文字列に変換し、imgタグとcss内でこれらの文字列を次のように使用できることを発見しました。

<img alt="" src="data:image/png;base64,iVBORw0KGgoAhEUgAAA ... FTkSuQmCC" />

またはこれ：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAA ... uQmCC);

この方法で画像を提供すると、ウェブサイトの読み込み時間が改善されるようですが、いくつかの欠点があります。この方法についていくつか質問があります。

  • ブラウザはこれらの画像をキャッシュしますか？
  • ページがこの文字列または画像ファイルをレンダリングするのは速いですか？

この画像提供方法に関連する他の利点または欠点に興味があります。

imagesbrowserscachecontent-encoding
2
Hoytman

ブラウザはこれらの画像をキャッシュしますか？

さて、このコンテキストでキャッシュするとはどういう意味ですか？ブラウザは静的ファイルをキャッシュするため、再度要求する必要はありません。画像データがHTMLページ自体にインラインで提供される場合、キャッシュは必要ありません。

画像データがスタイルシートで提供される場合、スタイルシート自体がキャッシュされるため、画像データはそれとともにキャッシュされます。

ページがこの文字列または画像ファイルをレンダリングするのは速いですか？

私はそこの違いは無視でき、検討する価値がないと思います。

また、コメントからの質問に答える場合、その1ページでのみ使用される非常に小さな画像がある場合にのみ、HTMLソースの画像データをインライン化することを一般的に検討します。

1
Tim Fountain