performance - Chrome の場合は WebP を使用

Question

現在、Chrome と Opera のみが WebP をサポートしているため、サイトのダウンロード速度をより高速に最適化できるように、これら 2 つの特定のブラウザーをターゲットにして、それらをリダイレクトして、私の Web サイトの別のバージョンを取得できるかどうか疑問に思っていました。

ありがとう。

Answer 1

しばらくの間、thumor は webp の自動変換をサポートしています:

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

webp accept ヘッダーを渡すようにロード バランサーを構成する必要がありますが、それ以外は、thumor がすべて処理してくれます。

それが役立つことを願っています!

Answer 2

私はこの問題を次のように解決しました：

• クライアントが 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. 
}

私の場合、thumor ソフトウェアを使用して画像を変換します。 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;
    }
}