如何首先加載低質量圖像以加快網站下載速度？

我正在研究Asp.net MVC3 web應用程序。我有一個頁面上的appx。幾個大小的100張圖片正在加載總appx。大小爲1.5MB。如何首先加載低質量圖像以加快網站下載速度？

我將致力於將這100個圖像分發到多個主機名，以便稍後加載更快。但現在我需要你的幫助來優化圖像的加載速度。我真的不能使用Sprite來處理這些圖像。

我特別感興趣的是實現一些可以在第一次加載時加載降級的圖像，然後隨着越來越多的字節被下載而逐漸提高圖像質量。所以基本上它會首先加載低質量的圖像，然後隨着更多字節的下載，圖像質量將會提高。

更新： 我所看到的幾個網站在圖像被裝優雅，它看起來非常croppy，然後它們的質量改善了時間，因爲它進一步下載開始的意思。

他們是怎麼做到的？

2012-03-27 Krunal

。假定的圖像是JPEG，你可以使用隔行掃描，但我不知道我會煩，我會更傾向於確保圖像適當的優化，並使用正確數量的主機名來加載它們。

如果你想優化JPEG，jpegmini.com可能是我們目前最好的優化器。

我想把這些圖片分成幾個主機名（選擇正確的數字很有趣，我聽說有六個人對YMMV是最佳的，如果你使用keep-alive，它可能實際上是壞的使用如此多的域）

使用主機名的方式，你想要的前六個（？）圖像來自第一個，下六個圖像來自下一個主機等，直到你用完了所有的主機名，然後從第一個開始。（因爲這通常是瀏覽器維護的並行連接數，因此取決於您訪問者使用哪個瀏覽器，可能需要使用四個瀏覽器）

目標應該是逐步渲染頁面，使頂部的內容在摺疊下面的東西之前可見。

2012-03-28 08:43:11

早在撥號的日子裏，我們使用了IMG標籤的LOWSRC屬性指向最終圖像的低色GIF版本。你仍然可以使用它。

<IMG HEIGHT="212" WIDTH="300" ALT="Phydueaux the Cat" SRC="cat.gif" LOWSRC="bwcat.gif">

2012-03-27 13:49:55

所以它實際上是兩張圖片，那麼在單張圖片上做什麼呢？看看問題，我剛剛更新了它。 – Krunal 2012-03-27 14:01:05

這就是所謂的「隔行掃描」，您必須將所有圖像保存爲特殊格式才能使用。 – 2012-03-27 14:08:32

回答