起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識智圖—源于QQ空間圖片WebP化的思考
【序言】
前段時間QQ空間的前端團隊針對空間做了一番流量帶寬優(yōu)化，其中包括在空間裝飾頭圖中應用WebP格式的圖片。其實很早之前空間的相冊就已經(jīng)接入了 WebP格式的圖片，由于支持度還不是很高，所以其他產(chǎn)品線也一直沒應用，這次實施也帶動了其他產(chǎn)品的前端同學們重新對這一塊領域進行優(yōu)化。于是我們產(chǎn)生 了制作一套完整的前端圖片優(yōu)化方案的想法，智圖系統(tǒng)因此應運而生。
先上兩張圖，對比一下WebP格式圖片的壓縮威力。
【智圖】（http://zhitu.tencent.com）
所謂智圖，我 們將之稱為Smart Image，智能圖片優(yōu)化平臺，其實是智能轉(zhuǎn)換圖片格式的簡稱。這里可能有人會提出疑問，轉(zhuǎn)換圖片格式，不就是JPEG To PNG 或者 PNG To JPEG嘛。是的，但我們在壓縮圖片的時候，往往根據(jù)以往經(jīng)驗或感覺去壓然后反復比較，在質(zhì)量和體積間難以達到平衡，而有了智圖，你不需要再猶豫，把圖片 交給智圖，智圖自動識別最優(yōu)格式并壓縮處理。其實我們知道圖片都是有一定壓縮空間的，并且一張圖片合適的格式取決于圖片的尺寸，色值，透明度等屬性。智圖 就是根據(jù)一張圖片的上述屬性，進行對比判斷，輸出合適的圖片格式并進行壓縮的一個圖片優(yōu)化平臺。使用智圖，你可以：
- 更優(yōu)——為你的圖片智能選擇合適的圖片格式
- 更快——為你壓縮圖片以便節(jié)省帶寬優(yōu)化體驗
- 更高——為你提供WebP圖片讓你的站點高大上
【功能】
首先看下智圖系統(tǒng)的界面
從主界面中我們大致可以看出智圖分為以下幾個功能模塊：
- 圖片同向?qū)Ρ?/li>
- 圖片壓縮（可手動選擇壓縮比）
- 圖片格式轉(zhuǎn)換（JPEG轉(zhuǎn)PNG或PNG轉(zhuǎn)JPEG）
- 圖片WebP化
- 圖片批量處理
下面我們通過一個例子來闡述這個智圖流程。請看下圖：
從上圖的例子看出來，在體積這一塊幾種結(jié)果的圖片是呈現(xiàn)梯度變化的，首先原圖經(jīng)過壓縮成了智圖JPEG，其次原圖通過圖片各項屬性的判斷，程序認為PNG 格式的圖片更優(yōu)，于是選擇轉(zhuǎn)換一張PNG格式的圖片，最后為所上傳的圖片生成一張WebP格式的圖片，這就是智圖整個大致的處理流程，其中由JPEG轉(zhuǎn)成 PNG（或者從PNG轉(zhuǎn)成JPEG）這一步程序可能會執(zhí)行，也可能不會執(zhí)行，具體的算法是依據(jù)該圖片的多樣屬性來判斷的。那我們來看看都有哪些屬性影響了 我們的圖片最終格式：
a. 圖片的透明度：一張PNG?半透明的圖片，如果轉(zhuǎn)成JPEG或者PNG?8格式了，那半透明效果會成為灰度模塊，這絕對是用戶不能接受的，所以只有不包含半透明元素的圖片才會被轉(zhuǎn)換格式。
像這樣帶圓角的半透明圖片，可使用PNG?無損（有損）壓縮，或者直接轉(zhuǎn)換為帶alpha的PNG?8圖片格式。
b. 圖片的色值：前面說過，色值豐富的圖片，使用JPEG格式會體積會更小，所以當判斷一張圖片的色彩值比較多的時候，程序可能會由將圖片由PNG?轉(zhuǎn)為JPEG，反之亦可。
大家都知道PNG?8的像素存儲量只有2的8次方，256個，如果一張顏色豐富的圖片轉(zhuǎn)成PNG?8格式的圖片，那必定會由于存儲量不夠而導致某些色彩丟 失，這就是失真。事實上，當我們的肉眼看一張圖片的時候，會覺得這張圖片不就是黃色而已嗎，其實追溯到每一個像素點上，我們會發(fā)現(xiàn)，其實這張圖片里面，密 密麻麻分布著各種各樣的顏色值或透明度。有一種最傻的方法去獲取這些色值總量——那就是逐個像素點去讀。
c. 圖片的面積：圖片的面積可能影響面不大，但畢竟圖片都是像素點算的，想想一張1600*1600的圖片，每個像素稍微有點透明度的變化，那圖片的色值就會非常多了。對于比較小的圖片（譬如100*100這種icon級別或者頭像級別的），也許選擇PNG?8格式會比較適合。
d. 圖片的質(zhì)量：這里指的質(zhì)量，可以理解為圖片在PS里面導出來 時候選的那個品質(zhì)，無損的話這個值便是100。對于程序而言，每張圖片都有這樣一個屬性值，它和PS里的值不完全對應上，但是也有一定的關系。比如說PS 里的70%的質(zhì)量在程序讀到的值不是70，而可能是91,75可能對應著93等等。研究表明，一般的有損壓縮圖片，這個壓縮比的值保持在70-80之間便 足夠了 ，當然為了追求更小的體積，我們可能將這個值調(diào)小。
【壓縮】
對于圖片的壓縮，最常見的分有損，無損壓縮。無損壓縮譬如去除exif信息，重新排列像素存儲方式等，有損壓縮譬如合并相似像素，減少可見像素點等?，F(xiàn)在 這些壓縮算法都可以用現(xiàn)成的成熟的庫實現(xiàn)，以PHP為例子，可以使用pngcrush做PNG?的無損壓縮，pngquant做PNG?的有損壓縮。 JPEG可使用imageMagick和jpegtran。這里推薦下imageMagick，相對于其他圖片處理的庫，這個庫可控制的功能更多，并且支 持多種編程語言。
智圖不僅僅是針對JPEG和PNG?去壓縮，也會根據(jù)圖片的屬性（透明度，色值，面積，質(zhì)量等）去判斷該圖片是否適合轉(zhuǎn)換圖片格式，這才是智圖想要體現(xiàn)的地方，用戶再也不用去擔心要生成什么樣的圖片了。同時為了不強制使用圖片格式，智圖也會為原格式的圖片做處理。
【W(wǎng)ebP化】
圖片WebP化是智圖的另一亮點，也許現(xiàn)在這種chrome內(nèi)核專用的圖片格式還不那么流行，但是我們完全可以根據(jù)WebP的特點來做瀏覽器的優(yōu)雅降級。
由于WebP支持有損無損壓縮，同時也支持半透明，所以他完全可以在高級瀏覽器中代替PNG?或者JPEG。淘寶的廣告圖和空間的相冊浮層，QQ會員算是 比較早應用WebP圖片，這里空間裝扮全量支持WebP的一個很大原因，是因為多數(shù)的空間用戶使用360瀏覽器來訪問空間，而360瀏覽器是雙核的而且還默認使用chrome內(nèi)核。而我們這里做的降級很簡單，支持WebP的使用，不支持的還是使用JPEG或者PNG?圖片。
【批量化】
如果你要處理的圖片比較大，沒關系，智圖支持批量處理，我們會將批量處理完之后的圖片打包提供給您下載。
【API】
基于平時需求中大量需要圖片的壓縮，我們也制作了基于glup的本地插件。詳情可查看智圖glup插件
【后序】
事實上，在圖片的優(yōu)化方面，各大瀏覽器廠家和研究人員都在很努力地嘗試更好更優(yōu)的算法，像firefox也有屬于自己APNG格式的圖片，微軟也有自己 WMP。智圖系統(tǒng)其實也只是站在這些巨人的肩膀上做一些邏輯上的優(yōu)化選擇，但推動這些優(yōu)化的發(fā)展總要一步一個腳印，現(xiàn)在越來越多的團隊也意識到WebP格 式的優(yōu)越性，也嘗試著去應用，相信在不久的將來，這些后起之秀，一定可以在圖像領域發(fā)揮其重要作用，節(jié)約我們的成本，提升我們的體驗。
最后在大量圖片壓縮測試之后得出結(jié)論，智圖在圖片壓縮方面，JPEG圖片可壓縮體積20%左右，PNG可壓縮體積35%左右，WebP可壓縮30%左右。
目前在海量級業(yè)務QQ空間、微信、京東以及原創(chuàng)館多個項目均已應用了智圖系統(tǒng)的壓縮機制。
原文來自： 騰訊ISUX
- 目前還沒評論，等你發(fā)揮！
