WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。需要 Chrome支持 。
目标:在访问 xxx.png/jpg.webp 时 ,自动从 xxx.png/jpg 生成 对应webp 图片,并且返回给请求,要求高速,Nginx-lua 可以将这一需求截断在 网络请求,并且 Lua
执行速度快。
Nginx配置
location ~ /img/article/(\d)+/ { # 按照自己的规则定义正则匹配
expires 30d; # 设置资源缓存30天
try_files $uri $uri/ @webp; # 如果文件不存在尝试生成 webp 图片
}
location @webp{
if ($uri ~ "/([a-zA-Z0-9-_]+)\.(png|jpg|gif)\.webp") {
content_by_lua_file "/usr/local/openresty/nginx/lua/webp.lua"; # 设置lua脚本path
}
}
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);
if not file_exists(originalFile) then
ngx.exit(404);
return;
end
-- cwebp -q 50 2.png -o 2.webp
executeCmd = "cwebp -q 80 " .. originalFile .. " -o " .. newFile
os.execute(executeCmd);
if file_exists(newFile) then
ngx.exec(ngx.var.uri)
else
--调试代码 start
file = io.open ("/usr/local/openresty/nginx/logs/file.log" ,"a")
file:write("\n")
file:write(executeCmd)
file:write("\n")
file:write(originalFile)
file:write("\n")
file:write(newFile)
file:write("\n")
file:close()
--调试代码 end
ngx.exit(404)
end
图片效果和质量对比
效果:
大小: