ハードファイルにリンクするよりも、インライン/ base64イメージをWebサイトに使用する方がはるかに高速ですか。
サーバー上のハードファイルに単純にリンクするのではなく、base64/lineを使用して画像を表示する方がはるかに高速です。
url(data:image/png;base64,.......)
これに関するパフォーマンスメトリックのタイプを見つけることができませんでした。
私はいくつかの懸念があります：
- キャッシングのメリットがなくなった
- Base64 A LOTのサイズは、PNG/JPEGファイルのサイズよりも大きくありませんか？
次のように「高速」を定義しましょう：ユーザーが完全にレンダリングされたHTML Webページを表示するのにかかる時間
多くの可能な解釈と状況があるので、「より速い」は答えるのが難しいことです：
Base64エンコーディングでは、画像が3分の1に拡張され、帯域幅の使用率が増加します。一方、それをファイルに含めると、サーバーへの別のGETラウンドトリップが削除されます。そのため、スループットは高いがレイテンシが低いパイプ（衛星インターネット接続など）は、個別の画像ファイルを使用する場合よりも、インライン画像を含むページをより速くロードする可能性があります。私の（田舎で遅い）DSL回線であっても、ラウンドトリップを多く必要とするサイトは、比較的大きいが数個のGETしか必要としないサイトよりも、ロードに長い時間がかかります。
リクエストごとにソースファイルからbase64エンコードを行うと、CPUの使用量が増えたり、データキャッシュをスラッシングしたりするため、サーバーの応答時間が遅くなる可能性があります。 （もちろん、いつでもmemcachedなどを使用してその問題を解決できます）。
これを行うと、もちろん、ほとんどの形式のキャッシュが防止されます。これは、画像が頻繁に表示される場合に大きな害になる可能性があります。たとえば、すべてのページに表示されるロゴは、通常、ブラウザ（またはsquidや何でも）そして月に一度リクエストしました。また、sendfile（2）などのカーネルAPIを使用して静的ファイルを提供するためにWebサーバーが持つ多くの最適化も防止します。
基本的に、これを行うことは特定の状況で役立ち、他の状況では害を及ぼします。これがあなたにとって価値のあるトリックであるかどうかを実際に理解する前に、どの状況があなたにとって重要であるかを識別する必要があります。
1800個の1ピクセルの画像を含む2つのHTMLページを比較しました。
最初のページは画像をインラインで宣言します：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC">
2番目の例では、画像は外部ファイルを参照しています。
<img src="img/one-gray-px.png">
同じ画像を複数回ロードするときに、インラインで宣言されている場合、ブラウザーは各画像に対してリクエストを実行します（画像ごとにbase64でデコードすると思います）。一方、他のシナリオでは、画像は1回リクエストされます。ドキュメントごと（下の比較画像を参照）。
インライン画像のあるドキュメントは約250ミリ秒で読み込まれ、リンク画像のあるドキュメントは30ミリ秒で読み込まれます。
（Chromium 34でテスト済み）
同じインライン画像の複数のインスタンスを含むHTMLドキュメントのシナリオは、先験的にはあまり意味がありません。ただし、プラグイン jquery lazyload は、src属性がそれに設定されるすべての「遅延」イメージのインラインプレースホルダーをデフォルトで定義することを発見しました。次に、ドキュメントに多数の遅延画像が含まれている場合、上記のような状況が発生する可能性があります。
キャッシングのメリットがなくなった
それが重要かどうかは、キャッシュにどれだけ依存しているかによって異なります。
もう1つの（おそらくより重要な）ことは、多くの画像がある場合、ブラウザはそれらを同時に（つまり、並行して）取得しないが、一度に少数のみを取得するため、プロトコルは最終的に chatty 。ネットワークのエンドツーエンドの遅延がある場合、一度に少数の画像で分割された多くの画像に、画像ごとのエンドツーエンドの遅延を掛けると、最後の画像がロードされるまでにかなりの時間がかかります。
Base64 A LOTのサイズは、PNG/JPEGファイルのサイズよりも大きくありませんか？
ファイル形式/画像圧縮アルゴリズムは同じです。私はそれを採用しています。つまり、PNGです。
Base-64を使用すると、各8ビット文字は6ビットを表します。したがって、バイナリデータは8対6の比率で、つまり約35％だけ圧縮解除されます。
それはどれくらい速いですか
「より速く」を定義します。 HTTPパフォーマンス（以下を参照）またはレンダリングパフォーマンスを意味しますか？
キャッシングのメリットがなくなった
実際、CSSファイルでこれを行っている場合でも、キャッシュされます。もちろん、CSSに変更を加えると、キャッシュが無効になります。
状況によっては、これを多くのHTTP接続での大幅なパフォーマンス向上として使用できます。ほとんどの場合、イメージスプライトなどの手法を利用できる可能性があるため、状況によっては言いますが、武器に別のツールを用意することは常に良いことです。