2

サーバーの観点から使用する場合<img src=pathto.png />と使用する場合の違いはありますか?<img src=data:image/png;base64,encodedpngdata... />

その場合src=pathto.png、サーバーは画像をエンコードしてブラウザに送信するだけですか?

4

3 に答える 3

7

最初の例では、URI を指定して外部リソースを参照しています。したがって、これにより、そのリソースにデータを受信するための追加のリクエストが行われます。

2 番目の例もリソースを参照していますが、そのリソースのデータは URI に直接埋め込まれています (データ URI スキームを参照)。したがって、追加のリクエストは必要ありません。

どちらの方法にも長所と短所があります。

                        external    embedded
separate request (-)       ✓           ✗
cachable (+)               ✓           ✗
referencable (+)           ✓           ✗
compression (+)            ✓           ✗

  • 外部リソース データ 外部リソース
    を使用する利点は、そのリソースの出現ごとに要求を行うことなく、そのようなリソースをキャッシュして別のドキュメントで使用できることです。
    欠点は、最初の追加リクエストが必要になることです。

  • 埋め込みリソース データ
    リソース データをドキュメントに直接埋め込む利点は、追加の要求を保存できることです。
    ただし、欠点は、そのようなリソースをキャッシュしたり、1 つのドキュメントまたは異なるドキュメントの複数の外観で参照したりできないことです。また、deflate や gzip を使用して圧縮することもできません。実際、Base64 エンコーディングはサイズを 4/3 倍に膨張させます。

Web サイトを高速化するためのベスト プラクティスの最初のルール、HTTP リクエストの数を減らすも参照してください。

于 2009-06-05T14:10:39.283 に答える
4

別の画像にリンクするには、画像を取得するために 2 番目の要求が必要ですが、データを再度送信することなく、画像をキャッシュして複数のページで再利用できます。

インラインで埋め込むには、画像を含むすべてのページ要求でデータを送信する必要があります (画像がページで複数回使用されている場合は複数回)。

于 2009-06-05T14:16:41.267 に答える
3

の場合<img src="/path/to/image.png" />、サーバーは画像をエンコードしません。ブラウザーは別のリクエストでそれを要求し、サーバーは短いヘッダーをダンプし、次にファイルのデータをネットワーク上にダンプします。適切に作成された HTTP サーバーでは、最小限の処理しか行われないため、これは非常に高速な操作です。ブラウザは画像をキャッシュすることもできるので、後で取得する必要はありません（他の人が言ったように）.

インラインに埋め込むと、ページの重量が増加し、画像を個別にキャッシュできなくなります。

于 2009-06-05T14:24:02.237 に答える