私は Asp.net MVC3 Web アプリケーションに取り組んでいます。appx に 1 つのページがあります。いくつかのサイズの 100 枚の画像が合計 appx で読み込まれています。サイズは1.5MB。
この 100 個のイメージを複数のホスト名に配布して、後でロードを高速化する作業を行います。しかし今、画像の読み込み速度を最適化するためにあなたの助けが必要です. そして、これらの画像にスプライトを使用することはできません。
最初の読み込みで劣化した画像を読み込み、ダウンロードされるバイト数が増えるにつれて画質を徐々に向上させるものを実装することに特に興味があります。したがって、基本的には最初に低品質の画像をロードし、次にダウンロードされるバイト数が増えるにつれて画像の品質が向上します。
更新: 画像が正常に読み込まれる Web サイトをいくつか見てきました。
どうやってやっているの？
ダイヤルアップの時代にLOWSRCは、タグのプロパティを使用しIMGて、最終的な画像のローカラー GIF バージョンを指定していました。まだまだ使えます。
<IMG HEIGHT="212" WIDTH="300" ALT="Phydueaux the Cat" SRC="cat.gif" LOWSRC="bwcat.gif">
参照: http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479971/So-You-Want-LowSrc-Huh.htm
画像が JPEG であると仮定すると、インターレースを使用できますが、気にするかどうかはわかりません。画像が適切に最適化されていることを確認し、適切な数のホスト名を使用して画像を読み込むことをお勧めします。
JPEG を最適化したい場合は、jpegmini.com がおそらく現時点で最適なオプティマイザです。
いくつかのホスト名でイメージをシャーディングします (適切な数を選ぶのは楽しいでしょう。YMMV を除く一部の人には 6 が最適だと聞いています。また、キープアライブを使用している場合は、非常に多く使用するのは実際には悪いかもしれません)。ドメイン）
必要な最初の 6 つ (?) のイメージが最初のイメージから来て、次の 6 つのイメージが次のホストから来るようにホスト名を使用して、すべてのホスト名を使い切ってから最初からやり直すまで。 . (これは通常、ブラウザーが維持する並列接続の数であるため、6 を選択します。訪問者が使用するブラウザーによっては、4 を使用することをお勧めします)
目的は、ページを段階的にレンダリングすることであり、上部のコンテンツがスクロールしなければ見えないコンテンツの前に表示されるようにする必要があります。