如果是Chrome,请使用WebP

时间:2013-03-01 19:25:23

标签: performance google-chrome optimization opera webp

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

感谢。

2 个答案:

答案 0 :(得分:3)

暂时,thumbor支持自动webp转换:

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

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

希望有所帮助!

答案 1 :(得分:2)

我解决了这个问题:

  • 检查客户端是否在Accept header
  • 中公布“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

我的conf:

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