原文地址：https://segmentfault.com/a/1190000038458838
作者：Fw恶龙
本文首发于：思否
一、前言
对于 WebP 的反对状况，以及实用场景此处不做具体阐明，具体见官网文档。
先说论断，目前 WebP 反对状况占比拟大（数据如下），在适宜的场景下能够应用 WebP 格局图片来进步页面加载速度。
- 反对的浏览器占比达到近90%（数据起源：Can I Use）
- 安卓零碎下大部分浏览器已反对，而安卓零碎在国内挪动端系统中占比达80%（数据起源：statcounter）
目前使页面反对 WebP 格局图片有两种形式：
- 前端开发过程生成对应格局图片并编写 WebP 相干代码（本文介绍）
- 服务器端反对生成 WebP 格局图片，前端编写相干加载代码（这部分未深入研究）
二、压缩成果
设置压缩品质为81时，能够在尺寸和品质两者间获得较好的均衡。（测试后果与图片类型以及色调丰盛度无关，具体的压缩品质能够依据理论状况自行调整）
三、在开发中如何应用？
1. html
<picture> 标签会依据浏览器反对状况加载对应资源。
<picture>
<source srcset="./webp/demo.webp" type="image/webp">
<img src="./images/demo.png"/>
</picture>2. css
通过 js 检测以后浏览器是否反对 WebP 格局的图片（细节见下文 js 代码），在 html 标签上动静增加类名 webp，依据浏览器反对状况加载不同格局的图片。
.box {
width: 5.73rem;
height: 6.57rem;
background-image: url(../images/demo.png);
background-repeat: no-repeat;
background-size: 100% 100%
}
.webp .box {
background-image: url(../webp/demo.webp)
}3. js
通过创立 canvas 标签生成 WebP 格局图片，依据其是否生成胜利，来判断浏览器是否反对 WebP 格局的图片。
var isSupportWebp = function () {
if(document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0) {
document.getElementsByTagName('html')[0].classList.add('webp');
} else {
console.warn("The browser doesn't support WebP.");
}
}
isSupportWebp();四、开发流程
以下流程仅提供大抵思路，具体的 webpack 相干配置会依据我的项目有所出入。
- 设计稿产出 jpg/png 格局切片
- 开发过程应用 webpack 插件 imagemin-webp-webpack-plugin 依据切片主动生成 WebP 格局的切片
- html 头部引入上文对应的 js 检测代码
- html 中的
<img>标签改为应用<picture>标签 -
css 通过预处理器封装背景相干款式的函数，以下为 stylus 代码
bg-webp($url, $ext = png) background-image url($baseUrl + $url + "." + $ext) .webp & background-image url($baseUrlWebp + $url + ".webp")
五、注意事项
1. 以下应用形式会导致 WebP 图片变大
- 引入渐进式的 jpg/png 格局的图片（WebP 不反对渐进式格局）
- 引入曾经压缩过的图片（webpack 无奈判断该图片是否压缩过）
2. 应用场景
适宜
- 较大的图片，如：背景图
不适宜
- 小图不倡议应用，差异不大
- canvas 等合成图片的还未尝试，因波及跨域、兼容性等问题，临时不应用
六、相干文档
- imagemin-webp-webpack-plugin：用于生成 WebP 格局图片
- write-file-webpack-plugin：使得在开发环境中可能失常生成 WebP 格局图片
- copy-webpack-plugin：复制原始图片资源，以触发 imagemin-webp-webpack-plugin
- webp图片在我的项目中的实际：前端以及服务器端的应用形式
- 判断浏览器是否反对 webp 的几种解决办法
发表回复