隨著web的發(fā)展，網(wǎng)站資源的流量也變得越來(lái)越大。據(jù)統(tǒng)計(jì)，60%的網(wǎng)站流量均來(lái)自網(wǎng)站圖片，可見(jiàn)對(duì)圖片合理優(yōu)化可以大幅影響網(wǎng)站流量，減小帶寬消耗和服務(wù)器壓力。
這種類型的JPEG文件存儲(chǔ)方式是按從上到下的掃描方式，把每一行順序的保存在JPEG文件中。打開(kāi)這個(gè)文件顯示它的內(nèi)容時(shí)，數(shù)據(jù)將按照存儲(chǔ)時(shí)的順序從上到下一行一行的被顯示出來(lái)，直到所有的數(shù)據(jù)都被讀完，完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡(luò)速度較慢，那么會(huì)看到圖片被一行行加載的效果，這種格式的JPEG沒(méi)有什么優(yōu)點(diǎn)，因此，一般都推薦使用Progressive JPEG。
和Baseline一遍掃描不同，Progressive JPEG文件包含多次掃描，這些掃描順尋的存儲(chǔ)在JPEG文件中。打開(kāi)文件過(guò)程中，會(huì)先顯示整個(gè)圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來(lái)越清晰。這種格式的主要優(yōu)點(diǎn)是在網(wǎng)絡(luò)較慢的情況下，可以看到圖片的輪廓知道正在加載的圖片大概是什么。
jpeg優(yōu)勢(shì)：?非常通用，JPEG在色調(diào)及顏色平滑變化的相片或是寫(xiě)實(shí)繪畫(huà)（painting）上可以達(dá)到它的效果。
jpeg劣勢(shì)：?它并不適合于線條繪圖（drawing）和其他文字或圖示（iconic）的圖形,因?yàn)樗膲嚎s方法用在這些圖形的型態(tài)上,會(huì)得到不適當(dāng)?shù)慕Y(jié)果；
GIF(Graphics?Interchange?Format)的原義是“圖像互換格式”，GIF文件的數(shù)據(jù)，是一種基于LZW算法(串表壓縮算法)連續(xù)色調(diào)的無(wú)損壓縮格式。是目前web網(wǎng)頁(yè)中十分常用的一種動(dòng)畫(huà)文件格式。
的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時(shí)將體積變得很小?可插入多幀,從而實(shí)現(xiàn)動(dòng)畫(huà)效果
可設(shè)置透明色以產(chǎn)生對(duì)象浮現(xiàn)于背景之上的效果
由于采用了8位壓縮,多只能處理256種顏色（2的8次方）,故不宜應(yīng)用于真彩圖像。
png文件分為png8(8位透明png)、png24(256色png)、png32(多階透明png)，png的有點(diǎn)在于使用位圖實(shí)現(xiàn)web上的透明圖片，以實(shí)現(xiàn)比較好的體驗(yàn)。?
支持256色調(diào)色板技術(shù)以產(chǎn)生小體積文件。
支持圖像亮度的gamma校正信息。-?支持存儲(chǔ)附加文本信息,以保留圖像名稱、作者、版權(quán)、創(chuàng)作時(shí)間、注釋等信息。
漸近顯示和流式讀寫(xiě),適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌。
使用CRC循環(huán)冗余編碼防止文件出錯(cuò)。
的PNG標(biāo)準(zhǔn)允許在一個(gè)文件內(nèi)存儲(chǔ)多幅圖像。
但也有一些軟件不能使用適合的預(yù)測(cè)，生成的文件較大(IE6只支持PNG8)。
場(chǎng)景：適用于圖片大小小于2KB，頁(yè)面上引用圖片總數(shù)不多的情況
原理：將圖片轉(zhuǎn)換為base64編碼字符串inline到頁(yè)面或css中
優(yōu)勢(shì)：減少http的請(qǐng)求次數(shù)，并可以放到后臺(tái)數(shù)據(jù)庫(kù)中，只傳輸字符串，有較多的構(gòu)建工具可以直接實(shí)現(xiàn)
劣勢(shì)：這種方法于圖片總數(shù)較少，而且圖片大小小于2KB的情況。否則圖片字符串會(huì)變得很長(zhǎng)很長(zhǎng)
場(chǎng)景：任何用到頁(yè)面圖片的場(chǎng)景
原理：將多個(gè)頁(yè)面上用到的背景圖片合并成一個(gè)大的圖片在頁(yè)面中引用
優(yōu)勢(shì)：可以有效的較少請(qǐng)求個(gè)數(shù)，而且，而不影響開(kāi)發(fā)體驗(yàn)，使用構(gòu)建插件可以做到對(duì)開(kāi)發(fā)者透明。適用于頁(yè)面圖片多且豐富的場(chǎng)景。
劣勢(shì)：生成的圖片體積較大，減少請(qǐng)求個(gè)數(shù)同時(shí)也增加了圖片大小，不合理拆分將不利于并行加載
3、使用css、svg、canvas或iconfont代替圖片
場(chǎng)景：適用于移動(dòng)端或較的瀏覽器，而且繪制的圖案較為簡(jiǎn)單。
原理：css方式可以用來(lái)繪制相對(duì)簡(jiǎn)單的團(tuán)來(lái)代替圖片，一般使用before或者after偽元素來(lái)豐富圖案的復(fù)雜度。
優(yōu)勢(shì)：具有實(shí)現(xiàn)簡(jiǎn)單，圖片體積小的特點(diǎn)，可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)效果
劣勢(shì)：也受限于css的兼容性特點(diǎn)，繪制復(fù)雜圖案困難。
場(chǎng)景：需要高性能的圖片或動(dòng)畫(huà)
原理：適用html5的canvas元素繪制創(chuàng)建圖片
優(yōu)勢(shì)：整個(gè)是畫(huà)2D圖形時(shí)，頁(yè)面渲染性能比較高，頁(yè)面渲染性能受圖形復(fù)雜度影響小，性能只受圖形的分辨率的影響，畫(huà)出來(lái)的圖形可以直接保存為?.png?或者?.jpg的圖形，適合于畫(huà)光柵圖像或者不規(guī)則圖形
劣勢(shì)：沒(méi)有dom操作，必須依賴定時(shí)器，文字渲染性能差，不能添加描述(title屬性什么的)，兼容性限制
iconfont是一種web字體來(lái)代替圖片的解決方案：?場(chǎng)景：代替頁(yè)面上色彩單一的圖片?優(yōu)勢(shì)：兼容性好，應(yīng)用廣，目前使用也很廣泛?劣勢(shì)：但是由于字體的顏色設(shè)置單一，只能用于代替顏色單一的圖片，對(duì)于色彩復(fù)雜的圖片，iconfont處理起來(lái)比較困難
場(chǎng)景：不同終端對(duì)同一個(gè)圖片需求不一樣，可以根據(jù)終端加載不同的圖片來(lái)節(jié)省沒(méi)必要的流量。
原理：通過(guò)picture元素，picturefill或平臺(tái)判斷來(lái)為不同終端平臺(tái)輸出不同的圖片。
優(yōu)勢(shì)：減少?zèng)]必要的圖片加載，靈活控制，慢速用戶加載小圖片不至于加載失敗，移動(dòng)端沒(méi)必要加載大尺寸圖片等，可以通過(guò)不同方式兼容所有瀏覽器。
劣勢(shì)：無(wú)法避免圖片的加載過(guò)程，圖片本身沒(méi)優(yōu)化。
場(chǎng)景：在不得不加載圖片的前提下，要進(jìn)一步提升優(yōu)化效果，只能通過(guò)有損或無(wú)損壓縮來(lái)減少圖片的大小。
原理：對(duì)圖片進(jìn)行無(wú)損、有損壓縮，轉(zhuǎn)為壓縮后圖片來(lái)實(shí)現(xiàn)。
優(yōu)勢(shì)：減少圖片加載流量，效果比較明顯。
劣勢(shì)：服務(wù)器和瀏覽器壓力增大，而且服務(wù)器需要額外的服務(wù)支持。
上面提供了web圖片的一些格式特點(diǎn)和圖片優(yōu)化的可行方案，具體的場(chǎng)景需要考慮選擇不同的方式來(lái)進(jìn)行優(yōu)化。當(dāng)然常見(jiàn)的優(yōu)化思路為：頁(yè)面靜態(tài)資源圖片使用css，canvas，svg，iconfont，sprite，base64來(lái)優(yōu)化，后臺(tái)返回的數(shù)據(jù)資源圖片則通過(guò)響應(yīng)式、圖片壓縮來(lái)優(yōu)化，同時(shí)盡可能考慮使用新的更高壓縮比的圖片來(lái)做圖片轉(zhuǎn)化，例如webp、bpg。
推薦閱讀
還在為網(wǎng)站圖片優(yōu)化發(fā)愁?十分鐘極限優(yōu)化web前端圖片 | 文軍營(yíng)銷iconfont是一種web字體來(lái)代替圖片的解決方案: 場(chǎng)景:代替頁(yè)面上色彩單一的圖片 優(yōu)勢(shì):兼容性好,應(yīng)用廣,目前使用也很廣泛 劣勢(shì):但是由于字體的顏色設(shè)置單一,只能用于代替顏色單一的圖片,對(duì)于色彩復(fù)雜的圖片,iconfont處理起來(lái)比較困難 4、響應(yīng)式圖片 場(chǎng)景:不同終端對(duì)同一個(gè)圖片需求不一樣,可以根據(jù)終端加載不同的圖片來(lái)節(jié)省沒(méi)必要的
400-685-0732(7x24小時(shí))
關(guān)注文軍
