WEB前端優化：使用“漸進”圖片或“交錯”圖片

　　一、簡介  

      JPEG、GIF和PNG這三種影像格式都提供了一種功能，讓影像能夠更快地顯示。影像可以以一種特殊方式儲存，顯示時先大概顯示影像的草圖，當檔案全部下載後再填充細節（百度圖片，QQ空間，點點網等顯示大圖時都使用的這種方式）。這起到一種很有意義的心理效果，因為這樣使人們有東西可看，而不必坐著乾等大型影像慢慢顯示在螢幕上。但這種效果並不是所有瀏覽器都支援。

　　在測試各個瀏覽器（未說明都為最新版本）時發現：

　　1、Chrome對“漸進”和“交錯”都支援良好

　　2、Safari(PC/MAC)對“漸進”不支援，“交錯支援良好”

　　3、Fiefox對“漸進”和“交錯”都支援良好

　　4、Opera對“漸進”和“交錯”都支援良好

　　5、IE9對“漸進”和“交錯”都不支援

　　測試地址：Interlace_test

　　圖一：基本顯示效果演示

  

　　圖二：漸進\交錯顯示效果演示

  

　　上圖一：

　　圖一中我們可以發現圖片是從上倒下一條一條逐漸載入的，顯示效果如圖一的這種JPG壓縮模式叫做順序式編碼（Sequential Encoding），一次將影像由左到右、由上到下順序處理。也是一種常見的JPG編碼模式。

　　上圖二：

　　圖二中我們可以發現同樣是一樣圖片，因為圖片較大圖，要逐漸載入完我們才知道這張圖片的大致輪廓，但是在圖二上，由於使用了漸進式JPG格式，在圖片載入的時候我們已經可以看到了圖片的大致輪廓，這種就是漸進式JPG，使用了遞增式編碼（Progressive Encoding）。

　　所以？

　　所謂的漸進式JPG格式就是採用了遞增式編碼的JPG，你可以通過谷歌搜尋關鍵字JPG Progressive Encoding查的更多英文的資料，因為我發現國內這方面的介紹不是很多。

　　這種JPG格式是當影像傳輸的時間較長時，可將影像分數次處理，以從模糊到清晰的方式來傳送影像（效果類似GIF在網路上的傳輸）。

　　二、漸進式JPEG建立

　　1. php轉換

　　據說是如下的程式碼：  

<?php
$image = imagecreatefromjpeg($this->attach['target']);
//imagefilter($image, IMG_FILTER_MEAN_REMOVAL);
imageinterlace($image, 1);//php的GD庫中自帶的函式
imagejpeg($image,$this->attach['target']);//生成相應圖片
imagedestroy($image);
?>

　　其他語言的轉換自己去搜吧。

　　2. photoshop生成

　　大夥都知道photoshop中有個“儲存為web所用格式”，然後，其中（見下圖），那個連續勾選就是漸進式JPEG圖片了：

　　據說，需要勾選那個轉換為sRGB選項，在某些瀏覽器下，影像設定為CMYK會出現一些問題！

　　總結

　　Scott Gilbertson對漸進式圖片有其他的補充：

　　1. 你永不知道基本式圖片內容，除非他完全載入出來；

　　2. 漸進式圖片一開始大小框架就定好，不會像基本式圖片一樣，由於尺寸未設定而造成迴流——提高的渲染效能；

　　3. 漸進式圖片也有不足，就是吃CPU吃記憶體。