Работа с картинками в веб-сервере Angie (Nginx)
Без изображений сегодня не обходится ни один современный веб-ресурс и в тоже время изображения могут оказаться самой тяжеловесной частью сайта и серьезно замедлять его работу.
Конечно, работу с изображениями лучше построить еще на этапе подготовки материалов, но не всегда это возможно, особенно если за публикацию материалов отвечают технически неграмотные сотрудники, которые могут разместить на сайте полноразмерные картинки без оптимизации.
В этом случае ничего не остается, как обрабатывать изображения на самом веб-сервере и тут нам поможет Angie, который является более продвинутым форком Nginx (хотя вы можете использовать и последний).
Почему именно Angie? Да потому что он имеет в репозитории уже скомпилированные модули и вам не нужно пересобирать веб-сервер вручную, а также модуль для работы с изображениями у него поддерживает форматы JPEG, GIF, PNG, WebP, HEIC и AVIF, в то время как Nginx ограничен JPEG, GIF, PNG и WebP.
Данный модуль называется http_image_filter_module и для его установки вам понадобится команда:
apt install angie-module-image-filter libgd3
Версию библиотеки libgd уточните для своего дистрибутива и именно от нее зависит набор поддерживаемых форматов.
Пример конфигурации:
location /img/ {
proxy_pass http://backend;
image_filter resize 800 600;
image_filter rotate 90;
error_page 415 = /empty;
}
location = /empty {
empty_gif;
}
В нашем примере изображения из локации /img пропорционально будут уменьшены до размера 800*600 так, чтобы обе стороны не превышали указанные размеры.
После чего изображение будет повернуто против часовой стрелки на 90 градусов, поддерживаются значения 90 – 180 -270.
При совместном использовании с resize поворот происходит после изменения размера.
Вместо resize можно использовать опцию crop:
image_filter crop 800 600;
В этом случае изображение будет уменьшено по большей стороне, а оставшиеся края обрезаны.
При использовании совместно с вращением, поворот происходит перед обрезкой.
Для конвертации формата используйте:
image_filter convert type
Где в качестве type укажите jpeg, gif, png, webp, heic или avif, однако помните, что онлайн-конвертация, особенно современных форматов может оказывать высокую нагрузку на процессор и занимать длительное время.
Чтобы процесс случайно не съел всю оперативную память можете использовать лимит буфера загрузки изображения:
image_filter_buffer 64M;
Также можно поиграть форматами качества, изменив соответствующие опции, которые по умолчанию имеют значения:
image_filter_jpeg_quality 75;
image_filter_webp_quality 80;
image_filter_heic_quality 80;
image_filter_avif_quality 80 6;
Для AVIF второй параметр является необязательным и указывает на скорость кодирования.
При возникновении ошибок обработки: неподдерживаемый формат, неправильное расширение, превышение размера буфера и т.д. сервер выдаст ошибку 415 и отдаст картинку-заглушку empty_gif.
Сразу отметим один момент, empty_gif - это встроенная директива, которая возвращает 1×1 прозрачное GIF-изображение чтобы не ломать правильное формирование страницы на клиенте. Т.е. никаких дополнительных изображений-заглушек нигде размещать не нужно.
Тоже самое произойдет, если вы попытаетесь обработать формат не поддерживаемый http_image_filter_module или libgd.
Как видим, ничего сложного нет. Но еще раз напомним, что работа с изображениями – процесс ресурсоемкий и на стороне веб-сервера его следует всячески избегать.
