圖片優化 - 轉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>
複製代碼