Search
Write a publication
Pull to refresh

1000 и 1 способ оптимизировать медиафайлы

Level of difficultyEasy

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

Имеем в виду что, сервис для которого нужно такое решение генерирует много пользовательского медиа контента. Это могут быть социальные сети, дейтинг приложения, 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 изображений)

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

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.