Nginx+Lua+libwebp 实现服务器图片自动转WebP

服务器的流量和加载速度一直是优化的重点，既能保证图片的清晰，又能节省流量、提高加载速度才是一个优秀网页需要达到的目标。

Google 推出了一种图片格式: WebP (Google 官方网址)，比同类图片压缩率更高，相同画质下，文件的体积更小 40%。而且主流浏览器的支持率已经达到 80%

查看支持率

ng1

原图加载截图：（12.61s）

ng2

WebP 加载截图：（4.72s）

ng3

可以看出加载 Webp 会大大提高加载速度

Nginx 安装 Lua 模块#

略

服务器安装 libwebp#

libwebp 是图片转成 webp 的工具

yum install libwebp-tools

测试:

cwebp -q 100 1.jpg -o 1.webp

ng4

如果出现以上信息，说明安装成功。

nginx.conf#

配置：

让.png.webp、.jpg.webp、.gif.webp的请求执行转 WebP 的 lua 文件。

location /img {
    expires               365d;
    autoindex             on;
    autoindex_exact_size  on;
    try_files             $uri $uri/ @webp;
}
    
location @webp {    
    if ($uri ~ \.(png|jpg|gif)\.webp) {
        content_by_lua_file  lua/imgProcess.lua;
    }
}

ng5

`imgProcess.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图片去掉.webp后缀

 if not file_exists(originalFile) then
   ngx.exit(404);
   return;
 end
 
 os.execute("cwebp -q 75 " .. originalFile  .. " -o " .. newFile);  --用libwebp转换图片

 if file_exists(newFile) then
     ngx.exec(ngx.var.uri); --重定向到转换成的webp图片
 else
     ngx.exit(404); --转换失败：404
 end

ng6

查看效果#

访问前图片，服务器上没有 WebP 文件。

ng7

当服务器接收到.jpg.webp 的请求后，自动生成 WebP 文件：

ng8