Какой размер изображения должен быть для сайта?

Кратко: Берем размеры изображений в макете и следуем 4-м принципам уточнения размера изображения 👌

А вот несколько советов, которые помогут определиться с точным размером и не потерять в качестве и скорости загрузки страницы:

1. Оптимизируйте изображения под Retina экраны. Изображение на сайт надо загружать в x2 размере, то есть увеличенное вдвое. Это связано с оптимизацией сайтов под Retina экраны – дисплеи с увеличенной плотностью пикселей. Сейчас Retina дисплеи это не только Apple девайсы, но и их аналоги других производителей. Чтобы картинка с телефона или макбука оставалась такой же четкой как и задумано в дизайне, нужно не забывать про этот принцип.
2. Оптимизируйте размер файла изображения для сайта не теряя качества картинки, есть много сервисов, которые помогут уменьшить вес изображения. Такие картинки будут быстрее загружаться на странице пкогда вы только открыли страницу сайта.
3. Конвертируйте изображения в подходящий формат. Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла. JPEG — отлично подходят для детализированных изображений с большим количеством цветов, такие как фотографии. PNG — ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
4. Сохраняйте иконки или векторную графику в формате SVG. Если в дизайне есть графика из векторных фигур или иконки, их лучше выгружать в векторном формате SVG (Scalable Vector Graphics). Данный векторный формат изображения можно отображать на больших разрешениях без потери качества и весить он будет значительно меньше, чем png картинка.

Полезные сервисы:

https://tinypng.com/ — оптимизирует размер файла изображения и стремится сберечь качество