performance - 如果是 Chrome，请使用 WebP

Question

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

谢谢。

Answer 1

我这样解决了这个问题：

• 检查客户端是否在 Accept 标头中宣传“image/webp”
• 如果支持 WebP，请检查本地 WebP 文件是否在磁盘上，并提供它
• 如果服务器配置为代理，则附加一个“WebP：true”标头并转发到后端
• 如果提供了 WebP 资产，则附加“Vary: Accept”

在 Nginx 中：

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

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

pip install thumbor

我的自信：

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;
    }
}

Answer 2

有一段时间，thumbor 支持自动 webp 转换：

https://github.com/thumbor/thumbor/wiki/Configuration#auto_webp

您仍然需要配置负载均衡器以传递 webp 接受标头，但除此之外，thumbor 将为您处理所有事情。

希望有帮助！