一场关于webp的革命，让你的网站更丝滑
webp是什么？
webp是谷歌推出的一种新型图片格式，从2010发布到现在已经过去了10年。其通过减少文件大小，但达到和JPEG格式相同的图片质量，来缩短图片的网络请求时长。值得注意的是，图片不能过大，webp支持的图片像素最大数量是16383x16383(width x height)。
webp的兼容性怎么样？
特定场景下，webp是一个很不错的选择，比如大屏可视化，花瓣网那种图片素材网站，京东淘宝等电商平台，应用很广。感兴趣的可以去某个网站通过network网络面板进行查看，看看什么样的图片场景使用了webp。好用，但并不意味着可以全线使用。下面这张图是webp在不同浏览器下的兼容情况。
比较明显的，除了ie和苹果，其他的都没啥大问题。然而现实的问题就是，这两类浏览器涵盖的用户量还挺多的。如果使用，需要做降级处理，降级成png,jpeg,jpg等其他支持的图片格式。当然，如果一切以chrome为标准，不考虑兼容问题，那就可以无脑用了。
webp和同类图片格式的比较
webp是否真的能在轻量和色彩度上鱼和熊掌兼得呢？
我们来进行一个测试。最近在学英语，我就用一张英语知识点的思维导图来当案例了,测试网址见文末。
如果你对英语不感兴趣，可以不用过多关注上边图片中的内容，只需知道这张图原始大小为1.14M,png格式。如果不做任何处理，尤其是网不好的情况下，加载真的很慢，有部分白屏，然后一点点加载…体验很差。那么转成webp会如何呢？来看一下对比数据。
一图胜千言，处理成webp格式的图片尺寸小了一半多，接下来再看看视觉效果，下边这张图是webp格式
仔细康康昂，视觉角度，有明显差异吗？几乎没有，放大效果也是差不多的，但事实就是，图片尺寸确实小了很多。webp真的做到了鱼和熊掌兼得。
如何把其他格式图片转成webp格式？
- 如果不用程序实现，文末的那个测试地址就可以了
- 当然，作为程序员，我们还是倾向用程序实现的，这里以nodejs为例
1. 安装cwebp-bin cnpm i cwebp-bin (windows平台推荐使用cnpm安装)
2. 编写转换方法towebp
3. 输入原始图片地址和输出图片地址，调用towebp函数进行测试
4. 注意，原始图片尺寸不要超过16383x16383(width x height)，超过会报错，这是webp的像素支持上限了
const { execFile } = require('child_process');
const cwebp = require('cwebp-bin');
function towebp (src, target) {
return new Promise((resolve, reject) => {
execFile(cwebp, [src, '-o', target], err => {
if (err) { reject(err); }
resolve(true)
});
})
}
webp的选择时机和降级处理
webp的出现不是为了取代原有图片格式的，所以没必要什么图片都拿来转一下，如果图片特别小，其实转成webp也没有太大效果。可以参考一下淘宝京东等电商平台不同场景下图片格式的选用。还有就是浏览器的兼容性，要做降级处理。这里采用html5的picture标签来做降级处理。
<picture>
<source srcset="/名词性从句.webp"> </source>
<img src="/名词性从句.png" alt="名词性从句">
</picture>
上边这种写法，浏览器会优先解析webp格式图片，如果不支持，就降级采用png的图片，无论哪种，都不会两个都下载的，这才符合预期。
当然，如果是ie，那么它可能识别不了html5的新标签，可以使用html5shiv这个大补丁，让ie支持，文末附上html5shiv的cdn地址。
下面来看一下ie下降级成png的效果，这里使用了html5shiv
chrome显示肯定是没问题的，这里看一下资源加载,：只会加载一种图片格式，这正是我们预期的
如果你不想用html的方式，也可以用js做降级处理
//这里的!![].map是对低级ie的校验，防止后边的方法挂掉
let allowWebp= !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
项目中的实践
涉及用户自定义图片处理的，都会提供上传接口，可以在后台对用户上传的图片做一个处理，将大图转成webp,然后前端做降级处理。
对于用户而言，能明显体会到加载速度变快，至于图片转换前后的质量和色彩度，几乎是无感知的。
总结
本文从webp的概念入手，先后分析了webp的兼容性，优缺点，并和其他图片格式进行比较，最后给出了一套后端的转换方案和前端的降级处理策略。最后安利一波我的英语学习网站，包含英语基础语法，侧重图文展示的早安分享和侧重英语短视频的晚安分享。
相关链接
- webp测试网站：https://zhitu.isux.us/
- html5shiv ：https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js
- 花瓣：https://huaban.com/
- 京东：https://www.jd.com/
- 淘宝：https://www.taobao.com/
- enote英语学习网站：https://lengyuexin.github.io/