xFeedBeta

@banmiya

半米牙·5 years ago

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

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