一、現(xiàn)有web圖片格式
現(xiàn)在常用的web圖片的格式:
幾種文件格式的特點(diǎn)概述
baseline-jpeg
這種類型的JPEG文件存儲(chǔ)方式是按從上到下的掃描方式,把每一行順序的保存在JPEG文件中。打開這個(gè)文件顯示它的內(nèi)容時(shí),數(shù)據(jù)將按照存儲(chǔ)時(shí)的順序從上到下一行一行的被顯示出來(lái),直到所有的數(shù)據(jù)都被讀完,就完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡(luò)下載速度較慢,那么就會(huì)看到圖片被一行行加載的效果,這種格式的JPEG沒有什么優(yōu)點(diǎn),因此,一般都推薦使用Progressive JPEG
preogressive-jpeg
和Baseline一遍掃描不同,Progressive JPEG文件包含多次掃描,這些掃描順尋的存儲(chǔ)在JPEG文件中。打開文件過(guò)程中,會(huì)先顯示整個(gè)圖片的模糊輪廓,隨著掃描次數(shù)的增加,圖片變得越來(lái)越清晰。這種格式的主要優(yōu)點(diǎn)是在網(wǎng)絡(luò)較慢的情況下,可以看到圖片的輪廓知道正在加載的圖片大概是什么。
這兩種jpeg格式文件的效果對(duì)比如下:
jpeg優(yōu)勢(shì):
非常通用,JPEG在色調(diào)及顏色平滑變化的相片或是寫實(shí)繪畫(painting)上可以達(dá)到它最佳的效果。
jpeg劣勢(shì):
它并不適合于線條繪圖(drawing)和其他文字或圖示(iconic)的圖形,因?yàn)樗膲嚎s方法用在這些圖形的型態(tài)上,會(huì)得到不適當(dāng)?shù)慕Y(jié)果;
gif
GIF(Graphics Interchange Format)的原義是“圖像互換格式”,GIF文件的數(shù)據(jù),是一種基于LZW算法(串表壓縮算法)連續(xù)色調(diào)的無(wú)損壓縮格式,是目前web網(wǎng)頁(yè)中十分常用的一種動(dòng)畫文件格式。
優(yōu)勢(shì):
1、優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時(shí)將體積變得很小,可插入多幀,從而實(shí)現(xiàn)動(dòng)畫效果;
2、可設(shè)置透明色以產(chǎn)生對(duì)象浮現(xiàn)于背景之上的效果。
劣勢(shì): 由于采用了8位壓縮,最多只能處理256種顏色(2的8次方),故不宜應(yīng)用于真彩圖像。
png
png文件分為png8(8位透明png)、png24(256色png)、png32(多階透明png),png的有點(diǎn)在于使用位圖實(shí)現(xiàn)web上的透明圖片,以實(shí)現(xiàn)比較好的體驗(yàn)。
優(yōu)勢(shì):
- 支持256色調(diào)色板技術(shù)以產(chǎn)生小體積文件
- 最高支持48位真彩色圖像以及16位灰度圖像。
- 支持Alpha通道的半透明特性。
- 支持圖像亮度的gamma校正信息。- 支持存儲(chǔ)附加文本信息,以保留圖像名稱、作者、版權(quán)、創(chuàng)作時(shí)間、注釋等信息。
- 使用無(wú)損壓縮。
- 漸近顯示和流式讀寫,適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌。
- 使用CRC循環(huán)冗余編碼防止文件出錯(cuò)。
- 最新的PNG標(biāo)準(zhǔn)允許在一個(gè)文件內(nèi)存儲(chǔ)多幅圖像。
劣勢(shì):
- 但也有一些軟件不能使用適合的預(yù)測(cè),生成的文件較大(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ò)應(yīng)用中,圖片都是靜態(tài)文件,所以對(duì)于用戶使用只需要關(guān)心解碼速度即可。但實(shí)際上,webp雖然會(huì)增加額外的解碼時(shí)間,但是由于減少了文件體積,縮短了加載的時(shí)間,實(shí)際上文件的渲染速度反而變快了。
webp上目前可行的應(yīng)用場(chǎng)景:
-1.客戶端軟件,內(nèi)嵌了基于Chromium的webview,這類瀏覽器中應(yīng)用的網(wǎng)頁(yè)是可以完全使用webp格式,提升加載渲染速度,不考慮兼容。
-2.用node-webkit開發(fā)的程序,用webp可以減少文件包的體積。
-3.移動(dòng)應(yīng)用 或 網(wǎng)頁(yè)游戲 ,界面需要大量圖片,可以嵌入webp的解碼包,能夠節(jié)省用戶流量,提升訪問速度優(yōu)勢(shì):
- 對(duì)于png圖片,webp比png小了45%,但是缺點(diǎn)是你壓縮的時(shí)候需要的時(shí)間更久了;劣勢(shì):
- 兼容性不太好, 只有opera,和chrome支持;
apng
簡(jiǎn)單來(lái)講apng格式圖片使用多個(gè)單張png連接起來(lái)的動(dòng)畫圖片格式,支持全透明通道動(dòng)畫。相比于gif動(dòng)畫,沒有毛刺,質(zhì)量更高,但目前支持的瀏覽器并不完全??梢匀an i use查看其兼容性。目前可用性相對(duì)較低,適用于對(duì)動(dòng)畫質(zhì)量要求很高的情況。
svg 是一種矢量圖片,支持透明,縮放,動(dòng)畫,除了android 2.3的手機(jī),其它場(chǎng)景都支持,是一種比較好的圖片代替方案。 優(yōu)勢(shì):
- 矢量圖形,不受像素影響——SVG的這個(gè)特性使得它在不同的平臺(tái)或者媒體下表現(xiàn)良好,無(wú)論屏幕分辨率如何
- SVG對(duì)動(dòng)畫的支持較好;其DOM結(jié)構(gòu)可以被其特定語(yǔ)法或者Javascript控制,從而輕松的實(shí)現(xiàn)動(dòng)畫
- Javascript可以完全控制SVG Dom 元素
- SVG的結(jié)構(gòu)是 XML,其可訪問性(盲文、聲音朗讀等)、可操作性、可編程性、可被CSS樣式化完勝Canvas。另外,其支持 ARIA 屬性,使其如虎添翼。
劣勢(shì):
- DOM比正常的圖形慢,而且如果其結(jié)點(diǎn)多而雜,就更慢了
- 不適合網(wǎng)頁(yè)游戲等;當(dāng)然,我們可以結(jié)合 Canvas + SVG來(lái)實(shí)現(xiàn)
bpg
http://bellard.org/bpg/ 圖片畫質(zhì)比較 性能測(cè)試對(duì)比
BPG (Better Portable Graphics) 是一個(gè)新的圖片格式。用來(lái)代替jpeg和webp的方案。這種格式主要有以下特點(diǎn) 優(yōu)勢(shì):
- 高壓縮比。在畫質(zhì)相同的情況下比jpeg小的多
- 使用一個(gè)很小的js解碼器就可以被瀏覽器支持
- 基于高清視頻壓縮標(biāo)準(zhǔn) (HEVC) 一個(gè)子集開發(fā)
- 支持和jpeg相同的色值,并且在有損壓縮的通知支持透明,
- 單通道支持8到14位色值區(qū)域
- 支持有損壓縮
- 可以添加更多的元數(shù)據(jù)編碼
- 支持動(dòng)畫
- 相近畫質(zhì)前提下比webp更小
性能:
- 根據(jù)mozilla的研究,bpg使用的HEVC編碼比原生的HEVC性能更好,因?yàn)锽PG的頭部比HEVC的頭部更小
- 支持4:2:2和4:2:0的色值設(shè)置
- BPG可以用于硬件上支持HEVC編解碼器
這種圖片格式目前還沒有被瀏覽器支持,需要js解碼,但其優(yōu)勢(shì)非常明顯。
另外還有mozjpg、sharpP的圖片格式,由于目前仍在起步階段,這里暫不介紹了,有興趣的可以去跟進(jìn)了解下。
二、前端的圖片優(yōu)化方案
使用base64編碼代替圖片
場(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)
合并圖片sprite(雪碧圖)
場(chǎng)景:任何用到頁(yè)面圖片的場(chǎng)景
原理:將多個(gè)頁(yè)面上用到的背景圖片合并成一個(gè)大的圖片在頁(yè)面中引用
優(yōu)勢(shì):可以有效的較少請(qǐng)求個(gè)數(shù),而且,而不影響開發(fā)體驗(yàn),使用構(gòu)建插件可以做到對(duì)開發(fā)者透明。適用于頁(yè)面圖片多且豐富的場(chǎng)景。
劣勢(shì):生成的圖片體積較大,減少請(qǐng)求個(gè)數(shù)同時(shí)也增加了圖片大小,不合理拆分將不利于并行加載
使用css、svg、canvas或iconfont代替圖片
css代替圖片
場(chǎng)景:適用于移動(dòng)端或較高級(jí)的瀏覽器,而且繪制的圖案較為簡(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ù)雜圖案困難
svg的描述和適用場(chǎng)景上文已說(shuō)明。
canvas代替圖片
場(chǎng)景:需要高性能的圖片或動(dòng)畫
原理:適用html5的canvas元素繪制創(chuàng)建圖片
優(yōu)勢(shì):整個(gè)就是畫2D圖形時(shí),頁(yè)面渲染性能比較高,頁(yè)面渲染性能受圖形復(fù)雜度影響小,性能只受圖形的分辨率的影響,畫出來(lái)的圖形可以直接保存為 .png 或者 .jpg的圖形,適合于畫光柵圖像或者不規(guī)則圖形
劣勢(shì):沒有dom操作,必須依賴定時(shí)器,文字渲染性能差,不能添加描述(title屬性什么的),兼容性限制
iconfont是一種web字體來(lái)代替圖片的解決方案: 場(chǎng)景:代替頁(yè)面上色彩單一的圖片 優(yōu)勢(shì):兼容性好,應(yīng)用廣,目前使用也很廣泛 劣勢(shì):但是由于字體的顏色設(shè)置單一,只能用于代替顏色單一的圖片,對(duì)于色彩復(fù)雜的圖片,iconfont處理起來(lái)比較困難
響應(yīng)式圖片
場(chǎng)景:不同終端對(duì)同一個(gè)圖片需求不一樣,可以根據(jù)終端加載不同的圖片來(lái)節(jié)省沒必要的流量
原理:通過(guò)picture元素,picturefill或平臺(tái)判斷來(lái)為不同終端平臺(tái)輸出不同的圖片
優(yōu)勢(shì):減少?zèng)]必要的圖片加載,靈活控制,慢速用戶加載小圖片不至于加載失敗,移動(dòng)端沒必要加載大尺寸圖片等,可以通過(guò)不同方式兼容所有瀏覽器
劣勢(shì):無(wú)法避免圖片的加載過(guò)程,圖片本身沒優(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ù)支持
更好的圖片格式
場(chǎng)景:之前說(shuō)到webp、bpg、sharpP等新圖片格式具有更好的壓縮比,可以使用這類新型的圖片來(lái)代替原始圖片
原理:對(duì)圖片格式轉(zhuǎn)換,在畫質(zhì)可以接受的情況下達(dá)到更好的壓縮比效果
優(yōu)勢(shì):減少圖片加載流量,效果比較明顯
劣勢(shì):服務(wù)器和瀏覽器壓力增大,而且服務(wù)器需要額外的服務(wù)支持,格式轉(zhuǎn)換要考慮瀏覽器的兼容性
三、圖片壓縮
壓縮圖片方式比較多,這里不一一列出,例如下面的部分工具平臺(tái):
Kraken (Web)主頁(yè): https://kraken.io/
智圖主頁(yè): http://zhitu.tencent.com/支持原圖png轉(zhuǎn)為jpeg和webp(目前不支持bpg),并提供各種壓縮比壓縮,目前在tx內(nèi)部廣泛使用。
目前bpg格式圖片也有部分公司在試用。這方面也可以嘗試下。
總結(jié):上面提供了web圖片的一些格式特點(diǎn)和圖片優(yōu)化的可行方案,具體的場(chǎng)景需要考慮選擇不同的方式來(lái)進(jìn)行優(yōu)化。當(dāng)然常見的優(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。
以上就是對(duì)web前端圖片極限優(yōu)化策略全部?jī)?nèi)容的介紹,更多內(nèi)容請(qǐng)繼續(xù)關(guān)注腳本之家!