CloudFlareを使用してWebP画像を提供することは不可能ですか？
WebP形式を使用してサイト上のいくつかの画像を最適化したい。
Webp画像は、Googleで開発されたアルゴリズムを使用して、高度に圧縮されたjpegおよびpngです。
ただし、webp画像はmodern ChromeおよびOperaでのみ表示できます。ブラウザがwebpをサポートしている場合は、AcceptHTTPヘッダーにimage/webpを指定します。
ブラウザがwebp形式をサポートしているかどうか、およびイメージのwebpバージョンがディスクに存在するかどうかをnginxでチェックすることをお勧めします。存在する場合は、webpイメージを提供し、そうでない場合はデフォルトイメージを提供します。
例えば：
http://example.com/dog.png、Accept: image/webp, image/png, image/jpeg。 nginxはdog.png.webpを送信する必要があります
http://example.com/dog.png、Accept: image/png, image/jpeg。 nginxはdog.pngを送信する必要があります
このnginx構成https://github.com/igrigorik/webp-detect/blob/master/nginx.confおよびhttps://github.com/kavu/sprockets-webp#nginxにもう少し説明があります。
それで大丈夫です。しかし、私はCloudFlareCDNを使用してアセット配信を高速化しています。
このような画像提供条件では、ブラウザとプロキシでのキャッシュが正しく機能するように、ヘッダーVary: Acceptを追加する必要があります。しかし問題がある！ CloudFlareはVary: Accept-Encodingのみをサポートします。これについて説明します ここ 。
クライアントは最初にCloudFlareによってキャッシュされたバージョンの画像（webpまたは通常）を取得します。クライアントがwebpをサポートしていない場合、画像は表示されず、ひどいものになります。
解決策はありますか？
CloudFlareを使用してそれを行うことはできないようです。しかし、彼らのサポートチームに聞いてください、彼らは素晴らしいです。
古いブラウザでは問題になる可能性がありますが、クライアント側で実行する必要がある場合があります。 Google WebP FAQ から
HTML5は要素をサポートしており、クライアントが適切に表示できる最初の候補画像を要求するように、複数の代替画像ターゲットを優先順に一覧表示できます。 HTML5ロックに関するこのディスカッション を参照してください。