WebP
WebP是Google最近推出的一種圖像格式，旨在以可接受的視覺質(zhì)量提供較低文件大小的無損和有損壓縮恩脂。它包括對alpha通道透明度和動畫的支持官紫。
在去年驼鹅，WebP在有損和無損模式下比壓縮方式增加了幾個百分點(diǎn)，而速度方面纽门，算法速度提高了一倍薛耻，解壓縮了提升10％。
WebP如何運(yùn)行
- 有損壓縮
使用VP8或VP9視頻關(guān)鍵幀編碼變體的WebP有損文件赏陵，平均比JPEG文件小25-34％饼齿。
在低質(zhì)量范圍（0-50）中，WebP相對于JPEG具有很大優(yōu)勢蝙搔，因?yàn)樗梢韵舐膲K狀偽影缕溉。中等質(zhì)量設(shè)置（-m 4 -q 75）是默認(rèn)的平衡速度/文件大小。在更高的范圍內(nèi)（80-99）吃型，WebP的優(yōu)勢在縮小证鸥。 WebP被推薦在速度比質(zhì)量更重要的地方
(WebP有損品質(zhì)設(shè)置不能直接與JPEG比較。 “70％質(zhì)量”的JPEG與“70％質(zhì)量”的WebP圖像是完全不同的勤晚，因?yàn)閃ebP通過丟棄更多數(shù)據(jù)來實(shí)現(xiàn)更小的文件大小枉层。)
無損壓縮
WebP無損文件比PNG文件小26％。與PNG相比赐写，無損加載時間減少了3％返干。你通常不徐要無損。無損邊緣和銳利邊緣（例如非JPEG）是有區(qū)別的血淌。無損WebP可能更適合檔案內(nèi)容矩欠。透明度
WebP有一個無損的8位透明通道，只有比PNG多22％的字節(jié)悠夯。它還支持有損RGB透明度癌淮，這是WebP獨(dú)有的功能。元數(shù)據(jù)
WebP文件格式支持EXIF照片元數(shù)據(jù)和XMP數(shù)字文檔元數(shù)據(jù)沦补。它還包含一個ICC顏色配置文件乳蓄。
WebP提供了更好的壓縮，但代價是CPU密集度更高夕膀。早在2013年虚倒，WebP的壓縮速度比JPEG慢了10倍美侦，但現(xiàn)在可以忽略不計（有些圖像可能會慢兩倍）。靜態(tài)圖像作為您的構(gòu)建的一部分進(jìn)行處理魂奥，這不應(yīng)該是一個大問題菠剩。動態(tài)生成的圖像可能會導(dǎo)致CPU超載，需要評估使用耻煤。
誰在生產(chǎn)中使用WebP具壮？
Google使用WebP比其他有損壓縮方案節(jié)省了30-35％的成本，每天處理430億個圖像請求哈蝇，其中26％是無損壓縮棺妓。如果瀏覽器支持更好，更廣泛的話炮赦，節(jié)省無疑會更大怜跑。 Google也將其用于Google Play和YouTube等制作網(wǎng)站。
WebP如何編碼吠勘？
WebP的有損編碼被設(shè)計為與JPEG競爭妆艘。 WebP的有損編碼有三個關(guān)鍵階段
- Macro-blocking
將圖像分成16×16（宏）的亮度像素塊和兩個8×8色度像素塊。色度通道下采樣和圖像細(xì)分的想法可能聽起來很熟悉看幼，與JPEG色彩空間轉(zhuǎn)換類似批旺。
- Prediction
每個4×4子塊具有有效進(jìn)行濾波的預(yù)測模型。這定義了兩個像素周圍的像素 - A（正上方的行）和L（左側(cè)的列）诵姜。使用這兩個編碼器填充4×4像素的測試塊汽煮，并確定哪個創(chuàng)建最接近原始塊的值。
離散余弦變換（DCT）應(yīng)用了與JPEG編碼類似的幾個步驟棚唆。一個關(guān)鍵的區(qū)別是使用算術(shù)壓縮器與JPEG的霍夫曼暇赤。
WebP瀏覽器情況
并不是所有的瀏覽器都支持WebP，但根據(jù)CanIUse.com的統(tǒng)計宵凌，全球用戶支持率在74％左右鞋囊。 Chrome和Opera本身就支持它。 Safari瞎惫，Edge和Firefox已經(jīng)嘗試過溜腐，但尚未在官方發(fā)布的版本中發(fā)布。 這通常會讓W(xué)ebP圖像給用戶瓜喇，直到Web開發(fā)人員挺益。 稍后再說。
WebP并非沒有缺點(diǎn)乘寒。 它缺少全分辨率色彩空間選項(xiàng)望众，不支持逐行解碼。
如何將我的圖像轉(zhuǎn)換為WebP？
一些商業(yè)和開源圖像編輯和處理軟件包支持WebP烂翰。一個特別有用的應(yīng)用是XnConvert：一個免費(fèi)的夯缺，跨平臺的批量圖像處理轉(zhuǎn)換器。
避免將低質(zhì)量或平均質(zhì)量的JPEG轉(zhuǎn)換為WebP非常重要甘耿。 這是一個常見的錯誤踊兜，可以生成帶有JPEG壓縮工件的WebP圖像。 這可能導(dǎo)致WebP的效率降低棵里，因?yàn)樗仨毐４鎴D像和JPEG添加的失真，導(dǎo)致質(zhì)量下降兩倍姐呐。 轉(zhuǎn)換應(yīng)用程序的最佳質(zhì)量源文件殿怜，最好是原件。
腳本程序
imagemin是一個流行的圖像縮小模塊曙砂，也有一個用于將圖像轉(zhuǎn)換為WebP（imagemin-webp）的插件头谜。這支持有損和無損模式。
有損轉(zhuǎn)換
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg}'], 'images', {
use: [
imageminWebp({quality: 60})
]
}).then(() => {
console.log('Images optimized');
});
無損轉(zhuǎn)換(pass lossless: true to options:)
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg,png}'], 'build/images', {
use: [
imageminWebp({lossless: true})
]
}).then(() => {
console.log('Images optimized');
});
也可以通過建立在imagemin-webp上的gulp插件和用于WebPack的WebP加載器來實(shí)現(xiàn)鸠澈。 Gulp插件接受imagemin插件所做的任何選項(xiàng)：
有損轉(zhuǎn)換
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('webp', () =>
gulp.src('src/*.jpg')
.pipe(webp({
quality: 80,
preset: 'photo',
method: 6
}))
.pipe(gulp.dest('dist'))
);
無損轉(zhuǎn)換(pass lossless: true to options:)
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('webp-lossless', () =>
gulp.src('src/*.jpg')
.pipe(webp({
lossless: true
}))
.pipe(gulp.dest('dist'))
);
使用Bash進(jìn)行批量圖像優(yōu)化
您可以使用cwebp將您的圖像批量轉(zhuǎn)換為WebP
find ./ -type f -name '*.jpg' -exec cwebp -q 70 {} -o {}.webp ;
使用jpeg-recompress批量優(yōu)化您的圖像來源與MozJPEG
find ./ -type f -name '*.jpg' -exec jpeg-recompress {} {} ;
并使用svgo修改這些SVG（我們將在后面介紹）
find ./ -type f -name '*.svg' -exec svgo {} ;
其他WebP圖像處理和編輯應(yīng)用程序
- Leptonica
- Sketch
GIMP
ImageMagick
Pixelmator
Photoshop WebP Plugin
如何查看我的操作系統(tǒng)上的WebP圖像柱告？
雖然您可以將WebP圖像拖放到基于Blink的瀏覽器（Chrome，Opera笑陈，Brave）以進(jìn)行預(yù)覽际度，但也可以使用Mac或Windows的附加組件直接從操作系統(tǒng)預(yù)覽它們。
在Mac上涵妥，請嘗試WebP的Quick Look插件（qlImageSize）
在Windows上乖菱，您還可以下載WebP編解碼器包，以便在“資源管理器”和“Windows照片查看器”中預(yù)覽WebP圖像蓬网。
如何為WebP提供服務(wù)窒所？
沒有支持WebP的瀏覽器可能最終不會顯示圖像，這是不理想的帆锋。為了避免這種情況吵取，我們可以使用一些策略來基于瀏覽器支持有條件地提供WebP
使用.htaccess來提供WebP副本
以下是從您的服務(wù)器獲取WebP圖像到用戶的一些選項(xiàng)
瀏覽器可以通過一個Accept頭來顯式地給WebP支持信號。如果你控制你的后端锯厢，你可以返回一個WebP版本的圖像皮官。但是這并不總是可能的（例如，對于像GitHub頁面或S3這樣的靜態(tài)主機(jī)）实辑，所以一定要在考慮這個選項(xiàng)之前進(jìn)行檢查臣疑。
以下是Apache Web服務(wù)器.htaccess文件：:
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser support WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
如果頁面上顯示的.webp圖像出現(xiàn)問題，請確保在您的服務(wù)器上啟用了圖像/ webp MIME類型徙菠。
將以下代碼添加到.htaccess文件中：
AddType image/webp .webp
Nginx:將以下代碼添加到mime.types文件中
image/webp webp
瀏覽器使用<picture> 元素</picture>
瀏覽器本身能夠通過使用<圖片>標(biāo)簽來選擇要顯示的圖片格式讯沈。 <picture>標(biāo)簽利用多個<source>元素和一個<img>標(biāo)簽，這是包含圖片的實(shí)際DOM元素。瀏覽器遍歷源代碼并檢索第一個匹配項(xiàng)缺狠。如果用戶的瀏覽器不支持<picture>標(biāo)簽问慎，則會呈現(xiàn)<div>，并使用<img>標(biāo)簽
請注意<source>的位置挤茄。 不要將圖片/網(wǎng)頁源放在舊格式之后如叼，而應(yīng)放在之前。 理解它的瀏覽器將使用它們穷劈，而那些不會使用更廣泛支持的框架的瀏覽器將會使用它們笼恰。 如果文件大小相同（當(dāng)不使用媒體屬性時），也可以按照文件大小的順序放置圖像歇终。 一般來說社证，這與最后放棄傳統(tǒng)的順序是一樣的。
<picture>
<source srcset="/path/to/image.webp" type="image/webp">
<img src="/path/to/image.jpg" alt="">
</picture>
<picture>
<source srcset='paul_irish.jxr' type='image/vnd.ms-photo'>
<source srcset='paul_irish.jp2' type='image/jp2'>
<source srcset='paul_irish.webp' type='image/webp'>
<img src='paul_irish.jpg' alt='paul'>
</picture>
<picture>
<source srcset="photo.jxr" type="image/vnd.ms-photo">
<source srcset="photo.jp2" type="image/jp2">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="My beautiful face">
</picture>
其他一些資源:
- Automatic CDN conversion to WebP
- WordPress WebP support
