Оптимизация изображений для сайта
Какого размера должно быть изображение и как уменьшить его вес
Чтобы сайты загружались быстро, нужно оптимизировать изображения: уменьшить ширину или высоту с помощью любого графического редактора (можно использовать бесплатные онлайн-редакторы), а затем в сервисе TinyPNG сжать фото.
Чем легче картинка, тем быстрее она загружается. Вес зависит от двух параметров:
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%.
Примеры таких сервисов:
Примеры таких сервисов:
- TinyPNG
- Squoosh
- Kraken
- Compressor
- Compressjpeg
- ImageOptim (требует установки на Mac)
Пример оптимизации изображения
Рассмотрим на примере фотографии Christoph Bengtsson Lissalde, скачанной с Unsplash, как оптимизируется изображение.
Исходные размеры файла: 4405×2478 px и 3,5 мб.
Исходные размеры файла: 4405×2478 px и 3,5 мб.
Загрузим её на Тильду как есть. Фотография обрежется до 1680×945 px, а ее размер станет 1,2 мб.
Откроем исходный файл в Photoshop, поменяем размеры на 1680×945 px, а затем сохраним, то получим 832 кб.
Загрузим фото в TinyPNG. Фотография уменьшилась до 353 кб.
Откроем исходный файл в Photoshop, поменяем размеры на 1680×945 px, а затем сохраним, то получим 832 кб.
Загрузим фото в TinyPNG. Фотография уменьшилась до 353 кб.
Качество фотографии не изменилось.
