最近看有些網站上的jpg格式的圖片在呈現的時候，有兩種方式，一種是自上而下掃描式的，還有一種就是先是全部的模糊圖片，然后逐漸清晰(就像GIF格式的交錯顯示)。
一、基本JPEG(baseline jpeg)和漸進JPEG
圖片的尺寸大小：
張鑫旭個人博客看到：
同一張jpg圖片，如果保存為基本式和漸進式那個尺寸更小呢？
根據我拿3終不同風格圖片做測試，發現，百度百科中所說的漸進式圖片的大小比基本式的小是不准確的。
其中，兩者大小關系基本上沒有什么規律。下面是他的測試結果：
| 圖片縮略圖 | 測試結果 |
|---|---|
 |
圖片品質59%及其以下時候，漸進JPEG圖片更小；品質60%及其以上，基本JPEG更小 |
 |
圖片品質82%及其以上時候，漸進JPEG圖片更小；品質81%及其以下，基本JPEG更小 |
 |
無論圖片品質多少，都是漸進JPEG圖片更小 |
不過，從概率學上講，大多數情況下，漸進式JPEG比基本式圖片尺寸小一點。然而，其中的大小差異與原圖尺寸相比，不值一提，因此，所謂圖片大小不能作為兩種圖片選擇的依據。
下載呈現速度
一個名叫Ann Robson的人，最近對各個瀏覽器下漸進式圖片呈現做了測試。
下圖為FireFox瀏覽器下呈現速度的對比圖：
當大圖輪廓加載OK的時候，小圖最后一個乳豬還沒有出世面；而基本式乳豬圖還沒有開始加載！顯然，羅伯森是想告訴我們，漸進JPEG下載更快。
下表為其在各個瀏覽器下測試的結果：
| 瀏覽器 (特定測試版本) | 漸進jpeg前景渲染 | 漸進jpeg背景渲染 |
|---|---|---|
| Chrome (v 25.0.1323.1 dev Mac, 23.0.1271.97 m Win) | 漸進地 (相當快！) | 漸進地 (相當快！) |
| Firefox (v 15.0.1 Mac, 12.0 Win) | 漸進地 (相當快！) | 文件下載后立即地(慢) |
| Internet Explorer 8 | 文件下載后立即地(慢) | 文件下載后立即地(慢) |
| Internet Explorer 9 | 漸進地 (相當快！) | 文件下載后立即地(慢) |
| Safari (v 6.0 Desktop, v 6.0 Mobile) | 文件下載后立即地(慢) | 文件下載后立即地(慢) |
| Opera (v 11.60) | 文件下載后立即地(慢) | 文件下載后立即地(慢) |
結論很簡單，Chrome + Firefox + IE9瀏覽器下，漸進式圖片加載更快，而且是快很多，至於其他瀏覽器，與基本式圖片的加載一致，至少不會拖后腿。
Scott Gilbertson對漸進式圖片有其他的補充：
1. 你永遠不知道基本式圖片內容，除非他完全加載出來；
2. 漸進式圖片一開始大小框架就定好，不會像基本式圖片一樣，由於尺寸未設定而造成回流——提高的渲染性能；
3. 漸進式圖片也有不足，就是吃CPU吃內存。
內容就是這些，權衡使用在你手。一般而言，大尺寸圖片建議使用漸進式JPEG.
//zxx: png圖片也是可以漸進式呈現的
二、漸進式JPEG創建
photoshop生成
大伙都知道photoshop中有個“存儲為web所用格式”，那個連續勾選就是漸進式JPEG圖片了，還需要勾選那個轉換為sRGB選項，在某些瀏覽器下，圖像設置為CMYK會出現一些問題！
