Как подготовить изображения перед загрузкой в Tilda

Перед тем как говорить о размере, весе и сжатии, важно разделить изображения на два основных типа: растровые и векторные. Растровое изображение состоит из пикселей. К растровым форматам относятся, например, JPEG, PNG, WebP и AVIF. Чем больше такое изображение по ширине и высоте, тем больше данных оно обычно содержит. Если растр сильно увеличить, рано или поздно станет заметна потеря четкости.

Векторное изображение устроено иначе: оно описывается геометрическими объектами и может масштабироваться без характерной для растра пикселизации. Самый привычный для веба векторный формат — SVG. Его часто используют для логотипов, иконок и простой графики. Правила подготовки у растровых и векторных изображений разные. SVG, например, нет смысла уменьшать до «1680 пикселей по ширине» или прогонять через TinyPNG как обычную фотографию.

В этой статье речь пойдет именно о растровых изображениях: фотографиях, фоновых картинках и другой графике, которую вы загружаете в Tilda в JPEG, PNG и других растровых форматах. Фотография с телефона, камеры или фотостока легко может иметь ширину 4000–6000 пикселей и весить несколько мегабайт. Загружать такой исходник на сайт как есть обычно нет смысла: изображение на странице будет значительно меньше, а лишний размер файла увеличивает объем загружаемых данных.

Tilda умеет оптимизировать изображения автоматически: адаптирует их к размеру контейнера и устройству пользователя, использует Lazy Load и автоматически создает WebP-версию. Но сама платформа при этом рекомендует оптимизировать исходные изображения до загрузки.

Практическая схема простая: определить нужный размер → уменьшить изображение → сжать файл → проверить качество → загрузить в Tilda.

Сначала уменьшите изображение до разумного размера

Вес картинки зависит не только от степени сжатия, но и от ее размеров в пикселях. Фотография 5000 × 3300 px содержит значительно больше данных, чем версия той же фотографии размером 1600 × 1056 px. Tilda прямо рекомендует сначала уменьшать ширину и высоту изображения, а уже затем дополнительно сжимать файл.

Для больших изображений у Tilda есть важное правило: при обычной загрузке крупные файлы автоматически уменьшаются до 1680 px по большей стороне, а изображения меньше 1680 px сохраняют исходный размер. При этом сама Tilda рекомендует не полагаться только на автоматическое уменьшение, а заранее готовить крупную фотографию самостоятельно — так лучше контролируются и качество, и вес итогового файла.

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

Хороший принцип здесь такой: не загружайте изображение значительно больше, чем оно действительно требуется на странице.

Например, исходник:

5472 × 3648 px

для крупной фотографии на сайте можно заранее уменьшить примерно до:

1680 × 1120 px

если такое соотношение сторон подходит вашему макету. Но для небольшой карточки разумный размер может быть заметно меньше.

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

Для Zero Block есть отдельное исключение

Если вы работаете с крупными изображениями в Zero Block, например с большими фоновыми фотографиями, Tilda позволяет при загрузке включить опцию для изображения шириной до 1920 px. По документации Zero Block файлы шире 1920 px таким способом загрузить нельзя.

Это особенно актуально при Auto Scale: элементы Zero Block могут масштабироваться вместе с контейнером на широких экранах, поэтому слишком маленькое исходное изображение может потерять качество при увеличении.

То есть универсального правила «всё делаем 1680 px» нет. Размер зависит от задачи: маленькой карточке нужен небольшой файл, крупному изображению — более крупный, а для некоторых изображений в Zero Block может иметь смысл вариант до 1920 px.

После изменения размеров сожмите файл

Когда изображение уже приведено к нужному размеру в пикселях, его можно дополнительно сжать. Tilda рекомендует для этого в том числе TinyPNG, а также перечисляет Squoosh, ImageOptim и другие инструменты.

С TinyPNG схема элементарная: загрузите подготовленное изображение, дождитесь обработки, скачайте оптимизированную версию и уже ее загрузите в Tilda. TinyPNG использует сжатие с потерями — lossy compression. Алгоритм уменьшает количество данных в изображении таким образом, чтобы визуальное изменение в нормальных условиях было минимальным.

Важно понимать разницу между изменением размера и сжатием. Если взять фотографию 6000 × 4000 px и просто прогнать ее через TinyPNG, файл станет легче, но само изображение останется огромным по размерам. Поэтому правильный порядок именно такой: сначала resize, потом compression.

Tilda показывает это и на собственном примере. Исходная фотография размером 4405 × 2478 px весила 3,5 МБ. После ручного уменьшения до 1680 × 945 px — 832 КБ, а после дополнительного сжатия через TinyPNG — 353 КБ. То есть наиболее заметный результат получается не от одного действия, а от сочетания разумных размеров и последующего сжатия.

Сколько должна весить картинка?

Универсальной цифры вроде «все изображения должны весить максимум 200 КБ» нет. Вес зависит от размеров картинки, количества деталей, цветов и самого содержания. Фотографию леса, волос, травы или толпы людей обычно сложнее сильно сжать, чем изображение с большими однотонными областями. Tilda также указывает, что вес зависит как от размеров в пикселях, так и от количества деталей и цветов в изображении.

Поэтому цель не в том, чтобы любой ценой получить определенное количество килобайт, а в том, чтобы получить максимально легкий файл без заметного ухудшения изображения. После сжатия откройте результат и посмотрите на него в нормальном масштабе. Особенно внимательно проверьте лица, мелкие детали, границы объектов и градиенты. Если появились очевидные артефакты, качество сжатия оказалось слишком агрессивным.

Не нужно вручную переводить все фотографии в WebP

Отдельно конвертировать каждую фотографию в WebP перед загрузкой в Tilda необязательно. Платформа использует адаптивную загрузку изображений и автоматически создает WebP-версии для доставки пользователю.

Поэтому для обычной фотографии гораздо важнее сначала убрать очевидный избыток размеров и веса, чем вручную конвертировать весь архив изображений в другой формат. Это не означает, что формат файла вообще не имеет значения. PNG, JPEG, SVG, WebP и другие форматы решают разные задачи, но это уже отдельная тема. Здесь нас интересует именно базовая подготовка растрового изображения перед загрузкой.

Не увеличивайте маленький исходник

Если фотография слишком маленькая, увеличение ее размеров в редакторе не добавит настоящей детализации. Если у вас есть изображение 600 × 400 px, а в макете оно должно занимать большую часть экрана, простое изменение размера до 1680 × 1120 px не превратит его в качественный большой исходник. В таком случае лучше найти оригинал большего разрешения.

Особенно это важно для крупных фоновых изображений и Zero Block с масштабированием: исходник должен быть достаточно большим для того размера, в котором он реально будет показан.

Проверьте кадрирование до загрузки

Размер и вес — не единственное, что стоит подготовить заранее. Нужно учитывать и пропорции изображения. Вертикальный портрет может отлично выглядеть сам по себе, но плохо подходить для широкого горизонтального блока. Фоновое изображение может обрезаться на экранах с другими пропорциями.

Поэтому перед экспортом посмотрите, где находится главный объект и допустима ли обрезка по краям. Если на фотографии человек, товар, надпись или другой важный объект, не располагайте его вплотную к границе кадра, если изображение будет использоваться как адаптивный фон.

Базовый алгоритм подготовки изображений

Перед загрузкой каждой растровой картинки в Tilda достаточно пройти один цикл:

1. Определите, где изображение будет использоваться и насколько крупным оно будет на странице.
2. Если исходник значительно больше необходимого, уменьшите его в графическом редакторе.
3. Не увеличивайте маленькое изображение в надежде получить дополнительное качество.
4. Проверьте пропорции и кадрирование.
5. После изменения размеров прогоните файл через TinyPNG, Squoosh или другой компрессор.
6. Откройте оптимизированный файл и убедитесь, что визуально качество вас устраивает.
7. Загрузите готовую версию в Tilda и проверьте ее на опубликованной странице на компьютере и телефоне.

Главная ошибка здесь — рассчитывать, что автоматическая оптимизация Tilda полностью заменяет подготовку исходника. Платформа действительно делает много сама, но это не отменяет базовой гигиены: не загружать огромные оригиналы без необходимости, заранее уменьшать изображения до разумного размера и только потом сжимать.

Рабочая схема в большинстве случаев выглядит так: исходник → нужный размер → сжатие → визуальная проверка → загрузка в Tilda.

Для большинства растровых изображений на сайте этого достаточно.