图片优化 - 转webp

时间 2019-11-05

标签图片优化 webp 繁體版

原文原文链接

1、什么是webp

webp 是由谷歌（google）开发的一种旨在加快图片加载速度的图片格式。与JPEG相同，WebP是一种有损压缩利用预测编码技术。但谷歌表示，这种格式的主要优点在于高效率。在质量相同的状况下，WebP格式图像的体积要比JPEG格式图像小40%，webp 在各大BAT公司获得普遍的运用，如淘宝、腾讯等。html

而且阿里云、腾讯云、又拍云都提供了图片直接转换webp的相关服务。以阿里云为例，只要在图片后缀加上 ?x-oss-process=image/format,webp 你的图片瞬间会变小不少：web

云服务	普通图片	WEBP图片
阿里云	image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png (18K)	image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png?x… (3.3K)

阿里云支持GIF转webp啦，体积减少 20% ~ 60% canvas

2、实现webp

该方法可做为底层方法直接使用，代码以下：浏览器

/**
 * 检查是否支持.webp 格式图片  使用阿里CDN
 *
 * 支持 webp     ?x-oss-process=image/format,webp
 * 不支持         ?x-oss-process=image/quality,Q_80    质量变动为80%  GIF不做此处理
 */

;
(function() {
  var urlarr = [];
  // localStorage存在且以前没设置过iswebp
  if (localStorage && !localStorage.iswebp) {
    var cs = document.createElement('canvas');

    // 若是不支持canvas则退出
    if (cs.getContext && cs.getContext('2d')) {
      try {
        localStorage.iswebp = (0 === cs.toDataURL('image/webp').indexOf('data:image/webp'));
      } catch (e) {
        // safari 浏览器无恒模式在低于11版本会有bug
        // https://stackoverflow.com/questions/21159301/quotaexceedederror-dom-exception-22-an-attempt-was-made-to-add-something-to-st
        console.error(e);
      }
    }
  }

  function getOssImg(url) {
    if (!url) {
      return url;
    }
    if(Object.prototype.toString.call(url) !== '[object String]'){
      return url;
    }

    // 是否gif判断
    let isGif = false;
    urlarr = url.split('.');
    if (urlarr.length > 0 && urlarr[urlarr.length - 1] === 'gif') {
      isGif = true;
    }
    // gif已经支持webp
    if (isGif) {
      if (localStorage && localStorage.iswebp) {
        url = url + '?x-oss-process=image/format,webp';
        return url;
      } else {
        url += '';
        return url;
      }
    }
    
    // 不支持localStorage或者没有设置过iswebp或者isweb是false
    if (!localStorage || !localStorage.iswebp || localStorage.iswebp === 'false') {
      url = url + '?x-oss-process=image/quality,Q_80';
      return url;
    } else {
      url = url + '?x-oss-process=image/format,webp';
      return url;
    }
  }

  String.prototype.ossimg = function() {
    return getOssImg(this);
  };
})();
复制代码

调用方式.ossimg() 如：bash

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>checkwebp</title>
  </head>
  <body>
    <div class="J_checkImg"><img src="http://yun.tuidove.com/mami-media/img/ckey3d2q6o.png"></div>
    <script src="http://nansenzsl.coding.me/CBS/zepto.js"></script>
    <script src="http://nansenzsl.coding.me/CBS/checkwebp.js"></script>
    <script>
      $(function() {
        var $img = $('.J_checkImg img');
        $img.attr('src', $img.attr('src').ossimg()); // .ossimg() 转成webp
      });
    </script>
  </body>
</html>
复制代码

3、兼容性

从兼容图表能够看出，在Chrome和Opera中兼容webp，但在IE、FF、Safari不兼容webp。Android和IOS表现也相差很大，Android基本兼容webp，iOS则都不兼容，在以上底层代码中考虑到了这一点。

webp的坑点分析（左边是jpg 右边是webp）

转为webp格式后，体积增长了近一倍，这是为何呢？dom

① Type变动：原图的Type为Palette，处理以后的Type为TrueColor，即原图为索引类型，处理以后的图片为RGB真彩色，须要编码的像素点个数是索引类型的三倍，所以致使图片变大优化

② Colors变多：颜色数目由256增加到了67000多个，说明处理前的图片细节上重复较多，致使了处理后的图片比原图还大了不少ui

因此使用webp的时候须要注意，当图片有渐变和外发光而且经过tinypng压缩，再转webp格式，图片就会变大。this

4、总结

webp能使全站图片缩小30%左右，这不得不说是一个很大的优化，还未使用webp的同窗能够用起来。google