前段時間QQ空間的前端團隊針對空間做了一番流量帶寬優化，其中包括在空間裝飾頭圖中應用WebP格式的圖片。其實很早之前空間的相冊就已經接入了WebP格式的圖片，由于支持度還不是很高，所以其他產品線也一直沒應用，這次實施也帶動了其他產品的前端同學們重新對這一塊領域進行優化。于是我們產生了制作一套完整的前端圖片優化方案的想法，智圖系統因此應運而生。 先上兩張圖，對比一下WebP格式圖片的壓縮威力。

【智圖】（http://zhitu.tencent.com） 所謂智圖，我們將之稱為Smart Image，智能圖片優化平臺，其實是智能轉換圖片格式的簡稱。這里可能有人會提出疑問，轉換圖片格式，不就是JPEG To PNG 或者 PNG To JPEG嘛。是的，但我們在壓縮圖片的時候，往往根據以往經驗或感覺去壓然后反復比較，在質量和體積間難以達到平衡，而有了智圖，你不需要再猶豫，把圖片交給智圖，智圖自動識別最優格式并壓縮處理。其實我們知道圖片都是有一定壓縮空間的，并且一張圖片合適的格式取決于圖片的尺寸，色值，透明度等屬性。智圖就是根據一張圖片的上述屬性，進行對比判斷，輸出合適的圖片格式并進行壓縮的一個圖片優化平臺。使用智圖，你可以：

更優——為你的圖片智能選擇合適的圖片格式 更快——為你壓縮圖片以便節省帶寬優化體驗 更高——為你提供WebP圖片讓你的站點高大上 【功能】 首先看下智圖系統的界面 從主界面中我們大致可以看出智圖分為以下幾個功能模塊： 1.圖片同向對比 2.圖片壓縮（可手動選擇壓縮比） 3.圖片格式轉換（JPEG轉PNG或PNG轉JPEG） 4.圖片WebP化 5.圖片批量處理 下面我們通過一個例子來闡述這個智圖流程。請看下圖： a 從上圖的例子看出來，在體積這一塊幾種結果的圖片是呈現梯度變化的，首先原圖經過壓縮成了智圖JPEG，其次原圖通過圖片各項屬性的判斷，程序認為PNG格式的圖片更優，于是選擇轉換一張PNG格式的圖片，最后為所上傳的圖片生成一張WebP格式的圖片，這就是智圖整個大致的處理流程，其中由JPEG轉成PNG（或者從PNG轉成JPEG）這一步程序可能會執行，也可能不會執行，具體的算法是依據該圖片的多樣屬性來判斷的。那我們來看看都有哪些屬性影響了我們的圖片最終格式： a. 圖片的透明度：一張PNG 半透明的圖片，如果轉成JPEG或者PNG 8格式了，那半透明效果會成為灰度模塊，這絕對是用戶不能接受的，所以只有不包含半透明元素的圖片才會被轉換格式。 像這樣帶圓角的半透明圖片，可使用PNG 無損（有損）壓縮，或者直接轉換為帶alpha的PNG 8圖片格式。 b. 圖片的色值：前面說過，色值豐富的圖片，使用JPEG格式會體積會更小，所以當判斷一張圖片的色彩值比較多的時候，程序可能會由將圖片由PNG 轉為JPEG，反之亦可。 大家都知道PNG 8的像素存儲量只有2的8次方，256個，如果一張顏色豐富的圖片轉成PNG 8格式的圖片，那必定會由于存儲量不夠而導致某些色彩丟失，這就是失真。事實上，當我們的肉眼看一張圖片的時候，會覺得這張圖片不就是黃色而已嗎，其實追溯到每一個像素點上，我們會發現，其實這張圖片里面，密密麻麻分布著各種各樣的顏色值或透明度。有一種最傻的方法去獲取這些色值總量——那就是逐個像素點去讀。 c. 圖片的面積：圖片的面積可能影響面不大，但畢竟圖片都是像素點算的，想想一張1600*1600的圖片，每個像素稍微有點透明度的變化，那圖片的色值就會非常多了。對于比較小的圖片（譬如100*100這種icon級別或者頭像級別的），也許選擇PNG 8格式會比較適合。 d. 圖片的質量：這里指的質量，可以理解為圖片在PS里面導出來時候選的那個品質，無損的話這個值便是100。對于程序而言，每張圖片都有這樣一個屬性值，它和PS里的值不完全對應上，但是也有一定的關系。比如說PS里的70%的質量在程序讀到的值不是70，而可能是91,75可能對應著93等等。研究表明，一般的有損壓縮圖片，這個壓縮比的值保持在70-80之間便足夠了 ，當然為了追求更小的體積，我們可能將這個值調小。

【壓縮】 對于圖片的壓縮，最常見的分有損，無損壓縮。無損壓縮譬如去除exif信息，重新排列像素存儲方式等，有損壓縮譬如合并相似像素，減少可見像素點等。現在這些壓縮算法都可以用現成的成熟的庫實現，以php為例子，可以使用pngcrush做PNG 的無損壓縮，pngquant做PNG 的有損壓縮。JPEG可使用imageMagick和jpegtran。這里推薦下imageMagick，相對于其他圖片處理的庫，這個庫可控制的功能更多，并且支持多種編程語言。 智圖不僅僅是針對JPEG和PNG 去壓縮，也會根據圖片的屬性（透明度，色值，面積，質量等）去判斷該圖片是否適合轉換圖片格式，這才是智圖想要體現的地方，用戶再也不用去擔心要生成什么樣的圖片了。同時為了不強制使用圖片格式，智圖也會為原格式的圖片做處理。

【WebP化】 圖片WebP化是智圖的另一亮點，也許現在這種Chrome內核專用的圖片格式還不那么流行，但是我們完全可以根據WebP的特點來做瀏覽器的優雅降級。由于WebP支持有損無損壓縮，同時也支持半透明，所以他完全可以在高級瀏覽器中代替PNG 或者JPEG。淘寶的廣告圖和空間的相冊浮層，QQ會員算是比較早應用WebP圖片，這里空間裝扮全量支持WebP的一個很大原因，是因為多數的空間用戶使用360瀏覽器來訪問空間，而360瀏覽器是雙核的而且還默認使用chrome內核。而我們這里做的降級很簡單，支持WebP的使用，不支持的還是使用JPEG或者PNG 圖片。

【批量化】 如果你要處理的圖片比較大，沒關系，智圖支持批量處理，我們會將批量處理完之后的圖片打包提供給您下載。

【API】 基于平時需求中大量需要圖片的壓縮，我們也制作了基于glup的本地插件。 詳情可查看智圖glup插件

【后序】 事實上，在圖片的優化方面，各大瀏覽器廠家和研究人員都在很努力地嘗試更好更優的算法，像Firefox也有屬于自己APNG格式的圖片，微軟也有自己WMP。智圖系統其實也只是站在這些巨人的肩膀上做一些邏輯上的優化選擇，但推動這些優化的發展總要一步一個腳印，現在越來越多的團隊也意識到WebP格式的優越性，也嘗試著去應用，相信在不久的將來，這些后起之秀，一定可以在圖像領域發揮其重要作用，節約我們的成本，提升我們的體驗。 最后在大量圖片壓縮測試之后得出結論，智圖在圖片壓縮方面，JPEG圖片可壓縮體積20%左右，PNG可壓縮體積35%左右，WebP可壓縮30%左右。 目前在海量級業務QQ、QQ空間、微信、京東以及原創館多個項目均已應用了智圖系統的壓縮機制。