图片加速 WebP格式

时间:2022-05-06
本文章向大家介绍图片加速 WebP格式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

WebP是Google在2010年推出的图片技术,它可对图片进行有效压缩,不影响清晰度的同时,使图片体积更小

在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小将近40%

腾讯的智图平台就已经支持对WebP格式的转换,使用了一张大小为346KB的图片测试,选择图片目标品质为80,转换为WebP格式后,图片的大小仅为80KB

劣势是兼容性不好,google系的已经支持,但其他平台还没有很好的支持

兼容方案

JS

利用img标签加载一张base64的WebP图片,在img标签的onload事件中判断该图片是否具有宽高的属性,有表示支持webP,没有表示不支持webP

例如:

var img = new Image();
img.src = "data:image/webp;base64,......";
img.onload = function (){
  // img.width, img.height
  ......
}

IOS

客户端加载WebP格式的图片,下载完成后在前端实时转码,将WebP图片转换为jpg或png图片,展示给用户的是普通图片,节省了网络加载时间

Android

4.0以上的系统已经原生支持WebP格式

用户下载

用户点击下载时,使用此图片相应的jpg版本