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

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

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

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

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

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