webP圖片格式介紹-判斷瀏覽器是否支援webP

摘要： webP介紹 WebP是一種現代 影象格式 ，可為Web上的影象提供出色的 無損和有損 壓縮。使用WebP，網站管理員和Web開發人員可以建立更小，更豐富的影象，使網路更快。 與PNG相比，WebP無損影象的尺寸 縮小 了 26％ 。在等效的 SSIM 質量指數下，WebP有損影...

webP介紹

WebP是一種現代 影象格式 ，可為Web上的影象提供出色的 無損和有損 壓縮。使用WebP，網站管理員和Web開發人員可以建立更小，更豐富的影象，使網路更快。

與PNG相比，WebP無損影象的尺寸 ofollow,noindex">縮小 了 26％ 。在等效的 SSIM 質量指數下，WebP有損影象比同類JPEG影象 小25-34％ 。

無損WebP 支援透明度 （也稱為alpha通道），僅需 22％的額外位元組 。對於有損RGB壓縮可接受的情況， 有損WebP也支援透明度 ，與PNG相比，通常提供3倍的檔案大小。

webP對比jpg

通過七牛imageView2轉換的圖: http://img2.soyoung.com/origin/20180823/0/278cf95c55a3586e6421997e89df23c0.jpg?imageView2/0/format/webp

webP缺點

1. 相容性要做處理..

   https://caniuse.com/#search=webP
   

   image.png

2. 格式要特殊處理(我司有七牛..imageView2)

   https://blog.qiniu.com/archives/5793

3. 載入展示會比之前慢，不過可以基本忽略不計

4. 展示不如JPG好看(鮮豔,清晰等等)，不過放到手機上權衡檔案大小來說可以接受

判斷瀏覽器是否支援webP

其實很簡單，在載入前通過 JS判斷下是否支援 webP即可。

async function supportsWebp() {
if (!self.createImageBitmap) return false;

const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
const blob = await fetch(webpData).then(r => r.blob());
return createImageBitmap(blob).then(() => true, () => false);
}

(async () => {
if(await supportsWebp()) {
console.log('does support');
}
else {
console.log('does not support');
}
})();