码迷,mamicode.com
首页 > Web开发 > 详细

webp介绍与使用

时间:2015-07-22 22:39:01      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:

    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‘);
   }
  });

 

        方案二:
        使用WebP插件(链接:http://pan.baidu.com/s/1i3GkVFf
        引入js文件,插件会捕捉使用webp图片的img元素,然后使用flash替换,值得注意的是图像的解码和显示都在插件中进行,故而对css背景图片无效
 
2、app
    1)Android4.0以上原生支持,4.0以下使用解析库(链接https://github.com/alexey-pelykh/webp-android-backport
 
另外,腾讯前端团队为我们提供了2款webp转换工具,有需要的同学可以一试:
    智图(http://zhitu.isux.us/
    iSparta(http://isparta.github.io/
    

webp介绍与使用

标签:

原文地址:http://www.cnblogs.com/w3cape/p/4668648.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!