为什么选择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的问题，集成进入构建脚本还需要额外开发插件，可能不止一个，具体的后面的文章我们会在做探讨。
网友评论