Оптимизация изображений для сайта

Какого размера должны быть фотографии и как уменьшить вес изображения
Чтобы сайты загружались быстро, нужно оптимизировать изображения: уменьшить ширину или высоту с помощью любого графического редактора (можно использовать бесплатные онлайн-редакторы), а затем в сервисе TinyPNG сжать фото. Вес фотографии уменьшится.
Чем легче картинка, тем быстрее она загружается. Вес зависит от двух параметров:
1. Величины в пикселях по ширине и высоте (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей)
2. Содержания самой картинки — чем больше на фото мелких деталей и цветов, тем она больше весит.

Правильнее всего сначала изменить размер фотографии, а затем удалить избыточную информацию, чтобы дополнительно уменьшить вес.
Каким должен быть размер фотографии?
Все фотографии большого размера при загрузке на Тильду автоматически уменьшаются до 1680 px по большей стороне. Фотографии меньше 1680 px сохраняют оригинальный размер.

Так как фотография уменьшается программным методом, качество фото ухудшается, а вес оптимизируется недостаточно хорошо.
Перед загрузкой на Тильду фотографии большого размера сократите как минимум до 1680 px по большей стороне.
В идеале нужно загружать фотографии такого размера, какими они будут на сайте. Если размер самой фотографии не соответствует размеру фото в макете, браузер будет сжимать или растягивать изображение. И то, и другое он делает плохо, поэтому фотография будет нечеткой.

Чтобы узнать размер фото, добавьте блок на страницу, включите сетку (в настройках любого текстового блока) и посмотрите, сколько колонок занимает фотография. Одна колонка — 60 px, расстояние между колонками — 40 px.
Как максимально уменьшить вес фотографии?
Существуют специальные программы, которые сжимают фотографии, объединяя схожие цвета. Они делают это достаточно умно — визуально разницы нет, но вес фотографии сокращается значительно — может доходить до 70%.

Примеры таких сервисов:
Пример оптимизации фото
Рассмотрим на примере фотографии Christoph Bengtsson Lissalde, скачанной с Unsplash, как оптимизируется изображение.

Исходные размеры файла: 4405×2478 px и 3,5 мб.
Загрузим ее на Тильду как есть. Фотография обрежется до 1680×945 px, а ее размер станет 1,2 мб.

Откроем исходный файл в Photoshop, поменяем размеры на 1680×945 px, а затем сохраним, то получим 832 кб.

Загрузим фото в TinyPNG. Фотография уменьшилась до 353 кб.
Качество фотографии не изменилось.
Made on
Tilda