今天介绍一下将服务器上的图片输出为WebP格式，可以减小很大一部分的图片空间占用哦！
不多说，上干货！！！
安装 libwebp （带 webp 命令行工具包）
通过包管理安装 libwebp
pacman -S libwebp
手动安装
wget “http://downloads.webmproject.org/releases/webp/libwebp-0.5.0-linux-x86-64.tar.gz“ tar –strip-components 1 -xzvf libwebp*.gz -C /usr/local
这样我们就会有了 libwebp 和 “cwebp” 命令来方便的编码图片
自动转换
Lua 代码
因为图片转换只是一次性的，转换完成之后就会直接存储在磁盘上，不会有太大的性能损耗，所以我们可以直接调用命令行工具。
function file_exists(name)
local f=io.open(name,"r")
if f~=nil then io.close(f) return true else return false end
end
local newFile = ngx.var.request_filename;
local originalFile = newFile:sub(1, #newFile - 5); -- 去掉 .webp 的后缀
if not file_exists(originalFile) then -- 原文件不存在
ngx.exit(404);
return;
end
os.execute("cwebp -q 75 " .. originalFile .. " -o " .. newFile); -- 转换原图片到 webp 格式，这里的质量是 75 ，你也可以改成别的
if file_exists(newFile) then -- 如果新文件存在（转换成功）
ngx.exec(ngx.var.uri) -- Internal Redirect
else
ngx.exit(404)
end
Nginx 配置
在 http 块中加入
lua_package_path "/usr/local/openresty/nginx/conf/lua/?.lua;"; ＃ 指向存放 lua 代码的路径
server 块中加入一个 location
location /images {
expires 365d;
try_files $uri $uri/ @webp; # 如果文件不存在尝试生成 webp 图片
}
location @webp{
if ($uri ~ "/([a-zA-Z0-9-_]+).(png|jpg|gif).webp") { # 这里可以改成你自己的路径匹配，很重要，否则可能会导致别的文件被恶意覆盖等
content_by_lua_file "/usr/local/nginx/conf/waf/webp.lua";
}
}
测试效果
重启 Nginx 后，访问原图片路径并在后面加 .webp 扩展名，即可看到图片被正常的转换成了 webp 格式，对前端做一些修改即可完成图片格式的自动选择。
