Изменять пропорции аватара на стороне фронта или несколько размеров на стороне бэка?

Question

[Иван]

Приветствую.

Есть аватар пользователя. В разных частях (а иногда и на одной странице) он используется в разных размерах: 100х100, 40х40 и 24х24.

Как вы считаете, что будет оптимальнее или как правильно делать:
1. На стороне бэка хранить только 100х100, а ресайз отдать на откуп фронта?
2. На стороне бэка хранить все три размера и отправлять на фронт по необходимости?

Answer 1

[Алексей Уколов]

Для такого маленького изображения я бы передавал только самый большой вариант.

Экономия с точки зрения пользователя тут будет лишь в том случае, если везде используется 40*40, и, например, только в редакторе профиля показывается 100*100. Тогда люди в 99% случаев не будут качать лишние пиксели. Но их объём настолько мал, что заморачиваться нет смысла.
Если же разные размеры используются повсеместно, то, делая три отдельных изображения, вы увеличите объём трафика на 21%, т.е. сделаете хуже и себе, и пользователю.

Comments

[Иван]

100х100 он видит только своё в сайдбаре, все остальные или 24х24 или 40х40. На странице другого участника он также видит его 100х100

[Иван]

Спасибо за ответ.

Answer 2

[YepBro]

Еще для ретина-экранов надо х2 размер картинок :)

Есть три варианта. Что использовать зависит от того насколько надо оптимизировать расход трафика и нагрузка на сервера.

1) Хранить самый большой размер аватарки (х2). Остальное уменьшать через размер на фронте. Быстро в разработке, просто, картинка закешируется у пользователя и больше не будет грузиться. Для небольших и многих средних проектов пойдет.

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

3) Сделать обработчик на стороне бека (что-то типа /preview/sdtnhs75k/100/80/product005.png), который из урл понимает какой нужен файл и какого размера. Смотрит есть ли файл с такими сторонами на диске. Если есть то отдает его, если нет, то генерирует и отдает. Для небольших проектов можно на том же языке, что и проект. Для больших как модуль к веб-серверу (nginx).

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

Comments

[Иван]

Спасибо за ответ.

Answer 3

[Сергей П]

Добавлю к очень хорошим ответам выше, что имеет смысл для конкретно вашего сайта посчитать статистику использования разных размеров в сочетаниях. Ещё нужно понимать цели, которые вы преследуете.
Если вам нужно снизить трафик с севрверов - это одно. Если вам нужно ускорить рендер страницы, то это другое. Причем для разных страниц и разделов оптимум может быть разный.
К примеру, если у вас страница с комментариями пользователей, где огромное количество этих комментариев с разными аватарками мелких размеров, а большая аватарка на такую страницу грузится только одна (своя), и в профили пользователей кто-то редко заходит, то конечно лучше кешировать и отдавать с сервера мелкие иконки сразу. Это повысит скорость рендера страницы с комментами.
Отдавать аватарки лучше с CDN, так быстрее получится для рендера страницы.

Comments

[Иван]

Сайта пока нет, пока только начальные этапы, а понимания в некоторых вопросах нет.
Спасибо за ответ.