1000画像のHTTPリクエストを削減しますか？

Question

この質問は少しクレイジーに聞こえるかもしれませんが、誰かが賢いアイデアを思い付くことができるのは難しいです。

単一のHTMLページに1000のサムネイル画像があると想像してください。

画像サイズは約5〜10 kbです。

すべての画像を単一のリクエストにロードする方法はありますか？どういうわけかすべての画像を単一のファイルにzipします…

それとも、このテーマに他の提案はありますか？

私がすでに知っている他のオプション：

CSSスプライト

怠zyな負荷

ヘッダーの有効期限を設定します

さまざまなホスト名で画像をダウンロードします

Answer 1

あなたの状況を考えると、私が考えることができる他の2つの選択肢しかありません：

1. 「データ：」プロトコルを使用して、サムネイルのベース64エンコードバージョンをHTMLページに直接エコーします。ユーザーブラウザにこれらの画像をキャッシュできないため、これをお勧めしません。
2. HTML5のWebストレージを使用して、すべての画像を列にブロブとして保存されたBase64エンコード画像データを使用して記録として保存します。データベースがユーザーマシンにダウンロードしたら、JavaScriptを使用してすべてのレコードをループし、jQueryのようなものを使用してページ上のサムネイルを動的に作成します。このオプションを使用すると、データベース全体がエンドユーザーブラウザでダウンロードされるまで待機する必要があり、かなりモダンなブラウザが必要になります。

あなたの最善の策は、怠zyなロード、有効期限がヘッダーのキャッシュ、複数のホスト名からの画像の提供の組み合わせだと思います。

画像を論理的にグループ化できる場合、上記のすべてに加えて、CSSスプライトも機能する場合があります。たとえば、サムネイルが特定の日にアップロードされた画像用である場合...毎日の1つのファイルを作成して、ユーザーブラウザにキャッシュできる場合があります。

Answer 2

これは、CSSスプライトと呼ばれるものを使用して行われます。 CSSが選択したHTMLで必要な特定の部分を備えた他のすべての画像を含む単一の画像。

で1つのチュートリアルを参照してください http://css-tricks.com/css-sprites

Answer 3

Spdyのようなものが欲しいようですね サーバープッシュ. 。クライアントがHTMLページ（または最初の画像）を要求すると、SPDYを使用すると、サーバーはより多くのリクエストを待たずに他のリソースをプッシュできます。

もちろん、これはまだ実験的です。

Answer 4

試してみることができます モンタージュ ImageMagickのコマンド単一の画像を作成します。