页面加载性能之使用WebP图片

为什么选择webp图片？

WebP比同等质量的JPEG和PNG都要小，一般能减少25%-35%的文件大小，能有效的提升加载性能。

YouTube自从使用WebP之后，页面加载速度提升了10%
Facebook自从使用WebP之后，JPEG的存储减小了25%-35%，PNG的存储减小了80%

WebP是一种绝佳的方式来替代JPEG、PNG和GIF。而且WebP同时支持无损和有损压缩。无损压缩保证质量不降低，有损压缩则可以极大减少文件体积，但相应的质量会降低。

把图片转换成WebP

一般有两种方式：cwebp command-line tool 和 Imagemin WebP plugin。Imagemin的插件一般用于构建工具，如webpack、gulp等。cwebp则更适合于一次性的转换。

在你转换成WebP的时候，需要考虑图片质量的问题，可以从0-100选择，选出一个最佳的质量同时大小也能满足你的要求。

使用cwebp

用默认配置转换一个文件

cwebp images/flower.jpg -o images/flower.webp

用50的质量转换一个文件

cwebp -q 50 images/flower.jpg -o images/flower.webp

转换一个目录下的所有文件

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

使用Imagemin

这个插件可以根据你自己的产品的构建工具来使用，以下是webpack的用法：

const ImageminWebP = require('imagemin-webp');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: './images/**/**',
      to: './images/[name].webp'
    }]),
    new ImageminPlugin({
      // imagemin-webp docs: https://github.com/imagemin/imagemin-webp
      plugins: [ImageminWebP({quality: 50})]
    })
  ]
};

如果你没有使用构建工具，可以使用Nodejs来执行，如以下代码，可以将 images 目录的图片全部转换成webp，并放入 compressed_iamges 目录：

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

HTML中使用WebP图片

如果不考虑兼容性，可以不用再往下看了。一般情况下，我们针对支持WebP的浏览器展示WebP，不支持的会用JPEG或者PNG展示。

使用前：

扫描二维码关注公众号，回复： 11421419 查看本文章

<img src="flower.jpg" alt="">

使用后：

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

请注意这些标签的使用 <picture>、<source>、<img>，以及他们的顺序。

picture

<picture> 标签提供了一个容器，里面会放若干个 <source> 和一个 <img>。

source

<source> 标签定义了一个媒体源。

从上往下，浏览器会检测哪个格式是支持展示的，如果都不支持，则会fallback到 <img> 标签。

CSS中使用WebP图片

可能你会想尝试一下方法：

#picture {
    background-image: url(picture.webp);
    background-image: url(picture.jpg);
}

实际上是无效的，CSS是层叠样式，后者会覆盖前者，不会如预期一样不支持WebP，则自动fallback到JPEG。

常用的做法是检测WebP是否支持，相关检测代码可以参考：https://modernizr.com/download。

该脚本如果检测出来支持，则会在 html 标签上加一个 webp 的类，如果不支持，则会加 no-webp，实际使用的时候可以如下：

.elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

总结

一般项目中我们还是尽可能的少用图片，经常使用Imagemin或者cwebp来做一次性的转换，只有当你的项目图片经常变动，而且数量很多的情况下，才会考虑集成到构建工具中，而且还面临着CSS的使用的fallback的问题，集成进入构建脚本还需要额外开发插件，可能不止一个，具体的后面的文章我们会在做探讨。

参考

https://web.dev/serve-images-webp/
https://css-tricks.com/using-webp-images/