為什麼有的網頁打開圖片是從上到下逐行打開，有的則是先顯示低解析度圖片再逐漸加入細節？

01-01

是圖片格式的區別還是網站技術的區別？

jpg-2000 圖片格式的壓縮演算法改進了，小波演算法的本質就是先走低頻的，後出現高頻分量。於是從模糊到清楚；

原來的離散餘弦變換不能做到這樣，只能設定為步進模式，於是從上到下清楚

交錯模式 jpeg 沒有。

樓上的諸位有些概念理解似乎有誤。

感謝@吳亞桐回答給我找到線索，感謝提問者的好問題，我為這個問題曾經困惑了多年。這種漸進式載入方法容易和其他漸進式載入混淆。

我這裡小總結一下幾種漸進式載入辦法。

js延遲載入，當瀏覽器滾動條拉到下面時候才顯示出圖片，參考 http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
使用兩張一大一小照片，小的先顯示，等大圖片完全下載好之後再載入。參考 http://blog.rexsong.com/?p=929
圖片漸進式技術，也就是本問題。
大圖片切割成小圖片，逐個載入，這是互聯網早期方式，現在已經幾乎看不到了。太浪費http連接了。

下面是答案

-----------------------------------

瀏覽器下載圖片的時候漸進式載入，這樣下載完一張圖可以看到它的樣子，只不過只是不清楚的圖，這樣可以減少你等待看它的時間。

實際上有兩種方式可以實現這種漸進式效果，一種是圖像隔行掃描（Interlace），中文可以成為交錯，另外一種叫做圖像漸進式掃描（Progressive）。

隔行掃描可以在gif/png中實現。隔行GIF是指圖像文件是按照隔行的方式來顯示的，比如先出奇數行，再出偶數行，造成圖像是逐漸變清楚的。將圖像文件保存成隔行GIF格式的方法是，在 Photoshop中進行保存時，選擇「Interlaced」（不要選擇「Normal」），在Paint Shop Pro中進行保存時，點擊「Option…」按鈕，選擇「Interlaced」（不要選擇「Non Interlaced」）。
漸進式掃描在在jpg中實現。逐級JPG文件可以讓圖像先以比較模糊的形式顯示，隨著圖像文件數據不斷從網上傳過來，圖像會逐漸變清晰。這樣做的好處是圖像可以儘快地顯示出來，雖然圖像不很完美，但是卻讓瀏覽者看到了希望，並且圖像在不斷地變好。將圖像文件保存成逐級JPG格式的方法是，在Photoshop中進行保存時，選擇「Progressive」，在Paint Shop Pro中進行保存時，點擊「Option…」按鈕，選擇「Progressive encoding」。

參考

http://blog.csdn.net/greenerycn/article/details/1458231

http://www.libpng.org/pub/png/pngintro.html

JPEG有兩種類型：標準型和漸進式。標準型JPEG使用逐行式壓縮編碼。在瀏覽器中，若是標準的JPEG，載入是由上往下顯示的。

漸進式是一個好的解決方案，因為它可以讓用戶在沒有下載完圖片前就可以看到最終圖像的大體輪廓(當然也有人指出這影響UI體驗)。但是我還是認為，對於網路連接不好的情況下，採用漸進式JPEG是有好處的。

http://scriptogr.am/bee/post/how-to-make-progressive-jpeg

像是PNG格式的圖片有一個「交錯」的屬性（在Photoshop里生成PNG圖片的時候就可以看到），這個屬性就是讓圖片可以按照漸漸清晰的方式在網頁上呈現出來。

對於離散餘弦變換（DCT）壓縮的圖片格式，因為是分塊進行DCT操作的，所以是從上到下進行顯示，比如後綴為.jpeg,.jpg；而離散小波變換（DWT）壓縮的圖片格式，是先顯示低頻分量（輪廓），後顯示高頻分量（細節），所以是逐漸變得清晰。當然，第二種方式更符合我們的期待。

保存圖片的時候選擇「交錯」可以達到這個效果，作用主要是在網速不理想的情況下減少用戶等待時間，欺騙用戶心理。但是選這個方式會讓圖片儲存的大小稍微變大。

Apple的網上商店用的就是這個。

在使用Firework做圖片導出的時候，可以勾選「漸進式瀏覽器顯示」。不是png的交錯恩。

採用「漸進式瀏覽器顯示」選項的時候，jpg會比原圖再小一點。

為了減少數據量，有些網站使用js載入內容，只有當讀者往下滾動後才顯示內容。

另外互聯網早期，帶寬不夠，製作圖片壓縮格式的時候，可以有選項，生成讀片可以逐漸顯示，就像馬賽克逐漸清晰。現在做圖片很少有人這樣做了。