Skip to main content
 首页 » 编程设计

performance之如果是 Chrome,请使用 WebP

2025年05月04日147haluo1

由于目前只有 Chrome 和 Opera 支持 WebP,我想知道是否可以针对这两个特定浏览器并将它们重定向以获取我网站的另一个版本,以便我可以帮助我更快地优化我的网站下载速度?

谢谢。

请您参考如下方法:

我这样解决了这个问题:

  • 检查客户端是否在 Accept header 中宣传“image/webp”
  • 如果支持 WebP,请检查本地 WebP 文件是否在磁盘上,以及 上 table
  • 如果服务器配置为代理,则附加一个“WebP: true” header 并 转发到后端
  • 如果提供 WebP Assets ,则附加“Vary: Accept”

在 Nginx 中:

location / { 
    if ($http_accept ~* "webp") { set $webp "true"; } 
    # Use $webp variable to add correct image.  
} 

就我而言,我使用 thumbor 软件来转换图像。 https://github.com/globocom/thumbor

pip install thumbor 

我的 session :

upstream thumbor  { 
    server 127.0.0.1:9990; 
    server 127.0.0.1:9991; 
    server 127.0.0.1:9992; 
    server 127.0.0.1:9993; 
    server 127.0.0.1:9994; 
} 
location / { 
    if ($http_accept ~* "webp") { 
        set $webp "T"; 
    } 
    if ($uri ~* "(jpg|jpeg)$") { 
         set $webp "${webp}T"; 
    } 
    proxy_cache_key $host$request_uri$webp; 
 
    if ($webp = "TT") { 
        rewrite ^(.*)$ "/unsafe/smart/filters:format(webp)/exemple.com$uri" break; 
        proxy_pass http://thumbor; 
        add_header Content-Disposition "inline; filename=image.webp"; 
    } 
    if ($webp != "TT") { 
        proxy_pass http://exemple.com; 
    } 
}