Каждую неделю разбираю сайты клиентов на Тильде, и затык почти всегда одинаковый: изображения. Тильда изображения обрезает и сжимает по своим правилам, и если не знать эту механику, обложка блока получается размытой, а страница весит восемь мегабайт вместо восьмисот килобайт. Дальше по порядку: какой размер грузить под каждый тип блока, сколько должна весить картинка и почему ретина-экран портит то, что на обычном мониторе выглядело нормально.
По теме статьи
Готовое решение
Запрет прошедших дат в календаре формы Tilda
Одно правило на все поля «Дата» сайта: прошедшие дни бледнеют и не выбираются, можно закрыть сегодня и ближайшие N дней. Вписанная руками прошедшая дата стирается.
Бесплатно
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Почему на Тильде размывается и весит лишнее
Причин обычно три, и все три вижу примерно в равных долях у разных клиентов.
- Маленькую картинку растягивают на большой блок. Если загрузить фото 600 на 400 пикселей в блок, который на экране занимает 1920 пикселей по ширине, браузер физически увеличивает каждый пиксель в несколько раз. Получается размытие, и никакая настройка платформы это не исправит, потому что исходных данных для чёткой картинки просто нет.
- Двойное сжатие. Фото экспортируют из Photoshop или Lightroom уже в сжатом JPEG, потом загружают в Тильду, а платформа при отдаче применяет собственную оптимизацию поверх. Каждое сжатие JPEG теряет часть данных, и если сжимать дважды, на выходе заметны артефакты, особенно на однотонных участках вроде неба или фона.
- Ретина-экраны. На современном ноутбуке или смартфоне одна логическая точка экрана состоит из нескольких физических пикселей. Картинка, которая на обычном мониторе выглядела резкой, на таком дисплее превращается в мыло, если её загрузили без запаса по разрешению.
Какой размер изображения ставить под блок
Тильда не ограничивает разрешение загружаемого файла жёстко, но каждый тип блока рассчитан на свою ширину показа, и от неё стоит отталкиваться при подготовке картинки.
| Тип блока | Рекомендуемая ширина | Комментарий |
|---|---|---|
| Обложка, полноэкранный Cover | 1920 px | Меньше 1600 px изображение размывается на широких мониторах |
| Zero Block, полноэкранный слой | 2400 px | Это для десктопной версии, под мобильную грузите отдельный файл 800‑1000 px |
| Галерея, сетка карточек | 1200 px | Крупнее не имеет смысла, блок обрежет картинку по контейнеру |
| Карточка товара в интернет-магазине | 800x800 px | Квадратный кроп, зум по клику использует то же изображение |
Для Zero Block ситуация отдельная: там можно задать разные изображения для десктопа, планшета и мобильной версии по отдельности, и этим стоит пользоваться, а не полагаться на автоматическое ужатие одной большой картинки под маленький экран. Отдельный мобильный файл весит меньше и грузится быстрее на мобильном интернете.
Сколько должна весить картинка и как её сжать
Вес и разрешение это разные вещи, и путают их часто. Можно загрузить изображение нужной ширины в 1920 px и получить файл на 4-5 МБ, если сохранить его в PNG или экспортировать из RAW без сжатия.
На практике стараюсь укладывать обложку блока в 200-300 КБ, а обычные картинки в тексте, карточках и галереях в 80-150 КБ. При таком весе разница с оригиналом на глаз не видна, а страница грузится заметно быстрее.
Сжимаю двумя способами. Для одиночных фото хватает Squoosh или TinyPNG - оба сжимают с потерями, но подбирают уровень так, чтобы артефакты не были заметны глазу. Для пакетной обработки, когда нужно прогнать через сжатие полсотни фото товаров, под парсинг и массовую обработку файлов беру Python: библиотека Pillow ресайзит и пережимает картинки по одному скрипту за пару минут, вручную это заняло бы час.
Загружать в Тильду лучше уже сжатый файл. Платформа применяет собственную оптимизацию при отдаче через свой CDN, но она не заменяет предварительное сжатие, это разные этапы, и пропускать первый не стоит.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
JPEG, PNG или WebP: что выбрать
| Формат | Сжатие | Прозрачность | Когда использовать |
|---|---|---|---|
| JPEG | С потерями, сильное | Нет | Фото, баннеры, обложки блоков |
| PNG | Без потерь, файл крупнее | Есть | Иконки, логотипы, скриншоты с текстом |
| WebP | С потерями или без, компактнее JPEG при том же качестве | Есть | Универсальный вариант для фото и баннеров, где важен меньший вес |
Для фото без вариантов беру JPEG. Формат создавался под фотографии, сжимает плавные переходы цвета почти без потерь на глаз и весит в разы меньше, чем PNG с тем же изображением.
PNG нужен только там, где есть прозрачность или крупные однотонные заливки с чёткими границами: логотип, иконка, скриншот интерфейса с текстом. Если сохранить в PNG обычное фото, файл выйдет в три-четыре раза тяжелее JPEG без заметной разницы в качестве.
WebP использую всё чаще для тяжёлых фотографий на лендингах. Он даёт заметно меньший вес при сопоставимой резкости, и актуальные браузеры его поддерживают. Тильда сама умеет отдавать оптимизированные версии изображений через собственный CDN, но если готовите файлы заранее, WebP разумный формат по умолчанию для фото и баннеров.
Ретина и адаптив: как Тильда показывает изображения на разных экранах
Ретина-плотность экрана значит, что нужно грузить картинку примерно в два раза больше видимого размера блока. Если обложка на сайте занимает 960 px по ширине на десктопе, для резкости на плотном экране нужен файл минимум 1920 px по той же стороне.
Это не значит, что нужно грузить один и тот же огромный файл везде. В Zero Block предусмотрены отдельные слоты под изображения для десктопной, планшетной и мобильной версий блока, и туда стоит загружать разные файлы под разное разрешение экрана, а не один большой файл на все случаи. Так мобильный посетитель не скачивает картинку, рассчитанную на широкий монитор.
В остальных блоках Тильда сама подстраивает показ изображения под контейнер и плотность экрана, но исходный файл всё равно должен быть шире, чем блок на десктопе, иначе на плотном дисплее увидите размытие независимо от настроек блока.
Частые ошибки при загрузке изображений в Тильде
Собрал сюда то, что чаще всего вижу при аудите сайтов на Тильде.
- Один и тот же файл на обложку блока и на превью в соцсетях. У обложки блока и OG-картинки для шеринга разные пропорции, растянутая версия одной под другую обрезается криво.
- Загрузка фото прямо с телефона без сжатия. Современный смартфон снимает в 12-48 мегапикселей, это 6-15 МБ на файл, а для веба нужно в 30-50 раз меньше.
- PNG вместо JPEG для фотографий. Самая частая причина, почему страница весит несколько десятков мегабайт при десятке картинок.
- Одна и та же картинка на десктоп и мобильную версию в Zero Block, хотя блок это позволяет развести.
- Пустой alt-текст. На качество картинки не влияет, но бьёт по SEO и доступности, а заполняется за секунды прямо при загрузке файла.
Если на сайте уже скопилось много блоков с разнородными изображениями и нужно не просто пережать файлы, а пересобрать логику показа под разные экраны и добавить кастомную логику, это уже отдельная задача по разработке сайта на Тильде, а не разовая правка одной картинки.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Какой размер картинки ставить на обложку блока в Тильде?
Для полноэкранного блока Cover ориентируйтесь на 1920 px по ширине для десктопной версии. Меньше 1600 px картинка на широких мониторах размывается, больше 2400 px смысла нет: разница в резкости на глаз не видна, а вес файла растёт.
Почему Тильда сжимает изображения и падает качество?
Платформа оптимизирует изображения при отдаче, чтобы страница грузилась быстрее, и это накладывается на файл, который уже сжат при экспорте. Если исходник пережали заранее слишком сильно или загрузили в маленьком разрешении, повторная оптимизация подчёркивает артефакты. Решение простое: загружать файл нужной ширины и сжимать его один раз перед загрузкой, а не полагаться только на автоматику платформы.
Как исправить размытые фото на мобильной версии сайта?
Чаще всего дело в том, что под мобильный экран отдаётся та же картинка, что и под десктоп, только уменьшенная браузером, либо наоборот, маленький файл растянут. В Zero Block загрузите отдельное изображение для мобильной версии шириной 800‑1000 px, в остальных блоках проверьте, что исходный файл минимум в полтора-два раза шире видимого размера блока.
Сколько должна весить картинка для сайта на Тильде?
Ориентируюсь на 200-300 КБ для обложек и полноэкранных блоков, 80-150 КБ для картинок в тексте, галереях и карточках товаров. При таком весе разница с оригиналом не видна глазу, а страница загружается заметно быстрее.