前段時(shí)間QQ空間的前端團(tuán)隊(duì)針對(duì)空間做了一番流量帶寬優(yōu)化，其中包括在空間裝飾頭圖中應(yīng)用WebP格式的圖片。其實(shí)很早之前空間的相冊(cè)就已經(jīng)接入了 WebP格式的圖片，由于支持度還不是很高，所以其他產(chǎn)品線也一直沒(méi)應(yīng)用，這次實(shí)施也帶動(dòng)了其他產(chǎn)品的前端同學(xué)們重新對(duì)這一塊領(lǐng)域進(jìn)行優(yōu)化。于是我們產(chǎn)生 了制作一套完整的前端圖片優(yōu)化方案的想法，智圖系統(tǒng)因此應(yīng)運(yùn)而生。
先上兩張圖，對(duì)比一下WebP格式圖片的壓縮威力。

【智圖】（http://zhitu.tencent.com）

所謂智圖，我 們將之稱為Smart Image，智能圖片優(yōu)化平臺(tái)，其實(shí)是智能轉(zhuǎn)換圖片格式的簡(jiǎn)稱。這里可能有人會(huì)提出疑問(wèn)，轉(zhuǎn)換圖片格式，不就是JPEG To PNG 或者 PNG To JPEG嘛。是的，但我們?cè)趬嚎s圖片的時(shí)候，往往根據(jù)以往經(jīng)驗(yàn)或感覺(jué)去壓然后反復(fù)比較，在質(zhì)量和體積間難以達(dá)到平衡，而有了智圖，你不需要再猶豫，把圖片 交給智圖，智圖自動(dòng)識(shí)別最優(yōu)格式并壓縮處理。其實(shí)我們知道圖片都是有一定壓縮空間的，并且一張圖片合適的格式取決于圖片的尺寸，色值，透明度等屬性。智圖 就是根據(jù)一張圖片的上述屬性，進(jìn)行對(duì)比判斷，輸出合適的圖片格式并進(jìn)行壓縮的一個(gè)圖片優(yōu)化平臺(tái)。使用智圖，你可以：

• 更優(yōu)——為你的圖片智能選擇合適的圖片格式
• 更快——為你壓縮圖片以便節(jié)省帶寬優(yōu)化體驗(yàn)
• 更高——為你提供WebP圖片讓你的站點(diǎn)高大上

【功能】

首先看下智圖系統(tǒng)的界面

從主界面中我們大致可以看出智圖分為以下幾個(gè)功能模塊：

1. 圖片同向?qū)Ρ?/li>
2. 圖片壓縮（可手動(dòng)選擇壓縮比）
3. 圖片格式轉(zhuǎn)換（JPEG轉(zhuǎn)PNG或PNG轉(zhuǎn)JPEG）
4. 圖片WebP化
5. 圖片批量處理

下面我們通過(guò)一個(gè)例子來(lái)闡述這個(gè)智圖流程。請(qǐng)看下圖：

從上圖的例子看出來(lái)，在體積這一塊幾種結(jié)果的圖片是呈現(xiàn)梯度變化的，首先原圖經(jīng)過(guò)壓縮成了智圖JPEG，其次原圖通過(guò)圖片各項(xiàng)屬性的判斷，程序認(rèn)為PNG 格式的圖片更優(yōu)，于是選擇轉(zhuǎn)換一張PNG格式的圖片，最后為所上傳的圖片生成一張WebP格式的圖片，這就是智圖整個(gè)大致的處理流程，其中由JPEG轉(zhuǎn)成 PNG（或者從PNG轉(zhuǎn)成JPEG）這一步程序可能會(huì)執(zhí)行，也可能不會(huì)執(zhí)行，具體的算法是依據(jù)該圖片的多樣屬性來(lái)判斷的。那我們來(lái)看看都有哪些屬性影響了 我們的圖片最終格式：

a. 圖片的透明度：一張PNG?半透明的圖片，如果轉(zhuǎn)成JPEG或者PNG?8格式了，那半透明效果會(huì)成為灰度模塊，這絕對(duì)是用戶不能接受的，所以只有不包含半透明元素的圖片才會(huì)被轉(zhuǎn)換格式。

像這樣帶圓角的半透明圖片，可使用PNG?無(wú)損（有損）壓縮，或者直接轉(zhuǎn)換為帶alpha的PNG?8圖片格式。

b. 圖片的色值：前面說(shuō)過(guò)，色值豐富的圖片，使用JPEG格式會(huì)體積會(huì)更小，所以當(dāng)判斷一張圖片的色彩值比較多的時(shí)候，程序可能會(huì)由將圖片由PNG?轉(zhuǎn)為JPEG，反之亦可。

大家都知道PNG?8的像素存儲(chǔ)量只有2的8次方，256個(gè)，如果一張顏色豐富的圖片轉(zhuǎn)成PNG?8格式的圖片，那必定會(huì)由于存儲(chǔ)量不夠而導(dǎo)致某些色彩丟 失，這就是失真。事實(shí)上，當(dāng)我們的肉眼看一張圖片的時(shí)候，會(huì)覺(jué)得這張圖片不就是黃色而已嗎，其實(shí)追溯到每一個(gè)像素點(diǎn)上，我們會(huì)發(fā)現(xiàn)，其實(shí)這張圖片里面，密 密麻麻分布著各種各樣的顏色值或透明度。有一種最傻的方法去獲取這些色值總量——那就是逐個(gè)像素點(diǎn)去讀。

c. 圖片的面積：圖片的面積可能影響面不大，但畢竟圖片都是像素點(diǎn)算的，想想一張1600*1600的圖片，每個(gè)像素稍微有點(diǎn)透明度的變化，那圖片的色值就會(huì)非常多了。對(duì)于比較小的圖片（譬如100*100這種icon級(jí)別或者頭像級(jí)別的），也許選擇PNG?8格式會(huì)比較適合。

d. 圖片的質(zhì)量：這里指的質(zhì)量，可以理解為圖片在PS里面導(dǎo)出來(lái) 時(shí)候選的那個(gè)品質(zhì)，無(wú)損的話這個(gè)值便是100。對(duì)于程序而言，每張圖片都有這樣一個(gè)屬性值，它和PS里的值不完全對(duì)應(yīng)上，但是也有一定的關(guān)系。比如說(shuō)PS 里的70%的質(zhì)量在程序讀到的值不是70，而可能是91,75可能對(duì)應(yīng)著93等等。研究表明，一般的有損壓縮圖片，這個(gè)壓縮比的值保持在70-80之間便 足夠了 ，當(dāng)然為了追求更小的體積，我們可能將這個(gè)值調(diào)小。

【壓縮】

對(duì)于圖片的壓縮，最常見(jiàn)的分有損，無(wú)損壓縮。無(wú)損壓縮譬如去除exif信息，重新排列像素存儲(chǔ)方式等，有損壓縮譬如合并相似像素，減少可見(jiàn)像素點(diǎn)等。現(xiàn)在 這些壓縮算法都可以用現(xiàn)成的成熟的庫(kù)實(shí)現(xiàn)，以PHP為例子，可以使用pngcrush做PNG?的無(wú)損壓縮，pngquant做PNG?的有損壓縮。 JPEG可使用imageMagick和jpegtran。這里推薦下imageMagick，相對(duì)于其他圖片處理的庫(kù)，這個(gè)庫(kù)可控制的功能更多，并且支 持多種編程語(yǔ)言。

智圖不僅僅是針對(duì)JPEG和PNG?去壓縮，也會(huì)根據(jù)圖片的屬性（透明度，色值，面積，質(zhì)量等）去判斷該圖片是否適合轉(zhuǎn)換圖片格式，這才是智圖想要體現(xiàn)的地方，用戶再也不用去擔(dān)心要生成什么樣的圖片了。同時(shí)為了不強(qiáng)制使用圖片格式，智圖也會(huì)為原格式的圖片做處理。

【W(wǎng)ebP化】

圖片WebP化是智圖的另一亮點(diǎn)，也許現(xiàn)在這種chrome內(nèi)核專用的圖片格式還不那么流行，但是我們完全可以根據(jù)WebP的特點(diǎn)來(lái)做瀏覽器的優(yōu)雅降級(jí)。

由于WebP支持有損無(wú)損壓縮，同時(shí)也支持半透明，所以他完全可以在高級(jí)瀏覽器中代替PNG?或者JPEG。淘寶的廣告圖和空間的相冊(cè)浮層，QQ會(huì)員算是 比較早應(yīng)用WebP圖片，這里空間裝扮全量支持WebP的一個(gè)很大原因，是因?yàn)槎鄶?shù)的空間用戶使用360瀏覽器來(lái)訪問(wèn)空間，而360瀏覽器是雙核的而且還默認(rèn)使用chrome內(nèi)核。而我們這里做的降級(jí)很簡(jiǎn)單，支持WebP的使用，不支持的還是使用JPEG或者PNG?圖片。

【批量化】

如果你要處理的圖片比較大，沒(méi)關(guān)系，智圖支持批量處理，我們會(huì)將批量處理完之后的圖片打包提供給您下載。

【API】

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

【后序】

事實(shí)上，在圖片的優(yōu)化方面，各大瀏覽器廠家和研究人員都在很努力地嘗試更好更優(yōu)的算法，像firefox也有屬于自己APNG格式的圖片，微軟也有自己 WMP。智圖系統(tǒng)其實(shí)也只是站在這些巨人的肩膀上做一些邏輯上的優(yōu)化選擇，但推動(dòng)這些優(yōu)化的發(fā)展總要一步一個(gè)腳印，現(xiàn)在越來(lái)越多的團(tuán)隊(duì)也意識(shí)到WebP格 式的優(yōu)越性，也嘗試著去應(yīng)用，相信在不久的將來(lái)，這些后起之秀，一定可以在圖像領(lǐng)域發(fā)揮其重要作用，節(jié)約我們的成本，提升我們的體驗(yàn)。

最后在大量圖片壓縮測(cè)試之后得出結(jié)論，智圖在圖片壓縮方面，JPEG圖片可壓縮體積20%左右，PNG可壓縮體積35%左右，WebP可壓縮30%左右。

目前在海量級(jí)業(yè)務(wù)QQ空間、微信、京東以及原創(chuàng)館多個(gè)項(xiàng)目均已應(yīng)用了智圖系統(tǒng)的壓縮機(jī)制。