阅读 1348

你的浏览器支持webp吗

前言

今天中午在领完盒饭,吃饭的时候,正吃着深海鳕鱼片,蘸上番茄酱,那美味,简直无以言表。突然产品急匆匆的跑过来说:“咱们这个页面图片太多,浏览的时候感觉图片加载出来的时候还是有点慢?”我忽然虎躯一震,想到之前已经把图片根据设计稿的尺寸进行了CDN的剪裁,已经小了40%左右,产品经理竟然还不满意,没有办法,谁让人家是甲方,只能怯怯的回答道:“能...能吧...”,产品听到‘能’这个字便哼着小曲扬长而去,留下我独自一人,面对着已经变味的深海鳕鱼片...一遍又一遍的想着问题该如何解决...

webp简介

WebpGoogle2010年发布的一种图片格式,在相同图片质量情况下,比pngjpg格式的体积要小得多。WebP支持有损压缩和无损压缩的图片文件格式,根据Google的测试,无损压缩后的WebPPNG文件少了26%的体积,有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25%~34%的体积。

判断浏览器是否支持webp

1. 使用 canvastoDataURL 进行判断

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。

function isSupportWebp() {
  try {
    return document.createElement('canvas').toDataURL('image/webp', 0.5).startsWith('data:image/webp') 
  } catch (err) {
    return false
  }
}
复制代码

2. 与第一种方法类似

!![].map主要是判断是否是IE9+,以免toDataURL方法会挂掉。如果你直接对数组原型扩展了map方法,则需要使用!![].map以外的方法进行判断,例如!!window.addEventListener等。

var isSupportWebp = !![].map && 
0 == document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp")
复制代码

webp优劣势

优势

WebP图片相比于JPG,拥有:

  1. 更小的文件尺寸;
  2. 更高的质量——与其他相同大小不同格式的压缩图像比较。

目标图像的质量和文件大小之间存在明显的折中关系。在很多情况下,可以很大程度降低图像的大小,而用户却几乎不会注意到其中的差别。

劣势

根据Google的测试,目前WebPJPG相比较,编码速度慢10倍,解码速度慢1.5倍。

在编码方面,一般来说,我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片,对用户体验的影响基本忽略不计,主要问题在于1.5倍的解码速度是否会影响用户体验。

总结

WebP格式是提升用户体验的又一利器,虽然浏览器对WebP的支持仍有很多需要改进的地方,但是通过是使用一些工具和技术,能够体会到WebP的好处,使得页面加载速度更快,同时节省了带宽。

看到页面图片加载的速度有了肉眼可见的进步,产品终于竖起了大拇指,说:“明天给你加鸡腿🍗”,等等,明天?

参考文章:

探究WebP一些事儿

WebP

github.com/xinconan/bl…

juejin.cn/post/684490…

文章分类
前端
文章标签