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