一般商品主圖大小為800800（淘寶）或者750750（京東），即便以72*72的分辨率去做圖，圖片的大小也有幾百k，對于移動端而已，圖片過大，加載過慢，于是研究了下用Nginx和Lua進行圖片webp壓縮處理。以下我主要參考的幾篇文章：
通過 Nginx-Lua 自動轉換圖片為 WebP 格式
nginx 之前端圖片webp
centos yum 安裝nginx 后增加模塊
centos-nginx添加模塊(無需重新編譯)

下面進入正題：

安裝libwebp

wget "http://downloads.webmproject.org/releases/webp/libwebp-0.6.0-linux-x86-64.tar.gz" tar --strip-components 1 -xzvf libwebp*.gz -C /usr/local

測試是否安裝成功

cwebp -q 75 test.png -o test.png.webp

為nginx添加lua模塊

由于我本來就已經安裝好了nginx，也不便停用，故只能為nginx添加lua模塊。如果是全新安裝nginx的同學，建議直接安裝OpenResty，里面集成了nginx和lua。以下開始安裝：

cd /rootwget https://github.com/openresty/lua-nginx-module/archive/v0.10.11.zipunzip v0.10.11.zipwget https://github.com/simpl/ngx_devel_kit/archive/v0.3.0.zipunzip v0.3.0.zipwget http://luajit.org/download/LuaJIT-2.0.5.zipunzip LuaJIT-2.0.5.zipcd LuaJIT-2.0.5makemake install PREFIX=/usr/local/luajitcat > /etc/ld.so.conf.d/luajit.conf<<EOF /usr/local/luajit/lib EOFldconfigexport LUAJIT_LIB=/usr/local/luajit/libexport LUAJIT_INC=/usr/local/luajit/include/luajit-2.0

由于我是用yum安裝的nginx，查看現在的nginx版本，然后再重新編譯。

nginx -Vnginx version: nginx/1.14.0 built by gcc 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC) built with OpenSSL 1.0.2k-fips 26 Jan 2017 TLS SNI support enabled configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie'

于是下載1.14.0版本：

$ wget http://nginx.org/download/nginx-1.14.0.tar.gz $ tar xvzf nginx-1.14.0.tar.gz

然后重新編譯

cd nginx-1.14.0 ./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie' --add-module=/root/lua-nginx-module-0.10.11 --add-module=/root/ngx_devel_kit-0.3.0$ make #千萬別make install，否則就覆蓋安裝了#備份舊的nginx程序$ cp /usr/sbin/nginx /usr/sbin/nginx.bak#把新的nginx程序覆蓋舊的$ cp objs/nginx /usr/sbin/nginx#重啟nginx $ sudo systemctl restart nginx.service

圖片壓縮配置

新建webp.lua文件

function file_exists(name)local f=io.open(name,"r")if f~=nil then io.close(f) return true else return false end endlocal newFile = ngx.var.request_filename; local originalFile = newFile:sub(1, #newFile - 5); -- 去掉 .webp 的后綴 if not file_exists(originalFile) then -- 原文件不存在ngx.exit(404);return; endlocal cmdstr = "cwebp -q 20 " .. originalFile .. " -o " .. newFile; -- 轉換原圖片到 webp 格式，這里的質量是 20, 壓縮比例為90% cmdstr = string.gsub(cmdstr,"%$","\\$"); -- 處理字符串中含有dollar符號的 os.execute(cmdstr);if file_exists(newFile) then -- 如果新文件存在（轉換成功）ngx.exec(ngx.var.uri) -- Internal Redirect elsengx.exit(404) end

如果文件名中有$符號

修改img.conf配置,在server中添加

# webp 壓縮location ~* ^(.+\.(jpg|jpeg|gif|png))\.webp$ {set $webp_root /mnt/www/img;root $webp_root;set $filename $webp_root$uri;if (!-f $filename) {set $request_filepath $webp_root$1;content_by_lua_file "/etc/nginx/conf.d/webp.lua";}}

重啟nginx即可訪問了。

后續

經過上面的一波操作，我們終于可以使用webp壓縮了。 不過，可惜的webp的google的標準，由于我們的圖片要使用在微信小程序上，而iphone的微信小程序內置的瀏覽器不支持webp格式。于是只能放棄webp，下面使用的是GraphicsMagick壓縮方式來替代。

安裝GraphicsMagick

wget https://nchc.dl.sourceforge.net/project/graphicsmagick/graphicsmagick/1.3.31/GraphicsMagick-1.3.31.tar.xz xz -d GraphicsMagick-1.3.31.tar.xz tar -xvf GraphicsMagick-1.3.31.tar cd GraphicsMagick-1.3.31 ./configure make make install

修改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 gmReqFile = ngx.var.request_filename; -- 原來訪問地址 local originalFile = string.gsub(gmReqFile, "gm/",""); -- 去掉 gm 文件夾 local gmDir = string.match(originalFile, "(.+)/[^/]*%.%w+$") .. "/gm"; -- gm目錄 --local imgName = string.match(originalFile, ".+/([^/]*%.%w+)$"); -- 文件名帶原本的后綴 local imgName = string.match(originalFile, ".+/([^/]*)%.%w+$"); -- 文件名,無后綴 local gmFile = gmDir .. "/" .. imgName .. ".jpg"; -- 最終訪問文件, 全部轉為jpg if file_exists(gmFile) then -- 如果壓縮圖已經存在ngx.exec(string.gsub(ngx.var.uri, "png","jpg"))--ngx.exec(ngx.var.uri) end if not file_exists(originalFile) then -- 原文件不存在ngx.exit(404);return; end local response = os.execute("cd " .. gmDir) -- 如果gm文件夾不存在 if response ~= 0 thenos.execute("mkdir -p " .. gmDir); end local cmdstr = "gm convert -quality 75% " .. originalFile .. " " .. gmFile; -- 轉換質量 75 % ,由于不同圖片色彩不一樣，壓縮比例會不同，30%到90% cmdstr = string.gsub(cmdstr,"%$","\\$"); -- 處理字符串中含有dollar符號的 os.execute(cmdstr); if file_exists(gmFile) then -- 如果新文件存在（轉換成功）ngx.exec(string.gsub(ngx.var.uri, "png","jpg"))--ngx.exec(ngx.var.uri) elsengx.exit(404) end

總結

以上是生活随笔為你收集整理的使用Nginx和Lua进行图片webp压缩处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。