webp是一種常用于互聯(lián)網(wǎng)的圖片格式，由于主流瀏覽器的廣泛支持及高壓縮比而被廣泛采用，當(dāng)然也還有支持透明度、動(dòng)畫等特性。作為普通用戶，不必追求webp格式的技術(shù)原理，但由于經(jīng)常使用，分析一下webp的特性，了解它與jpg、png等常用圖片格式在應(yīng)用層面的區(qū)別倒是很有必要。
對(duì)于普通用戶來講，將圖片應(yīng)用于網(wǎng)站里，圖片的清晰度、體積無疑是最關(guān)心的問題，首先，了解這2個(gè)屬性對(duì)于網(wǎng)站有何影響：
1、清晰度：直接影響用戶的視覺體驗(yàn)。
2、體積：直接影響完整顯示圖片所需要的時(shí)間（即網(wǎng)頁打開速度）。
用于webp格式圖片實(shí)驗(yàn)的原始圖片
圍繞這2個(gè)重要屬性，咱們來做一個(gè)實(shí)驗(yàn)。首先選用一張600 X 400像素的圖片，按100%質(zhì)量分別存儲(chǔ)為jpg、png和webp格式，觀察其清晰度、體積。實(shí)驗(yàn)結(jié)果如下：
不難看出，同樣的一張圖片，在不同格式下，它的體積略有差異，png格式最大，jpg格式最小，而webp格式在100%質(zhì)量下反而比jpg格式的體積更大。而在清晰度方面的表現(xiàn)，3種格式肉眼完全看不上有什么區(qū)別。
再將圖片分別以90%、80%、70%的質(zhì)量保存為webp格式，結(jié)果如下：
同一張圖片，同樣的尺寸、同樣是webp格式，存儲(chǔ)時(shí)分別選用90%、80%、70%質(zhì)量導(dǎo)出時(shí)，體積差異巨大。與原始webp格式的271kb進(jìn)行對(duì)比，分別相差5倍至13倍不等。觀察圖片質(zhì)量，肉眼基本無法發(fā)現(xiàn)差異。
通過上面的實(shí)驗(yàn)，可以得出以下初步結(jié)論：
1、在100%質(zhì)量下，jpg格式表現(xiàn)最佳，能以最小的體積，獲得最佳的照片清晰度。
2、通過調(diào)整質(zhì)量后webp格式的體積減小非常明顯，即使90%的質(zhì)量也能在體積上減小75%以上。而清晰度基本看不出變化。
網(wǎng)站中絕大多數(shù)情況下對(duì)照片的清晰度并沒有極高的要求，筆者認(rèn)為，采用90%或80%質(zhì)量的webp格式完全夠用，然而帶來的速度體驗(yàn)則十分明顯。要知道，在圖片體積減小5-13倍時(shí)，其在網(wǎng)頁中的打開速度也會(huì)提升5-13倍?；蛟S僅僅一張圖片難以有直接的感官體驗(yàn)，但是，同一個(gè)頁面中如果有許多張經(jīng)過優(yōu)化后的webp格式圖片，那網(wǎng)頁整體打開速度的提升就非常明顯了。
所以，網(wǎng)站中所用到的圖片如果沒有極高的清晰度要求，推薦采用90%或80%質(zhì)量的webp圖片格式，可獲得最高的性價(jià)比。
