隨著(zhù)web的發(fā)展，網(wǎng)站資源的流量也變得越來(lái)越大。據統計，60%的網(wǎng)站流量均來(lái)自網(wǎng)站圖片，可見(jiàn)對圖片合理優(yōu)化可以大幅影響網(wǎng)站流量，減小帶寬消耗和服務(wù)器壓力。

一、現有web圖片格式

我們先來(lái)看下現在常用的web圖片的格式：

幾種文件格式的特點(diǎn)概述

baseline-jpeg

這種類(lèi)型的JPEG文件存儲方式是按從上到下的掃描方式，把每一行順序的保存在JPEG文件中。打開(kāi)這個(gè)文件顯示它的內容時(shí)，數據將按照存儲時(shí)的順序從上到下一行一行的被顯示出來(lái)，直到所有的數據都被讀完，就完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡(luò )下載速度較慢，那么就會(huì )看到圖片被一行行加載的效果，這種格式的JPEG沒(méi)有什么優(yōu)點(diǎn)，因此，一般都推薦使用Progressive JPEG

preogressive-jpeg

和Baseline一遍掃描不同，Progressive JPEG文件包含多次掃描，這些掃描順尋的存儲在JPEG文件中。打開(kāi)文件過(guò)程中，會(huì )先顯示整個(gè)圖片的模糊輪廓，隨著(zhù)掃描次數的增加，圖片變得越來(lái)越清晰。這種格式的主要優(yōu)點(diǎn)是在網(wǎng)絡(luò )較慢的情況下，可以看到圖片的輪廓知道正在加載的圖片大概是什么。

__這兩種jpeg格式文件的效果對比如下：

jpeg優(yōu)勢： 非常通用，JPEG在色調及顏色平滑變化的相片或是寫(xiě)實(shí)繪畫(huà)（painting）上可以達到它最佳的效果。

jpeg劣勢： 它并不適合于線(xiàn)條繪圖（drawing）和其他文字或圖示（iconic）的圖形,因為它的壓縮方法用在這些圖形的型態(tài)上,會(huì )得到不適當的結果；

gif

GIF(Graphics Interchange Format)的原義是“圖像互換格式”，GIF文件的數據，是一種基于LZW算法(串表壓縮算法)連續色調的無(wú)損壓縮格式。是目前web網(wǎng)頁(yè)中十分常用的一種動(dòng)畫(huà)文件格式。 優(yōu)勢：

優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時(shí)將體積變得很小 可插入多幀,從而實(shí)現動(dòng)畫(huà)效果

可設置透明色以產(chǎn)生對象浮現于背景之上的效果

劣勢：　由于采用了8位壓縮,最多只能處理256種顏色（2的8次方）,故不宜應用于真彩圖像。

png

png文件分為png8(8位透明png)、png24(256色png)、png32(多階透明png)，png的有點(diǎn)在于使用位圖實(shí)現web上的透明圖片，以實(shí)現比較好的體驗。 

優(yōu)勢：

• 支持256色調色板技術(shù)以產(chǎn)生小體積文件
• 最高支持48位真彩色圖像以及16位灰度圖像。
• 支持Alpha通道的半透明特性。
• 支持圖像亮度的gamma校正信息。- 支持存儲附加文本信息,以保留圖像名稱(chēng)、作者、版權、創(chuàng )作時(shí)間、注釋等信息。
• 使用無(wú)損壓縮。
• 漸近顯示和流式讀寫(xiě),適合在網(wǎng)絡(luò )傳輸中快速顯示預覽效果后再展示全貌。
• 使用CRC循環(huán)冗余編碼防止文件出錯。
• 最新的PNG標準允許在一個(gè)文件內存儲多幅圖像。

劣勢：

• 但也有一些軟件不能使用適合的預測，生成的文件較大(IE6只支持PNG8)

webp

目前移動(dòng)端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）、opera 11+ 、safri均支持webp格式圖片。 WEBP與JPG相比較，編碼速度慢10倍，解碼速度慢1.5倍，而絕大部分的網(wǎng)絡(luò )應用中，圖片都是靜態(tài)文件，所以對于用戶(hù)使用只需要關(guān)心解碼速度即可。但實(shí)際上，webp雖然會(huì )增加額外的解碼時(shí)間，但是由于減少了文件體積，縮短了加載的時(shí)間，實(shí)際上文件的渲染速度反而變快了。

webp上目前可行的應用場(chǎng)景：

-1.客戶(hù)端軟件，內嵌了基于Chromium的webview，這類(lèi)瀏覽器中應用的網(wǎng)頁(yè)是可以完全使用webp格式，提升加載渲染速度，不考慮兼容。

-2.用node-webkit開(kāi)發(fā)的程序，用webp可以減少文件包的體積。

-3.移動(dòng)應用 或 網(wǎng)頁(yè)游戲 ,界面需要大量圖片,可以嵌入webp的解碼包,能夠節省用戶(hù)流量，提升訪(fǎng)問(wèn)速度優(yōu)勢：

- 對于png圖片,webp比png小了45%,但是缺點(diǎn)是你壓縮的時(shí)候需要的時(shí)間更久了；劣勢：

- 兼容性不太好, 只有opera,和chrome支持;

apng

簡(jiǎn)單來(lái)講apng格式圖片使用多個(gè)單張png連接起來(lái)的動(dòng)畫(huà)圖片格式，支持全透明通道動(dòng)畫(huà)。相比于gif動(dòng)畫(huà)，沒(méi)有毛刺，質(zhì)量更高，但目前支持的瀏覽器并不完全�？梢匀�can i use查看其兼容性。目前可用性相對較低，適用于對動(dòng)畫(huà)質(zhì)量要求很高的情況。

svg 是一種矢量圖片，支持透明，縮放，動(dòng)畫(huà)，除了android 2.3的手機，其它場(chǎng)景都支持，是一種比較好的圖片代替方案。 優(yōu)勢：

• 矢量圖形，不受像素影響——SVG的這個(gè)特性使得它在不同的平臺或者媒體下表現良好，無(wú)論屏幕分辨率如何
• SVG對動(dòng)畫(huà)的支持較好；其DOM結構可以被其特定語(yǔ)法或者Javascript控制，從而輕松的實(shí)現動(dòng)畫(huà)
• Javascript可以完全控制SVG Dom 元素
• SVG的結構是 XML，其可訪(fǎng)問(wèn)性（盲文、聲音朗讀等）、可操作性、可編程性、可被CSS樣式化完勝Canvas。另外，其支持 ARIA 屬性，使其如虎添翼。

劣勢：

• DOM比正常的圖形慢，而且如果其結點(diǎn)多而雜，就更慢了
• 不適合網(wǎng)頁(yè)游戲等；當然，我們可以結合 Canvas + SVG來(lái)實(shí)現

bpg

http://bellard.org/bpg/ 圖片畫(huà)質(zhì)比較 性能測試對比

BPG (Better Portable Graphics) 是一個(gè)新的圖片格式。用來(lái)代替jpeg和webp的方案。這種格式主要有以下特點(diǎn) 優(yōu)勢：

• 高壓縮比。在畫(huà)質(zhì)相同的情況下比jpeg小的多
• 使用一個(gè)很小的js解碼器就可以被瀏覽器支持
• 基于高清視頻壓縮標準 (HEVC) 一個(gè)子集開(kāi)發(fā)
• 支持和jpeg相同的色值，并且在有損壓縮的通知支持透明，
• 單通道支持8到14位色值區域
• 支持有損壓縮
• 可以添加更多的元數據編碼
• 支持動(dòng)畫(huà)
• 相近畫(huà)質(zhì)前提下比webp更小

性能：

• 根據mozilla的研究，bpg使用的HEVC編碼比原生的HEVC性能更好，因為BPG的頭部比HEVC的頭部更小
• 支持4:2:2和4:2:0的色值設置
• BPG可以用于硬件上支持HEVC編解碼器

這種圖片格式目前還沒(méi)有被瀏覽器支持，需要js解碼，但其優(yōu)勢非常明顯。

另外還有mozjpg、sharpP的圖片格式，由于目前仍在起步階段，這里暫不介紹了，有興趣的可以去跟進(jìn)了解下。

二、前端的圖片優(yōu)化方案

使用base64編碼代替圖片

場(chǎng)景：適用于圖片大小小于2KB，頁(yè)面上引用圖片總數不多的情況

原理：將圖片轉換為base64編碼字符串inline到頁(yè)面或css中

優(yōu)勢：減少http的請求次數，并可以放到后臺數據庫中，只傳輸字符串，有較多的構建工具可以直接實(shí)現

劣勢：這種方法僅限于圖片總數較少，而且圖片大小小于2KB的情況。否則圖片字符串會(huì )變得很長(cháng)很長(cháng)

合并圖片sprite(雪碧圖)

場(chǎng)景：任何用到頁(yè)面圖片的場(chǎng)景

原理：將多個(gè)頁(yè)面上用到的背景圖片合并成一個(gè)大的圖片在頁(yè)面中引用

優(yōu)勢：可以有效的較少請求個(gè)數，而且，而不影響開(kāi)發(fā)體驗，使用構建插件可以做到對開(kāi)發(fā)者透明。適用于頁(yè)面圖片多且豐富的場(chǎng)景。

劣勢：生成的圖片體積較大，減少請求個(gè)數同時(shí)也增加了圖片大小，不合理拆分將不利于并行加載

使用css、svg、canvas或iconfont代替圖片

css代替圖片

場(chǎng)景：適用于移動(dòng)端或較高級的瀏覽器，而且繪制的圖案較為簡(jiǎn)單。

原理：css方式可以用來(lái)繪制相對簡(jiǎn)單的團來(lái)代替圖片，一般使用before或者after偽元素來(lái)豐富圖案的復雜度。

優(yōu)勢：具有實(shí)現簡(jiǎn)單，圖片體積小的特點(diǎn)，可以實(shí)現簡(jiǎn)單的動(dòng)態(tài)效果

劣勢：也受限于css的兼容性特點(diǎn)，繪制復雜圖案困難

svg的描述和適用場(chǎng)景上文已說(shuō)明。

canvas代替圖片

場(chǎng)景：需要高性能的圖片或動(dòng)畫(huà)

原理：適用html5的canvas元素繪制創(chuàng )建圖片

優(yōu)勢：整個(gè)就是畫(huà)2D圖形時(shí)，頁(yè)面渲染性能比較高，頁(yè)面渲染性能受圖形復雜度影響小，性能只受圖形的分辨率的影響，畫(huà)出來(lái)的圖形可以直接保存為 .png 或者 .jpg的圖形，適合于畫(huà)光柵圖像或者不規則圖形

劣勢：沒(méi)有dom操作，必須依賴(lài)定時(shí)器，文字渲染性能差，不能添加描述(title屬性什么的)，兼容性限制

iconfont是一種web字體來(lái)代替圖片的解決方案： 場(chǎng)景：代替頁(yè)面上色彩單一的圖片 優(yōu)勢：兼容性好，應用廣，目前使用也很廣泛 劣勢：但是由于字體的顏色設置單一，只能用于代替顏色單一的圖片，對于色彩復雜的圖片，iconfont處理起來(lái)比較困難

響應式圖片

場(chǎng)景：不同終端對同一個(gè)圖片需求不一樣，可以根據終端加載不同的圖片來(lái)節省沒(méi)必要的流量

原理：通過(guò)picture元素，picturefill或平臺判斷來(lái)為不同終端平臺輸出不同的圖片

優(yōu)勢：減少沒(méi)必要的圖片加載，靈活控制，慢速用戶(hù)加載小圖片不至于加載失敗，移動(dòng)端沒(méi)必要加載大尺寸圖片等，可以通過(guò)不同方式兼容所有瀏覽器

劣勢：無(wú)法避免圖片的加載過(guò)程，圖片本身沒(méi)優(yōu)化

圖片壓縮

場(chǎng)景：在不得不加載圖片的前提下，要進(jìn)一步提升優(yōu)化效果，只能通過(guò)有損或無(wú)損壓縮來(lái)減少圖片的大小。

原理：對圖片進(jìn)行無(wú)損、有損壓縮，轉為壓縮后圖片來(lái)實(shí)現

優(yōu)勢：減少圖片加載流量，效果比較明顯

劣勢：服務(wù)器和瀏覽器壓力增大，而且服務(wù)器需要額外的服務(wù)支持

更好的圖片格式

場(chǎng)景：之前說(shuō)到webp、bpg、sharpP等新圖片格式具有更好的壓縮比，可以使用這類(lèi)新型的圖片來(lái)代替原始圖片

原理：對圖片格式轉換，在畫(huà)質(zhì)可以接受的情況下達到更好的壓縮比效果

優(yōu)勢：減少圖片加載流量，效果比較明顯

劣勢：服務(wù)器和瀏覽器壓力增大，而且服務(wù)器需要額外的服務(wù)支持，格式轉換要考慮瀏覽器的兼容性

三、圖片壓縮

壓縮圖片方式比較多，這里不一一列出，例如下面的部分工具平臺：

Kraken (Web)主頁(yè)： https://kraken.io/

智圖主頁(yè)： http://zhitu.tencent.com/支持原圖png轉為jpeg和webp(目前不支持bpg)，并提供各種壓縮比壓縮，目前在tx內部廣泛使用。

目前bpg格式圖片也有部分公司在試用。這方面也可以嘗試下。

四、小結

上面提供了web圖片的一些格式特點(diǎn)和圖片優(yōu)化的可行方案，具體的場(chǎng)景需要考慮選擇不同的方式來(lái)進(jìn)行優(yōu)化。當然常見(jiàn)的優(yōu)化思路為：頁(yè)面靜態(tài)資源圖片使用css，canvas，svg，iconfont，sprite，base64來(lái)優(yōu)化，后臺返回的數據資源圖片則通過(guò)響應式、圖片壓縮來(lái)優(yōu)化，同時(shí)盡可能考慮使用新的更高壓縮比的圖片來(lái)做圖片轉化，例如webp、bpg。

    明尚互聯(lián)是一家專(zhuān)業(yè)網(wǎng)站建設公司，以“展現型網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站、相應式網(wǎng)站、手機網(wǎng)站、信息平臺網(wǎng)站、商城網(wǎng)站”為主，以完善的辦事、良好的信用辦事于當局、教導、動(dòng)力、金融、企業(yè)等多個(gè)重點(diǎn)行業(yè)用戶(hù)，為各行業(yè)客戶(hù)供給業(yè)余的收集綜合信息化辦事和全方位的電子商務(wù)解決方案，努力幫忙客戶(hù)創(chuàng )立完善的互聯(lián)網(wǎng)信息平臺，應用互聯(lián)網(wǎng)技巧擴展商機，為客戶(hù)信息化成長(cháng)和營(yíng)業(yè)拓展發(fā)明更高代價(jià)。