nginx webp правило отображения картинок

Дата | 18.05.2020

nginx webp
Приступим, в nginx webp настройка картинок у сайта.
Сеошники создали задачу, настроить nginx на отдачу формата картинок webp если таковой имеется на сервере, если нет отдавать стандартный формат png или jpeg.
Для внедрения формата webp у web servera, пришлось существенно перенастроить правила обработки картинок nginx servera.
Формат WebP существенно уменьшить размер web страниц.
Проверяем есть ли описания формата в нашем web сервере.

egrep webp /usr/local/etc/nginx/mime.types
    image/webp                                       webp;

Добавляем настройку в секцию http nginx сервера.

map $http_accept $img_suffix {
   "~*webp"  ".webp";
}

Эту настройку добавляем в локейшене для нужного домена.

location ~ ^(?<filename>.+)\.(png|jpe?g)$ {
        expires 30d;
        add_header Vary Accept;
        try_files $filename$img_suffix @noVary;
}
location @noVary {
        expires 30d;
}

В секции map определяем расширение webp.
В переменной $filename будет сохранено только то что совпало с первой скобкой, т.е. имя без расширения \.(png|jpe?g).
Если try_files не находит «image_file.webp», то происходит внутреннее перенаправление на location @noVary без добавления add_header Vary Accept.
Перезагрузим nginx.

/usr/local/etc/rc.d/nginx restart

Проверяем.
Открываем сайт и смотрим заголовки в браузере.

content-type: image/webp
vary: Accept

Вот и все.

Добавлено, обновлено: 22.05.2020
Появился нюанс на использовании такой настройки с web движком simpla.
При такой настройке не будет изменения картинок происходить.
Вот что получилось.
Старые location обработки webp убираем.
Этот location обработки убираем вовсе.

#location ~ ^/files/products/(.+) {
#        try_files $uri $uri/ /resize/resize.php?file=$1&token=$args;
#}

Добавляем новый для двух правил.

location ~ ^/files/products/(?(?.+)\.(png|jpe?g))$ {
    expires 30d;
    add_header Vary Accept;
    try_files /files/products/$filename$img_suffix @noVary;
}

location @noVary {
    expires 30d;
    try_files $uri /resize/resize.php?file=$file&token=$args;
}

Перезагрузим nginx.

/usr/local/etc/rc.d/nginx restart

Проверяем.
Мы только что реализовали в nginx webp настройка картинок.

Оптимизация изображений на сервере.
nginx разделение логов.
nginx блокируем плохих ботов.
joomla nginx redirect.
nginx ssl letsencrypt редирект на другой домен.
nginx geoip фильтрация.

Категории: web Метки:

8 thoughts on “nginx webp правило отображения картинок

  1. Pingback: nginx разделение логов - FRYAHA.RU

  2. Pingback: joomla nginx redirect - FRYAHA.RU

  3. Pingback: nginx ssl letsencrypt редирект на другой домен. - FRYAHA.RU

  4. Pingback: simpla nginx перевод редиректов - FRYAHA.RU

  5. Pingback: nginx блокируем плохих ботов - FRYAHA.RU

  6. Pingback: Оптимизация изображений на сервере. - FRYAHA.RU

  7. Pingback: nginx apache redirect seo - FRYAHA.RU

  8. Pingback: Скрипт сжатия картинок на сервере - FRYAHA.RU

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *