Оптимизация изображений для сайта
Какого размера должны быть фотографии и как уменьшить вес изображения.
Чтобы сайты загружались быстро, нужно оптимизировать изображения: уменьшить ширину или высоту с помощью любого графического редактора (можно использовать бесплатные онлайн-редакторы), а затем специальной программой сжать фото. Вес фотографии уменьшится.
Чем легче картинка, тем быстрее она загружается. Вес зависит от двух параметров:
1. величины в пикселях по ширине и высоте (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей)
2. содержания самой картинки — чем больше на фото мелких деталей и цветов, тем она больше весит.
Правильная оптимизация — когда мы сначала изменяем размер фотографии, а затем удаляем избыточную информацию, чтобы дополнительно уменьшить вес.
1. величины в пикселях по ширине и высоте (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей)
2. содержания самой картинки — чем больше на фото мелких деталей и цветов, тем она больше весит.
Правильная оптимизация — когда мы сначала изменяем размер фотографии, а затем удаляем избыточную информацию, чтобы дополнительно уменьшить вес.
Каким должен быть размер фотографии?
Все фотографии большого размера при загрузке на Тильду автоматически уменьшаются до 1680 px по большей стороне. Фотографии меньше 1680 px сохраняют оригинальный размер.
Так как фотография уменьшается программным методом, качество фото ухудшается, а вес оптимизируется недостаточно хорошо.
Так как фотография уменьшается программным методом, качество фото ухудшается, а вес оптимизируется недостаточно хорошо.
Перед загрузкой на Тильду фотографии большого размера сократите как минимум до 1680 px по большей стороне.
В идеале нужно загружать фотографии такого размера, какими они будут на сайте. Если размер самой фотографии не соответствует размеру фото в макете, браузер будет сжимать или растягивать изображение. И то, и другое он делает плохо, поэтому фотография будет нечеткой.
Чтобы узнать размер фото, добавьте блок на страницу, включите сетку (в настройках любого текстового блока) и посмотрите сколько колонок занимает фотография. Одна колонка — 60 px, расстояние между колонками — 40 px.
Чтобы узнать размер фото, добавьте блок на страницу, включите сетку (в настройках любого текстового блока) и посмотрите сколько колонок занимает фотография. Одна колонка — 60 px, расстояние между колонками — 40 px.
Как максимально уменьшить вес фотографии?
Существуют специальные программы, которые сжимают фотографии, объединяя схожие цвета. Они делают это достаточно умно — визуально разницы нет, но вес фотографии сокращается значительно — может доходить до 70%.
Примеры таких программ: ImageOptim (нужно устанавливать на компьютер) и TinyPNG (работает онлайн).
Примеры таких программ: ImageOptim (нужно устанавливать на компьютер) и TinyPNG (работает онлайн).
Пример оптимизации фото
Рассмотрим на примере фотографии Christoph Bengtsson Lissalde, скачанной с Unsplash, как оптимизируется изображение.
Исходный размер сохраненного файла: 4405х2478 px, вес — 3,5 мб.
Исходный размер сохраненного файла: 4405х2478 px, вес — 3,5 мб.
Загрузим ее на Тильду как есть. Фотография обрежется до 1680x945 px, а ее вес станет 1,2 мб.
Откроем исходный файл в Photoshop, поменяем размер на 1680х945 px, а затем сохраним — вес станет 832 кб.
Загрузим фото в TinyPNG. Фотография уменьшилась до 353 кб.
Откроем исходный файл в Photoshop, поменяем размер на 1680х945 px, а затем сохраним — вес станет 832 кб.
Загрузим фото в TinyPNG. Фотография уменьшилась до 353 кб.
Качество фотографии не изменилось.
