webp格式图片

• 目的：能控制压缩比例，在不失真的情况下，压缩图片大小，提高页面资源的加载速度。
• 兼容性：Chrome、Firefox和移动端都支持，Safari部分支持，IE不支持。详细文档 (opens new window)
  
• 安装工具包： imagemin 和 imagemin-webp
  
• 创建一个webp.mjs文件，执行node webp.mjs将 docs/png2webp 目录下的原始图片，转成webp格式的图片。

import imagemin from 'imagemin';
import webp from 'imagemin-webp';
const baseDir = './docs';
const subDir = '/png2webp';

const convertImages = async () => {
    const files = [baseDir + subDir + '/*.{jpg,jpeg,png}'];
    const config = {
        destination: baseDir + subDir,
        plugins: [webp({
            quality: 60 // 压缩系数 0-100
        })],
    };

    console.log('开始转换图片...');
    await imagemin(files, config);
    console.log('已将图片转换成 WebP');
};

convertImages();

• 兼容性处理
  （1）index.html 判断浏览器是否支持webp格式的图片，给根元素html，添加class类名，webp(支持webp)或者no-webp(不支持webp)。

<script type="text/javascript">
  // webp 检查
  checkWebpFeature();
  function checkWebpFeature (feature, callback) {
      var kTestImages = {
          lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
          lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
          alpha: 'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==',
          animation: 'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA'
      };
      var img = new Image();
      img.onload = function() {
          if (img.width > 0 && img.height > 0) {
              window.webp = true;
          }
      };
      img.onerror = function() {
          window.webp = false;
      };
      img.src = 'data:image/webp;base64,' + kTestImages[feature || 'lossy'];
  }

  window.addEventListener('DOMContentLoaded', function () {
      document.documentElement.classList.add(window.webp ? 'webp' : 'no-webp');
  });
</script>

（2）在common.scss文件中，通过mixin指令，创建webp()。

@mixin webp($url, $repeat: no-repeat) {
    @at-root .webp & {
        background-image: url($url + '.webp');
    }
    @at-root .no-webp & {
        background-image: url($url + '.png');
    }
    background-repeat: $repeat;
}

// 使用
// @include webp('~@/assets/image/webp/hot-bg');

（3）vue组件中，使用picture、source和img标签。浏览器会选择最匹配的子<source>元素，如果没有匹配的，就选择<img>元素的src属性中的url。

<template>
    <picture>
        <source srcset="@/assets/image/webp/share-img.webp">
        <img src="@/assets/image/hot/share-img.png">
    </picture>
</template>