nginx通过useragent区分浏览器是否支持webp

另外一个站点使用了CDN,图片挺多的。导致了流量一大,CDN的花费也跟着上升。同时,如果同一个页面图片过多或者过大也会影响访客的访问。一张图片动辄几十KB或者上百KB,想尽办法优化样式、脚本文件所优化的图片流量其实还不如一张图片大。
优化的方法,参考了很多。最后选择了 Google 的 WebP 格式,可以对图片的大小进行很大的减少。但是并非所有浏览器都支持 WebP,所以呢参考了一些教程与方案通过nginx来进行浏览器区分,判断是否调用webp。

配置需要:

支持lua的nginx;
nginx替换模块ngx_http_substitutions_filter_module;

配置nginx自动转换webp:https://www.32.tf/312.html

1.调整网站的默认conf配置,修改成两个端口不同配置(这只是一个参考配置,具体根据不同网站的实际情况修改)。

server
{
    //不支持webp的网站
    listen 81;
    server_name 你的域名;
    index index.php index.html index.htm default.php default.htm default.html;
    root /网站根目录;
    

	  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        access_log off;
    }

                
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        access_log off; 
    }
 
    
}
server
{
 //支持webp的网站
    listen 82;
    server_name www.32.tf;
    index index.php index.html index.htm default.php default.htm default.html;
    root 网站根目录;
    
    //用于替换网站页面图片后缓
    subs_filter .jpg .jpg.webp;
    subs_filter .png .png.webp;
    subs_filter .jpeg .jpeg.webp;


	location ~* ^(.+\.(jpg|jpeg|png))\.webp$ {
                        set     $webp_root 网站根目录;
                        root    $webp_root;
                        
                        set $filename $webp_root$uri;
                        if (!-f $filename) {
                                set $request_filepath $webp_root$1;
                                content_by_lua_file "/www/server/nginx/waf/webp.lua";//webp自动生成规则
                        }
                }


	  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|webp)$
    {
        access_log off;
    }

                
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        access_log off; 
    }

    
}

2.设置前端反向代理的nginx配置,用于区分浏览器,然后反代到不同的配置。
由于使用了替换页面图片后缓功能,所以当我们在网站后台上传图片和编辑文章的时候都会默认的替换了图片的后缓,导致会出现一些莫名其妙的问题。所以以下配置里,设置了后台管理界面不进行内容替换。

 
    server
{
    listen 80;
    server_name www.32.tf 32.tf;
    
    location / 
    {
        proxy_set_header X-Forwarded-For $remote_addr;
		proxy_set_header Host www.32.tf;
		proxy_pass http://127.0.0.1:81;
       	
        if ($http_user_agent ~* (Chrome|android|opera)) {  
        set $webp 1; 
		}  
        if ($request_uri ~* /wp-admin/){
        set $webp 0;
        }
        if ($webp = 1){
        proxy_pass http://127.0.0.1:82;
        }
    }
        
    }

成功的例子可以参考本站。同时用支持webp的浏览器chrome或者opera和不支持webp的浏览器IE,火狐进行一个对比。
就会发现当使用支持webp的时,页面的图片自动替换成了webp,而不支持webp的浏览器访问的还是默认的图片格式。
国内的双核浏览器中极速内核大部分均为Chrome内核。