页面加载性能之使用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展现。

使用前：

<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-...
• https://css-tricks.com/using-...