Назад | Перейти на главную страницу

Правило 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;
}

nginx rewrite

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

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

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

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

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

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

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