1000 и 1 способ оптимизировать медиафайлы
Всем привет! Как оптимизировать загруженные пользователем картинки и видео? Я хочу поделиться с вами решениями, которые встретились мне при изучении этого вопроса.
Имеем в виду что, сервис для которого нужно такое решение генерирует много пользовательского медиа контента. Это могут быть социальные сети, дейтинг приложения, e-commerce, квизы, мессенджеры.
Самое удобное решение выглядит таким образом: загружаем файл, получаем ссылку на него, ставим ссылку в тэг <img>
и пишем нужные размеры для файла прямо в src <img src="/image.jpg?width=200">
Так мы получим картинку нужной нам ширины.
У пользователя контент загрузится быстро, мы заплатим меньше за трафик — все в шоколаде.
Итак, рассмотрим варианты:
SaaS сервисы Cloudinary, Uploadcare, Imgix... можно перечислять бесконечно.
Плюсы: много функций для преобразования изображений и видео, быстрая техническая поддержка, легко интегрировать в приложение.
Минусы: дорого.Opensource, например thumbor — выглядит как лучшее решение (почти).
Плюсы: условно бесплатно, много функций для преобразования изображений и видео (не уверен, что можно обработать видео, но в зависимостях видел ffmpeg), это opensource решение.
Минусы: все-таки не бесплатно, нужно размещать этот сервис на VPS, если хотите добавить функцию, которой нет из коробки или в плагине, то необходимо писать плагин, интеграция в приложение на порядок сложнее остальных решений.CDN — почти каждый второй CDN предлагает такую услугу, как оптимизацию изображений на лету. Намного дешевле первого варианта и намного проще в реализации второго варианта.
Плюсы: самый легкий и быстрый способ для оптимизации изображений, по стоимости значительно дешевле первого варианта.
Минусы: мало функций для преобразования изображений и видео(насчет видео не уверен, не видел таких предложений от CDN). Тарифные планы могут оказаться не выгодными, поскольку часто они предлагают за фиксированную стоимость такую функциональность, даже если вы ей пользуетесь 2 раза в месяц, оплачиваете по полной программе.S3 хуки и лямбда функции.
В двух словах про принцип работы: загружаем файл в S3 и настраиваем подкапотную трансформацию файла в S3 с помощью лямбды функции.
Облачные провайдеры предлагают уже готовые решения, например от Яндекса https://cloud.yandex.ru/docs/cloud-apps/image-resizerПлюсы: стильно, модно, молодёжно, бессерверно. Оплата только за хранилище S3 и время работы лямбды по необходимости.
Минусы: сложности кастомизации и интеграции в проект, готовые решения предлагают значительно меньшую функциональность, собственное решение нужно разрабатывать и поддерживать.Nginx плагин (ngx_http_image_filter_module)
Плюсы: самое выгодное решение.
Минусы: самое малофункциональное решение для преобразования изображений, с видео, кажется, он не работает вовсе.
Все варианты имеют базовый минимум для решения проблемы. То есть можно оптимизировать картинку на "лету". Но сложность интеграции сильно отличается, где-то надо просто добавить параметры к адресу с картинкой (вариант 3), а где-то надо поднимать сервер и настраивать всю сопутствующую инфраструктуру (вариант 2 и 4).
Сложно выделить золотую середину, поскольку нет такого варианта, чтобы было не сложно настроить и была достаточная функциональность (имею в виду, не везде есть обработка видео и "умный" crop изображений)
Напишите, пожалуйста, в комментарии, какие еще есть варианты для решения такой проблемы.