Вопросы Теги

Правило Nginx для обслуживания изображений WebP, когда они доступны

Я пытаюсь передать изображения webp на сервер поддерживающих браузеров с помощью кода ниже. У меня уже есть изображения .webp в дополнение к изображениям .png и .jpg одного и того же файла.

Например, если есть изображение с именем vacation.jpg, у меня также есть Vacation.jpg.webp.

Приведенный ниже код работает но он перезаписывал другие мои блоки местоположения, прежде чем я переключился на CDN. Теперь я использую CDN, этот блок кода не имеет никакого эффекта, нет изображений WEBP в ответ, а также не перезаписывает другие мои блоки местоположения.

Вот как это сделать:

Добавьте в / etc / nginx / mime.types 

“image/webp webp”

Добавить в основной файл nginx.conf : 

map $http_accept $webp_suffix {
  default “”;
  “~*webp” “.webp”;
}

Добавить в серверный блок : 

location ~* ^/wp-content/.+\.(png|jpg)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

Перезапустить или перезагрузить nginx.

Пример других моих блоков местоположения :

Отключить горячее связывание 

location ~ .(ico|gif|png|jpe?g|svg|webp)$ {
    valid_referers none blocked example.com *.example.com;
    if ($invalid_referer) {
       return 403;
   }
}

Разрешить перекрестный источник для файлов статических доменов 

    location ~ \.(ico|gif|png|jpe?|svg|webp|eot|otf|ttf|ttc|woff|woff2|ogg|js|css|font.css)$ {
        add_header Access-Control-Allow-Origin "*";
        #gzip_vary on;
        expires 30d;
}
0
задан 25 October 2016 в 02:11
1 ответ

Исходный вопрос был полностью изменен после того, как я опубликовал этот ответ, и этот ответ больше не имеет отношения к вопросу.

Несмотря на то, что ваше намерение хорошее, тот факт, что вы делаете 302 перенаправление при обнаружении версии .webp уменьшает выигрыш.

Перенаправление добавляет два цикла приема-передачи по задержке ко времени загрузки изображения, и если изображение достаточно маленькое, потребуется больше времени для получить версию .webp , чем исходная.

Чтобы исправить это, вы должны сгенерировать URL-адреса непосредственно в коде вашего веб-сайта.

Однако, чтобы ответить на ваш текущий вопрос, вы можете использовать этот набор rules: 

location ~ ^(/wp-content.+)\.(jpe?g|png)$ {
    set $red Z;

    if ($http_accept ~* "webp") {
        set $red A;
    }

    if (-f $request_filename.webp) {
        set $red "${red}B";
    }

    if ($red = "AB") {
        add_header Vary Accept;
        return 302 $1.webp;
    }
}

Идея заключается в том, что первая часть имени файла уже записана в вашем местоположении d директива. Следовательно, первая часть нового местоположения находится в переменной захвата регулярного выражения $ 1 . Таким образом, можно просто использовать $ 1 в директиве return . Я использую здесь return , так как это быстрее, чем rewrite .

2
ответ дан 4 December 2019 в 13:38

Теги

Похожие вопросы