nginx 之前端图片webp

1.需要有nginx+lua环境（参照前面）

 

2.安装libjpeg,libpng

yum install libjpeg-turbo-devel libjpeg-turbo libpng-devel -y

3.安装LibTIFF 

cd /usr/local/src
wget http://download.osgeo.org/libtiff/tiff-4.0.8.tar.gz
tar -zxvf tiff-4.0.8.tar.gz
cd tiff-4.0.8
./configure
make
make install

 4.安装giflib

cd /usr/local/src
wget  https://downloads.sourceforge.net/giflib/giflib-5.1.4.tar.bz2
tar -jxvf giflib-5.1.4.tar.bz2 
cd giflib-5.1.4
./configure 
make
make install

 5.安装libwebp

cd /usr/local/src
wget http://downloads.webmproject.org/releases/webp/libwebp-0.6.0.tar.gz
tar -zxvf libwebp-0.6.0.tar.gz
cd libwebp-0.6.0
./configure --enable-libwebpmux \
--enable-libwebpdemux \
--enable-libwebpdecoder \
--enable-libwebpextras \
--enable-swap-16bit-csp \
--disable-static

make
make install

 6.测试转换

cwebp -q 75 IIS.png -o IIS-2.webp
cwebp -q 80 image.png -o image.webp

dwebp image.webp -o image.png

 7.webp图片生成脚本

[root@tracker waf]# vim /usr/local/nginx/conf/lua/webp.lua
--检测路径是否目录,新增
local function is_dir(sPath)
    if type(sPath) ~= "string" then
        return false
     end
   local response = os.execute("cd " .. sPath)
    if response == 0 then
        return true
    end
    return false
end

-- 检测文件是否存在
function file_exists(name)
   local f=io.open(name,"r")
   if f~=nil then io.close(f) return true else return false end
end

--获取文件路径，新增
function getFileDir(filename)
    return string.match(filename, "(.+)/[^/]*%.%w+$")
end

-- 检测图片路径，新增
--if not is_dir(getFileDir(ngx.var.img_thumb_path)) then
--    os.execute("mkdir -p " .. getFileDir(ngx.var.img_thumb_path))
--  end
if not is_dir(getFileDir(ngx.var.filename)) then
    os.execute("mkdir -p " .. getFileDir(ngx.var.filename))
   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

--local command = [[/usr/local/GraphicsMagick/bin/gm convert -quality 75 -density 72 +profile "*"  ]] .. ngx.var.request_filepath ..  originalUri  .. " -geometry "  .. " " .. ngx.var.request_filename;
os.execute("/usr/local/bin/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

 8.vhost.conf配置

# web
server {
        listen 8811;
        #charset utf-8;
        server_name 10.1.8.43;

        root    /data/wwwroot/v2.5.1/wap.source/dist;
        index  index.php index.html;

        location / {
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                try_files $uri =404;

                fastcgi_pass  127.0.0.1:9000;
                include fastcgi.conf;
        }

        location ~* ^(.+\.(jpg|jpeg|gif|png))\.webp$ {
                set     $webp_root /data/wwwroot/v2.5.1/wap.source/dist;
                root    $webp_root;
                set     $filename $webp_root$uri;
                if (!-f $filename) {
                        content_by_lua_file "/usr/local/nginx/conf/lua/webp.lua";
                }
        }

        include extra/status.conf;
        access_log  logs/m_access.log access;
}

参考文档：

https://github.com/ShowJoy-com/showjoy-blog/issues/10
https://aotu.io/notes/2016/06/23/explore-something-of-webp/index.html
http://blog.eqoe.cn/posts/switch-to-webp.html
https://developers.google.com/speed/webp/docs/using
https://serverfault.com/questions/810693/nginx-rule-to-serve-webp-images-when-available

http://shanks.leanote.com/post/Untitled-55ca439338f41148cd000759-23

https://www.bbsmax.com/A/8Bz8W7bXdx/

http://blog.eqoe.cn/posts/switch-to-webp.html