webp在项目中的使用示例

[cklwblove]

构建相关

引入依赖

// imagemin imagemin-webp
npm i imagemin imagemin-webp --save-dev
or
yarn add imagemin imagemin-webp --dev
npm scripts 添加 towebp
// package.json
{
 ...
 "scripts": {
    "towebp": "node build/towebp.js"
 }
}

build/towebp.js

'use strict';
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
const fs = require('fs');
const chalk = require('chalk');
const fileSrc = './src/assets/img/*.{jpeg,jpg,png,JPEG,JPG,PNG}';
const fileOut = 'src/assets/img/';
(async () => {
  const files = await imagemin([fileSrc], {
    destination: fileOut,
    plugins: [imageminWebp({ autoFilter: true })],
  });
  // console.log(files);
  //=> [{data: <Buffer 89 50 4e …>, destinationPath: 'build/images/foo.webp'}, sourcePath: 'src/assets/img/foo.jpg' …]
  let outputName = '';
  if (Array.isArray(files) && files.length) {
    files.forEach((file) => {
      const { destinationPath, sourcePath } = file;
      const fileExtension = sourcePath
        .split('.')
        .pop()
        .toLowerCase();
      outputName = `${outputName}.${fileExtension}.webp`;
      fs.rename(destinationPath, outputName, function() {});
    });
  }
  console.log(chalk.green(`webp转换已完成～`));
})();

项目中改动

public/index.html

// body 标签添加类名 webpa
<script>
  window.supportWebp = false;
  if (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0) {
    document.body.classList.add('webpa');
    window.supportWebp = true;
  }
</script>

mixins.less 添加 webp 的 mixins

.webpbg(@url) {
  background-image: url(@url);
  .webpa & {
    background-image: url('@{url}.webp');
  }
}
// 或者使用 magicless 里的 .webpbg()

使用示例

作为 img 标签的使用示例

目前 Safari 浏览器还没有对 webp 格式的支持，详见 https://caniuse.com/#search=webp

<picture>
  <!-- 向下降级使用 -->
  <source
          srcset="~@assets/img/logo.png.webp"
          width="200"
          height="200"
          type="image/webp"
          />
  <source
          srcset="~@assets/img/logo.png"
          width="200"
          height="200"
          type="image/png"
          />
  <img src="~@assets/img/logo.png" width="200" height="200" />
</picture>

作为 background-image 的使用示例

 .logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    .webpbg('~@assets/img/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
  }