887
Progressive JPEG圖片漸進加載方案
該文章來自阿裏巴巴技術協會（ATA）
背景
在Aliexpress買家版app中,圖片流量占到總流量90%，商品圖片顯示的快慢直接影響用戶對商品的興趣和下單，2G、3G、4G網絡流量消耗太多直接影響用戶的體驗。
所以大家一直在想各種方法來提高加載速度和節省流量,集團內不少團隊嚐試了webp和CDN 圖片多尺寸適配等方案做了不少工作，確實省了很多流量，但是也發現了一點問題，比如webp解碼時間是JPEG的1.5到2倍，編碼時間是JPEG的6到8倍，在網絡好的情況下，反而有副作用，有沒有更好的解決方案呢？
現狀
1、圖片在下載完成之後才顯示，等待時間比較長，沒有從模煳到清晰顯示。
2、在低分辨率機器沒有做適配，圖太大反而浪費流量。
3、在2G和弱網絡下麵等待時間比較長，下載一張圖片需要3秒，缺少極速模式。
4、缺少類似視頻網站的視頻質量選項，比如低質量、中等質量、高等質量。
2G網絡下的下載一張圖片需要3秒
webp 和PJPEG解碼耗時對比
PJPEG的漸進展示對比
圖片格式對比
以BaseLine JPEG 為基準對比
| 圖片格式 | 壓縮率 | 解碼耗時 | 編碼耗時 |
|---|---|---|---|
| webp | 比JPEG少20%~34%大小 | 是JPEG 1.5到2倍 | 是JPEG的6到8倍 |
| Progressive JPEG | 與JPEG一樣 | 與JPEG一樣 | 與JPEG一樣 |
PJPEG 20% 50%數據清晰度對比
可見20%數據已經可以看到稍微清晰的圖片，50%的數據時有較好的圖片
100%為原圖。
預期收益測算
圖片鏈接 https://www.reasoft.com/tutorials/web/img/progress.jpg
測試方式：打開飛行模式再打開網絡（清除DNS緩存），打開任意瀏覽器和網址，確保網絡連通，再測試圖片下載。
2G測試數據，
2G網絡下麵隻需要原來的30%的時間即可看到圖片
3G測試數據
3G網絡下麵隻需要原來的30%的時間即可看到圖片
WIFI測試數據
WIFI網絡下麵隻需要原來的40%的時間即可看到圖片
流量節省
在2G網絡和弱網絡下麵，提供極速模式，預期節省50%的流量
業務目標
1、圖片在下載過程中，從模煳到清晰漸進顯示，減少等待時間。
2、對不同機型的分辨率和屏幕密度做適配，下載不同尺寸圖片。
3、增加極速模式，在2G和弱網絡下麵，隻下載普通質量的圖片
4、增加不同圖片質量的選項給用戶
5、增加服務端策略可配置，結合用戶的選擇，重新製定策略
技術目標
1、對減少的時間和流量得到量化，甚至對跳出率和轉化率作對比
2、在listview和girdview中，對圖片刷新次數做控製，減少耗電
3、對下載過程產生的bitmap圖片使用inBitmap方法複用，減少內存消耗
4、簡潔的組件化接入，方便後麵直接拿出來給其他平台使用
4、嚴格避免耗電太多和內存泄露問題
最後更新：2017-04-01 13:44:32