让Nginx的image-filter支持高压缩质量无差异webp图片格式

现在webp格式约来约流行了，

不知道什么webp？

介绍介绍

WebP 在各大互联网公司已经使用得很多了，国外的有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

之前做过一个测试，对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果：

更多测试查看 WebP 示例 (PNG 转 WebP)（请用 Chrome 浏览器打开）

可以得出结论：

• PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
• 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
• 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

经测试，JPEG 转 WebP 的效果更佳。13 年底 Google 正式推出 Animated WebP，即动态 WebP，既支持 GIF 转 WebP，同时也支持将多张 WebP 图片生成 Animated WebP。但是压缩效果未能达到宣传的那样。如果你在使用 Chrome32 以上的浏览器，可以点这里查看官方提供的实例： WebP 示例 (Animated WebP)。

科技博客 Gig???aOM 曾报道：YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提升了 10%；谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3；Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间。

至于 WebP 的兼容性，在国内，WebP 已经得到半数用户的支持了 Can I use... Support tables for HTML5, CSS3, etc

同时在 Android 和 iOS 平台中同样有官方的解析库提供。如果你的网站以图片为主，或者你的产品基于 Chromium 内核，建议体验尝试。

介绍完成我们来安装

基于centos7

1.先装webp

yum -y install libwebp libwebp-devel libtiff libtiff-devel libwebp-tools

2.编译libgd 库，因为yum 装的没有支持webp图片格式

wget https://github.com/libgd/libgd/releases/download/gd-2.2.5/libgd-2.2.5.tar.gz #下载libgd
./configure --with-zlib --with-png --with-freetype --with-fontconfig --with-jpeg --with-xpm  --with-webp  #编译参数，打开webp支持
make -j 16 && make install #编译安装

3 删除旧的链接，使用新编译的文件新建链接文件

cd /usr/lib64 rm -rf libgd.so libgd.so.2 #cp libgd 3.0 from /usr/local/lib cp /usr/local/lib/libgd.so.3.0.5 /usr/lib64 ln -s libgd.so.3.0.5 libgd.so ln -s libgd.so.3.0.5 libgd.so.3

4 重新编译nginx

编译参数的时候查找关键字

checking for GD library ... found checking for GD WebP support ... found

5，杀掉nginx，重启