webp 应用

讨论今天的话题之前,借用毛爷爷一句:

数风流人物,还看今朝

简介

webp是Google开发的一种有损压缩格式,类似JPEG,体积却是同质量JPEG的2/3。在3年前,webp已经斩头露角,只是Chrome形单影只。如今,除Chrome外,国产浏览器UC(for Android)、QQ、Baidu均已支持。从国情看,移动浏览器厂商支持webp格式的份额保守估计超过50%。这样来看提升这部分用户体验也是很有意义的。

体验

Chrome官方提供cwebp, dwebp, 和 WebP Libraries。下载
cwebp 可以将JPEG, PNG 或 TIFF转化成webp格式。
dwebp 可以将webp转成其他格式。
WebP Libs 可以集成到实际项目工程中。

应用场景

  1. 服务端
    支持webp图片的浏览器在向服务器发送请求时,会在请求头Accept中设置image/webp。
    服务器可以根据头信息返回webp图片。

  2. 客户端
    通过JS判断浏览器对webp的支持情况,再请求webp资源。
    具体的做法:

– 利用img标签加载一张base64的WebP图片,在img标签的onload事件中判断该图片是否具有宽高的属性。能成功加载的即代表支持webp。通常webp是在懒加载(lazyload)中替换请求,或者是异步请求。
– PWA 集成webp是更佳的选择。在渐进式网页应用中,通过ServiceWorker代理所有图片请求,这样可将图片请求替换成webp。

参考

Chrome Dev Center

发表评论

电子邮件地址不会被公开。 必填项已用*标注