Всем привет! Как оптимизировать загруженные пользователем картинки и видео? Я хочу поделиться с вами решениями, которые встретились мне при изучении этого вопроса.

Имеем в виду что, сервис для которого нужно такое решение генерирует много пользовательского медиа контента. Это могут быть социальные сети, дейтинг приложения, e-commerce, квизы, мессенджеры.

Самое удобное решение выглядит таким образом: загружаем файл, получаем ссылку на него, ставим ссылку в тэг <img> и пишем нужные размеры для файла прямо в src <img src="/image.jpg?width=200"> Так мы получим картинку нужной нам ширины.

У пользователя контент загрузится быстро, мы заплатим меньше за трафик — все в шоколаде.

Итак, рассмотрим варианты:

  1. SaaS сервисы Cloudinary, Uploadcare, Imgix... можно перечислять бесконечно.

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

    Минусы: дорого.

  2. Opensource, например thumbor — выглядит как лучшее решение (почти).

    Плюсы: условно бесплатно, много функций для преобразования изображений и видео (не уверен, что можно обработать видео, но в зависимостях видел ffmpeg), это opensource решение.

    Минусы: все-таки не бесплатно, нужно размещать этот сервис на VPS, если хотите добавить функцию, которой нет из коробки или в плагине, то необходимо писать плагин, интеграция в приложение на порядок сложнее остальных решений.

  3. CDN — почти каждый второй CDN предлагает такую услугу, как оптимизацию изображений на лету. Намного дешевле первого варианта и намного проще в реализации второго варианта.

    Плюсы: самый легкий и быстрый способ для оптимизации изображений, по стоимости значительно дешевле первого варианта.

    Минусы: мало функций для преобразования изображений и видео(насчет видео не уверен, не видел таких предложений от CDN). Тарифные планы могут оказаться не выгодными, поскольку часто они предлагают за фиксированную стоимость такую функциональность, даже если вы ей пользуетесь 2 раза в месяц, оплачиваете по полной программе.

  4. S3 хуки и лямбда функции.

    В двух словах про принцип работы: загружаем файл в S3 и настраиваем подкапотную трансформацию файла в S3 с помощью лямбды функции.

    Облачные провайдеры предлагают уже готовые решения, например от Яндекса https://cloud.yandex.ru/docs/cloud-apps/image-resizer

    Плюсы: стильно, модно, молодёжно, бессерверно. Оплата только за хранилище S3 и время работы лямбды по необходимости.

    Минусы: сложности кастомизации и интеграции в проект, готовые решения предлагают значительно меньшую функциональность, собственное решение нужно разрабатывать и поддерживать.

  5. Nginx плагин (ngx_http_image_filter_module)

    Плюсы: самое выгодное решение.

    Минусы: самое малофункциональное решение для преобразования изображений, с видео, кажется, он не работает вовсе.

Все варианты имеют базовый минимум для решения проблемы. То есть можно оптимизировать картинку на "лету". Но сложность интеграции сильно отличается, где-то надо просто добавить параметры к адресу с картинкой (вариант 3), а где-то надо поднимать сервер и настраивать всю сопутствующую инфраструктуру (вариант 2 и 4).

Сложно выделить золотую середину, поскольку нет такого варианта, чтобы было не сложно настроить и была достаточная функциональность (имею в виду, не везде есть обработка видео и "умный" crop изображений)

Напишите, пожалуйста, в комментарии, какие еще есть варианты для решения такой проблемы.