Фото на Тильде решают половину впечатления от сайта: даже сильный дизайн блока проседает, если картинка растянута, шумит на телефоне или грузится три секунды. За несколько лет работы с Tilda я вывел рабочую последовательность подготовки фото под конкретные блоки, и в этой статье собрал её целиком, от размера кадра до настройки вывода в галерее.
По теме статьи
Готовое решение
Ограничение применения промокода в корзине Tilda
Промокод в Tilda не действует на выбранную категорию (например, «Распродажа»). Готовый скрипт + инструкция по подключению.
от6 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Какой размер и формат фото нужен для Tilda
Первая ошибка, которую я вижу почти в каждом втором проекте на аудите, это фото прямо с телефона или зеркалки без обработки: 4000-6000 пикселей по длинной стороне при весе 8-15 МБ. Блок на сайте физически не покажет фото шире контейнера, а на десктопе это обычно 1200-1900 px, поэтому лишние пиксели только замедляют загрузку.
Моё практическое правило: для полноэкранных обложек и Zero Block готовлю картинку по длинной стороне 1800-2000 px, для карточек товаров и превью в галерее хватает 800‑1200 px. Для retina-показа, когда экран показывает изображение вдвое четче, берется размер кратно двум, то есть если верстка ожидает 900 px, заливаю файл на 1800 px по ширине.
По форматам ориентируюсь так:
- JPG - основной формат для фотографий, дает приемлемое качество при небольшом весе
- PNG - только для картинок с прозрачным фоном или плоской графики с малым числом цветов, для фото почти всегда тяжелее JPG без выигрыша в качестве
- SVG - для логотипов и иконок, а не для фотографий
- WebP - если готовлю фото заранее в редакторе, при том же визуальном качестве файл обычно выходит легче JPG
Сжатие изображений перед загрузкой в Tilda
Тильда принимает довольно тяжелые файлы и не заставляет сжимать их руками, но от веса каждой картинки напрямую зависит скорость первой отрисовки страницы, а значит и то, сколько посетителей досмотрит лендинг до формы заявки. Я сжимаю фото до загрузки, а не полагаюсь только на автоматическую оптимизацию платформы.
Из инструментов на практике использую:
- Squoosh - веб-сервис от Google, дает сравнить исходник и сжатый вариант бок о бок и вручную подобрать баланс качества и веса
- TinyPNG - быстрый пакетный сервис для JPG и PNG, для карточек товаров в интернет-магазине прогоняю через него всю партию сразу
- Экспорт «Сохранить для Web» в Photoshop или Figma - удобно, когда фото уже верстается в макете и вес нужно контролировать сразу на выходе
Ориентир по качеству: для JPG выставляю сжатие в районе 65-80%, дальше глаз уже видит артефакты на контрастных участках вроде текста на фото или четких границ предметов. Итоговый вес для обложки блока обычно укладывается в 150-300 КБ, для мелких превью в галерее в 40-80 КБ.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Как Tilda обрабатывает и хранит фото после загрузки
Загруженные картинки Tilda хранит в собственном облаке и отдает через свою CDN, поэтому даже без ручной оптимизации сайт не тянет файлы с медленного стороннего хостинга. У самой платформы есть автоматическое уменьшение слишком крупных файлов при загрузке, но это подстраховка на случай, если фото загрузили без подготовки, а не замена ручному сжатию: автоматика ориентируется на технические лимиты, а не на оптимальный баланс качества и веса под конкретный блок.
Полезная деталь: адрес картинки на Tilda-CDN можно менять через параметры в URL, платформа отдает уменьшенные версии на лету под разные превью и миниатюры. Это не отменяет подготовку фото на входе, потому что чем тяжелее оригинал, тем дольше он отдается даже с изменением размера налету.
Вывод фото в галерее: какие блоки выбрать
Для вывода набора фото в Tilda есть несколько готовых семейств блоков, и выбор зависит от задачи, а не от того, что проще подключить.
| Блок | Когда использую |
|---|---|
| Gallery (сетка, плитка, мозаика) | Портфолио, фото объектов недвижимости, интерьеров - когда важен обзор сразу нескольких кадров |
| Slider / карусель | До 5-8 фото одного товара или проекта, когда нужен один крупный кадр за раз |
| Zero Block | Нестандартная раскладка, разные пропорции фото в одном ряду, авторская сетка под конкретный дизайн |
| Карточка товара в T‑Store | Несколько фото одной позиции с переключением превью, характерно для интернет-магазина |
Для галерей с большим количеством фото я стараюсь держать единое соотношение сторон внутри одного блока: 4:3 или 1:1 для сетки, 16:9 для широких обложек. Разнобой пропорций внутри одной галереи почти всегда выглядит неряшливо, даже если каждое фото по отдельности снято хорошо, поэтому обрезку под нужный формат делаю на этапе подготовки, а не полагаюсь на автоматическую обрезку блока.
Альтернативный текст и подписи
В настройках картинки в Tilda есть поле alt, и я заполняю его для каждого значимого фото, особенно в карточках товаров и на обложках. Для поисковой выдачи по картинкам это один из немногих текстовых сигналов о содержимом изображения, а для пользователей с экранными читалками это единственный способ понять, что на фото.
Адаптивность фото на мобильных устройствах
Фото, которое отлично смотрится на широком десктопном экране, на мобильном часто обрезается по центру не туда, куда нужно, если в кадре главный объект смещен в сторону. В Zero Block можно настраивать блоки отдельно для каждого брейкпоинта: десктоп, планшет, мобильный, и для мобильной версии я нередко подкладываю отдельно обрезанный вертикальный кадр вместо того же горизонтального фото, просто сжатого по ширине.
Если типовых настроек блока не хватает и нужна раскладка с разным поведением фото на разных экранах, разными точками обрезки или анимацией при скролле, такие вещи закрываю через кастомную доработку Тильды, её обычно заказывают уже на этапе, когда стандартных настроек блока для задуманной раскладки не хватает.
Частые ошибки при работе с фото на Tilda
За практику насмотрелся на одни и те же проблемы на разных проектах:
- Скриншоты вместо фото - смазанный текст, лишние элементы интерфейса по краям, вес в разы больше обычного фото при худшем качестве
- Загрузка исходника с камеры без сжатия - страница с десятком таких фото на слабом мобильном интернете грузится заметно дольше, чем с подготовленными файлами
- Разные пропорции фото в одной галерее - визуальный хаос в сетке даже при аккуратной верстке блока
- Пустое поле alt у ключевых фото - теряется часть трафика из поиска по картинкам и ухудшается доступность сайта
- PNG для обычных фотографий - файл тяжелее JPG без разницы в качестве для человеческого глаза
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Какой максимальный размер фото загружать в Tilda
Жесткого потолка, который стоит держать в голове при повседневной работе, нет, но смысла заливать файл шире, чем он реально показывается на экране, тоже нет. Для обложек и полноэкранных блоков ориентируюсь на 1800-2000 px по длинной стороне, для превью в галерее и карточках товаров хватает 800‑1200 px.
Почему фото на Tilda грузится медленно, хотя я его сжал
Чаще всего причина не в весе одного файла, а в их количестве на одной странице: десяток тяжелых фото в галерее суммарно всё равно дают большую нагрузку, даже если каждое по отдельности сжато. Проверяю через отчет о скорости страницы, какие именно блоки тянут больше всего, и там же вижу, если формат выбран не тот, например PNG там, где хватило бы JPG.
Нужно ли делать отдельные версии фото для мобильной версии сайта
Для галерей с большим количеством кадров обычно достаточно, что Tilda подстраивает вывод под ширину экрана. А вот для обложек и Zero Block, где в кадре есть смещенный от центра главный объект, отдельная обрезка под мобильный экран часто нужна, иначе на телефоне обрезается не то, что задумано в десктопной версии.
Чем лучше сжимать фото перед загрузкой, если нет Photoshop
Squoosh и TinyPNG работают прямо в браузере без установки и дают достаточный результат для большинства сайтов на Tilda. Для разовой подготовки десятка-двух фото этого хватает, для потокового пережатия сотен карточек товаров в интернет-магазине уже удобнее пакетная обработка через скрипт или отдельный сервис.