通过 Nginx-Lua 自动转换图片为 WEBP 格式

之前介绍了利用七牛云和又拍云输出格式为webp的图片,现在介绍服务器自动转换为 Google 的 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 格式,对前端做一些修改即可完成图片格式的自动选择。

点赞
  1. assignment 代写说道:

    很好的分享,赞赞。

  2. 抛物线说道:

    12

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.