Условно служащее высокое разрешение и WebP отображают с nginx

Не уверенный, если я пытаюсь осуществить невозможное, но я желаю настроить Nginx для обслуживания ".webp" файлов браузерам, которые поддерживают формат файла и файлы нейтрализации подачи (т.е. pngs, jpgs, и т.д.) к браузерам, которые еще не поддерживают формат WebP. Я также хотел бы за Nginx сделать это все при проверке на поддержку сетчатки и обслуживании оригинала, или @2x измерил версии тех фотографий.

Демонстрационный процесс для изображения назвал 'демонстрационную фотографию' в /assets/img/ каталог:

• Проверьте, если поддержка браузера WebP И если это - устройство с высокой разрешающей способностью, служите: "assets/img/sample-photo@2x.webp"
• Устройство не может быть высокой разрешающей способностью, таким образом, вместо этого служите: "assets/img/sample-photo.webp"
• Возможно, WebP не поддерживается, но устройство является высокой разрешающей способностью так подача: "assets/img/sample-photo@2x.png"
• Браузер не поддерживает WebP, и устройство НЕ является высокой разрешающей способностью, служите: "assets/img/sample-photo.png"

Я попробовал это сам, но не имею большой удачи. Я нашел два потрясающих сообщения, которые помогли мне запуститься в правильном направлении. Мой код Below. Действительно ценил бы любое понимание и помог бы на этом. Моя первая мысль - возможно, что-то, на что wonky идет в последнем try_files оператор. Большое спасибо!

1. Условно служащие изображения высокого разрешения
2. Служите файлам с nginx условно

Этот код находится в заголовке HTML моего документа. Проверки на поддержку с высокой разрешающей способностью и наборы cookie:

<!-- Set the 'device-pixel-ratio' cookie with Javascript if hi-res is supported -->
<script type="text/javascript">
    if (!document.cookie.match(/\bdevice-pixel-ratio=/)) {
        document.cookie = 'device-pixel-ratio='
            + (window.devicePixelRatio > 1 ? '2' : '1') + '; path=/';
    }
</script>

<!-- A CSS-only fallback of setting the 'device-pixel-ratio' cookie just in case browsers have Javascript disabled -->
<style type="text/css">
    @media only screen and (-webkit-min-device-pixel-ratio : 2),
        only screen and (min-device-pixel-ratio : 2) {

        head {
            background-image: url(/set-device-pixel-ratio/2);
        }
    }
</style>

Это - большая часть моей базы 'nginx.conf' файл. Пропущенный некоторые части для краткости:

user www-data;
http {
    ##
    # Basic Settings
    ##
    sendfile on;

        include /etc/nginx/mime.types;
        default_type application_octet-stream;

        ##
        # Gzip Settings
        ##
        gzip on;
        gzip_disable "msie6";
        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript

        ##
        # Conditional variables--
        # Define a variable called "$webp_suffix" if the HTTP Accept header contains the "webp" substring
        # and populate it with 'webp', otherwise leave empty.
        ##
        map $http_accept $webp_suffix {
            default     ""
            "~*webp"    ".webp";
        }
}

Наконец, это - блок сервера, который я создал для своего сайта:

server {
    listen 80;
    server_name localhost;
    root /var/www;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    # Sets the device-pixel-ratio cookie
    location ~ /set-device-pixel-ratio/(/d+)/? {
        add_header Set-Cookie "device-pixel-ratio=$1;Path=/;Max-Age=31536000";
        return 204; # nginx does not allow empty 200 responses
    }

    # Serve appropriate image assets
    location ~(/assets/img/[^\.]+)(\.(?:jpg|jpeg|png|gif))$ {
        # Naming convention for hi-res images:
        set $hidpi_uri $1@2x$2;

        if ($http_cookie !~ 'device-pixel-ratio=2') {
            break;
        }

        try_files $hidpi_uri$webp_suffix $uri$webp_suffix $uri =404;
    }
}