webp 图片格式
webp 是一种图片格式，出自强大的谷歌公司，具体详情请自行百度了解
兼容性：
PC：目前支持以 谷歌内核（webkit）渲染的浏览器，其他主要浏览器支持的不是很好，移动端：android 支持的很好，IOS 即将支持，说明暂时还是不是支持
文件大小对比：
5张图片文件大小（jpg），如图：
5张同样的图片文件大小(webp), 如图：
相信大家已经看出来了吧，压缩式很明显的，少的不是一点两点吧 哈哈~~~~
至于时间嘛！ 从理论上来将 webp 格式的图片会比 jpg 格式的图片在渲染上来说是比较慢的，但是别忘记了，人家体积比你小了很多，所以在整体时间来看的话 webp 格式的图片用时反而比 JPG 图片的用时要短
效果：
jpg :
webp:
区别不是很大吧！可以说几乎无区别吧 oh~~~
上边说了么那么多，下边来简单说下怎么实现吧！
首先，得有 webp 格式的图片吧!
下载谷歌提供的一个工具可以把 jpg png 转换成 webp
下载完后打开文件夹，应该是这样的
生成的话是用第一个 cwebp.exe, 怎么用呢？
在终端直接上述 bin 文件里，然后输入 cwebp -H 输出帮助文档说明成功了
紧接着 输入 cwebp -q 80 image.png -o image.webp （具体 -q 什么意思 查看 cwebp -H 列出的帮助文档） 这时候就会看到一张 webp 格式的图片生成了，那么问题来了，这怎么使用呢？
很简单，直接在 img 标签中引入 webp 格式的图片即可，当然只有在 webkit 内核浏览器下方可观看（eg: 谷歌）
心血来潮，想在本地搭建一个网站，好在别人面前show一把，结果发现怎么挂载到 IIS 上后 webp 图片不显示呢？ 奇了怪了~~~~
原因也很简单，因为 IIS 中默认的不支持 webp 格式的，打开MIME类型 如图： 
，点击右边的 打开功能 如图：
，进去之后点击右边的 添加按钮 如图
在弹出的对话框填写如图所示信息 
，ok 重启下 IIS 再刷新浏览器是不是就可以看了呢~~~~
那么，问题来了，网站图片那么多，而且还在不停的增加 删除 等等一系列的操作，照上边那么做，一张一张去转换，岂不累死，淡定淡定~~~~ 此时要 node 登场了！！！！
先写一个JS 文件 webp.js 具体代码如下：
const process = require('child_process');
const fs = require('fs');
const chokidar = require('chokidar');
const log = console.log.bind(console);
const ignoreFiles = /(^\..+)|(.+[\/\\]\..+)|(.+?\.webp$)/; // 忽略文件.开头和.webp结尾的
let quality = 75; // webp图片质量，默认75
let imgDir = 'gallery'; // 默认图片文件夹
// 得到对应的webp格式的文件名，默认为文件名后加上.webp
function getWebpImgName(path) {
return `${path}.webp`;
}
// 得到shell命令
function getShellCmd(path) {
return `cwebp -q ${quality} ${path} -o ${getWebpImgName(path)}`;
}
// 监控文件夹
var watcher = chokidar.watch(imgDir, {
ignored: path => {
return ignoreFiles.test(path);
},
persistent: true // 保持监听状态
});
// 监听增加，修改，删除文件的事件
watcher.on('all', (event, path) => {
switch (event) {
case 'add':
case 'change':
generateWebpImg(path, (status) => {
log('生成图片' + getWebpImgName(path) + status);
});
break;
case 'unlink':
deleteWebpImg(getWebpImgName(path), (status) => {
log('删除图片' + getWebpImgName(path) + status);
});
break;
default:
break;
}
});
log('biubiubiu~~~ 监控已经启动');
function generateWebpImg(path, cb) {
process.exec(getShellCmd(path), err => {
if (err !== null) {
cb('失败');
log('请先运行cwebp -h命令检查cwebp是否安装ok。')
log(err);
} else {
cb('成功');
}
});
}
function deleteWebpImg(path, cb) {
fs.unlink(path, (err) => {
if (err) {
cb('失败');
log(err)
} else {
cb('成功');
};
});
}
let imgDir = 'gallery'; // 默认图片文件路径，注意修改成自己的图片路径
然后再终端输入 node webp.js 就会在生成对应的 webp 格式的图片，并且指定的文件夹里发生图片的增加 删除都会自动执行，不需要再手动去执行，是不是很方便 哈哈~~~~
然而，在方便的同时，由于其他浏览器不支持，那么就会造成服务器同样的图片得放两份，有点太占用硬盘空间，怎么能弄的兼容呢？
webpJS 能解决此问题 下载
下载后直接在页面中引用即可，会发现 body 中 img 图片地址加载的 webp 格式的图片就会显示了，但是如果图片是动态添加的怎么弄呢？
那就需要动态的去添加此 JS 文件
function webPfn(){ var WebP=new Image(); WebP.onload=WebP.onerror=function(){ if(WebP.height!=2){ var sc=document.createElement('script'); sc.type='text/javascript'; sc.async=true; var s=document.getElementsByTagName('script')[0]; sc.src='webpjs-0.0.2.min.js'; s.parentNode.insertBefore(sc,s); } }; WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; }
上述函数主要功能： 用 new 出来的 Image 去加载一个 2px 宽的 webp 格式的图片，如果加载后图片宽度不等于 2 ，那就说明浏览器不支持 webp 格式的图片，就动态加载 webpJS 文件
参考链接：
http://www.cnblogs.com/season-huang/p/5804884.html
https://developers.google.com/speed/webp/docs/using
http://isux.tencent.com/introduction-of-webp.html
http://webp.codeplex.com/ c# 保存图片时用到的插件地址
