webp介绍与使用

最新推荐文章于 2024-06-17 09:49:33 发布

转载最新推荐文章于 2024-06-17 09:49:33 发布 · 278 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/w3cape/p/4668648.html

webp是一种由谷歌发布的新型图片格式，支持有损和无损压缩，能有效减小图片体积，加快网页加载速度。本文详细介绍了webp的工作原理、应用场景及与其他浏览器的支持情况，分享了不同场景下的技术解决方案，包括浏览器支持检测、WebP插件应用、Android和iOS平台的实现方式，以及推荐的webp转换工具。然而，由于非Chrome和Opera浏览器缺乏原生支持，文章提出了相应的应对策略。

webp是谷歌10年发布的一种新的图片格式，支持有损压缩或无损压缩。据官方称无损压缩的webp在体积上要比png小26%，而有损压缩要比同质量jpg小25%~34%。经本人测试，由腾讯智图处理的不同图片转换webp压缩率不太一样，在24%~83%之间都有。这样大的压缩率对于我们Web前端开发工程师诱惑力实在太大了。因为互联网很大一部分流量都来自图片，图片体积变小可以帮助我们让网页加载地更快，这对提升用户体验是有帮助的。

webp有损压缩使用了一种高级预测编码方法对图片进行编码，这种方法使用临近像素块中的值来预测当前块中的图像值，然后只需要对这种差异进行编码。

webp无损压缩使用已经可见的图像碎片来精确地重建一个个新的像素。这种压缩模式被称为“VP8L”，与LZ77压缩算法有一些共同特征。

那么，现在是否有产品使用webp呢？答案是肯定的，国外如Youtube、Gmail、Google Play、Chrome网上商店，国内如腾讯、淘宝、美团等都有webp的应用。科技博客 Gig‍‍‍aOM 曾报道：YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提升了 10%；谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3；Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间。

那我们开始使用webp吧！遗憾的是，除了chrome和opera，其他浏览器都没有对webp原生支持。所以就有了以下不同场景下的技术解决方案，在此共享给大家学习参考：

1、浏览器

方案一：

JavaScript能力检测，仅对支持webp的情况输出webp

var testWebp = function(callback){
   var image = new Image();
   image.onerror = function(){
    callback && callback(false);
   }
   image.onload = function(){
    callback && callback(image.width == 1);
   }
   image.src = "data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAAAUAgCdASoBAAEAL/3+/3+CAB/AAAFzrNsAAP5QAAAAAA==";
  };
 
  testWebp(function(flag){
   if(flag){
    alert('恭喜，浏览器支持webp');
   }else{
    alert('抱歉，浏览器不支持webp');
   }
  });