webP介紹
WebP是一種現(xiàn)代圖像格式树碱，可為Web上的圖像提供出色的無損和有損壓縮记罚。使用WebP浅妆，網(wǎng)站管理員和Web開發(fā)人員可以創(chuàng)建更小望迎，更豐富的圖像，使網(wǎng)絡(luò)更快凌外。
與PNG相比辩尊，WebP無損圖像的尺寸縮小了26％。在等效的SSIM質(zhì)量指數(shù)下康辑，WebP有損圖像比同類JPEG圖像 小25-34％摄欲。
無損WebP 支持透明度（也稱為alpha通道），僅需22％的額外字節(jié)疮薇。對于有損RGB壓縮可接受的情況胸墙，有損WebP也支持透明度，與PNG相比按咒，通常提供3倍的文件大小迟隅。
webP對比jpg
通過七牛imageView2轉(zhuǎn)換的圖:http://img2.soyoung.com/origin/20180823/0/278cf95c55a3586e6421997e89df23c0.jpg?imageView2/0/format/webp
不通過imageView2的圖:
http://img2.soyoung.com/origin/20180823/0/278cf95c55a3586e6421997e89df23c0.jpg
webP缺點
-
兼容性要做處理..
https://caniuse.com/#search=webP
image.png 格式要特殊處理(我司有七牛..imageView2)
https://blog.qiniu.com/archives/5793
也可以用imagemin-webp,
gulp-webp生成 .jpg.webp/.png.webp格式的webP圖片
- 加載展示會比之前慢，不過可以基本忽略不計
- 展示不如JPG好看(鮮艷,清晰等等)励七，不過放到手機上權(quán)衡文件大小來說可以接受
判斷瀏覽器是否支持webP
其實很簡單智袭，在加載前通過 JS判斷下是否支持 webP即可。
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
var result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
check_webp_feature('lossy',(f,r) =>{
console.log(f,r)
})
相關(guān)材料
google對于webP的介紹 https://developers.google.com/speed/webp
七牛對于webP的介紹 https://blog.qiniu.com/archives/5793
