1.0.1 • Published 4 years ago
create-webp-webpack-plugin v1.0.1
create-webp-webpack-plugin
简体中文文档 将项目图片生成对应的 webp 格式
安装
npm i -D create-webp-webpack-plugin
// or
yarn add -D create-webp-webpack-plugin选项
match
Type: regexp
Default: /\.(png|gif|svg)$/
匹配需要生成 webp 的图片
webp
Type: object
Default: { lossless: true }
该选项同 sharp webp options
各种格式使用转化成 webp 说明
| 序号 | 压缩模式 | webp 设置 | jpg | jpeg | png | gif | svg | jpg2 | png2 | gif2 | 图片质量 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 未处理 | 未处理 | 13.3 | 4.78 | 74.3 | 204 | 1.97 | 188 | 60.1 | 169 | ---- |
| 2 | 压缩 | 未处理 | 12.3 | 5.94 | 52.2 | 204 | 1.26 | 96.2 | 18.5 | 168 | 优秀(效果等同原图) |
| 3 | 压缩 | 无损 | 61.2 | 31.5 | 45.3 | 78.4 | 2.29 | 469 | 15.7 | 4.73 | 优秀(效果等同原图) |
| 4 | 压缩 | 80 | 8.38 | 5.39 | 6.68 | 18.3 | 2.76 | 54.2 | 13.8 | 3.00 | 一般(体积等同压缩 webp80，但质量要差) |
| 5 | 无压缩 | 无损 | 61.4 | 31.2 | 41.5 | 78.4 | 2.29 | 430 | 37.8 | 4.73 | 优秀(效果等同原图) |
| 6 | 无压缩 | 90 | 14.1 | 8.01 | 11.6 | 39.2 | 2.94 | 84.8 | 18.0 | 4.14 | 优秀 |
| 7 | 无压缩 | 85 | 13.3 | 6.40 | 8.50 | 26.3 | 2.83 | 69.2 | 16.0 | 3.47 | 良好(推荐) |
| 8 | 无压缩 | 80 | 8.38 | 5.36 | 6.55 | 18.3 | 2.76 | 57.8 | 14.6 | 3.00 | 一般 |
| 9 | 无压缩 | 75 | 6.77 | 4.62 | 5.18 | 13.7 | 2.70 | 49.5 | 13.3 | 2.59 | 较差 |
分析
- 对于压缩过的 jpg，jpeg 再使用 webp 无损转化会增大 2 倍以上体积，参考序号
3，5 - 压缩后再转成 webp，jpg 不适合转成 webp，png 可再减小 15% 左右的体积
总结
- 在不使用 webp 时，推荐使用 image-webpack-loader 压缩，参考序号
2 - 在使用 webp 时，推荐使用不压缩，以 90 的质量转成 webp，质量和序号
2的效果一致，体积相比于直接压缩更小