За два года работы с Tilda я раз двадцать слышал одну и ту же жалобу от заказчиков: фотографии загружены в хорошем разрешении, а на сайте выходят мутными, с полосами на градиентах и странной желтизной. Тильда портит качество изображений не по злому умыслу - платформа агрессивно пережимает файлы при загрузке, чтобы ускорить отдачу страницы, и делает это без единой настройки, доступной пользователю в редакторе. Дальше разберу, что происходит с картинкой внутри системы, почему ресайз и конвертация в WebP иногда убивают резкость сильнее, чем нужно, и как я решаю эту проблему в своих проектах на Tilda.
Почему Tilda сжимает изображения при загрузке
Проблема в том, как платформа обрабатывает файлы на своей стороне. При загрузке картинка проходит через обработчик, который ресайзит её под набор фиксированных ширин и переводит в WebP с уровнем сжатия примерно 75-80%. Ползунка «качество» в редакторе просто нет, настроить процесс через интерфейс нельзя.
На практике я загружал фотографию 4000x3000 px, JPEG, 3,2 MB, снятую с качеством экспорта 95%. После обработки на сайте она превратилась в WebP размером 1920x1440 px и весом около 210 KB. Резкость на мелких деталях, вроде текста на упаковке или тонких линий в инфографике, заметно просела, а на плавных градиентах появился баннинг - полосы вместо ровного перехода цвета.
Для 90% лендингов с фото товаров и фоновых картинок это разумный компромисс между весом страницы и скоростью загрузки. А вот для фотографов, портфолио дизайнеров и каталогов с мелкими деталями потери видны невооружённым глазом уже при первом открытии сайта.
Zero Block и адаптивная нарезка: откуда берётся размытость
Вторая причина размытости связана с адаптивной версткой. Zero Block генерирует для каждой картинки набор версий под разные ширины экрана - обычно это 240, 480, 960, 1400, 1920 и 2600 px. Браузер сам выбирает подходящий вариант через srcset, и здесь возникает две типичные ошибки.
Первая: если исходник загружен с разрешением меньше, чем требуется для retina-дисплея (2x от реальной ширины блока на странице), Tilda апскейлит изображение программно, а это всегда даёт мыло. Вторая: режим кропа «cover» в Zero Block обрезает и масштабирует картинку под контейнер без учёта того, что после этого её ещё раз пережмут в WebP - получается двойная деградация, особенно заметная на логотипах и иконках с тонкими линиями.
Я проверял это на баннере 1600x900 px: при выводе в блок шириной 800px на обычном мониторе картинка выглядела нормально, а на MacBook с retina-экраном текст на баннере стал читаться с трудом из-за совмещения апскейла и WebP-сжатия.
Сравнение: оригинал против результата после Tilda
Чтобы показать масштаб потерь наглядно, вот типичный кейс - фото товара для интернет-магазина, снятое на камеру и подготовленное в Photoshop.
| Параметр | Оригинал | После обработки Tilda |
|---|---|---|
| Формат | JPEG | WebP |
| Разрешение | 4000x3000 px | 1920x1440 px (максимум для блока) |
| Качество сжатия | 95-100% | около 75% |
| Вес файла | 3,2 MB | 180-220 KB |
| Цветовой профиль | Adobe RGB | конвертирован в sRGB |
| EXIF-метаданные | сохранены | удалены |
Потеря веса в 15 раз объясняет, почему страницы на Tilda грузятся быстро, но и объясняет, откуда берутся жалобы на «мыльные» фотографии в карточках товаров.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Как загружать фото в Tilda без потери качества
Полностью убрать сжатие нельзя, но снизить видимые потери можно, если подготовить файл заранее с учётом того, как Tilda его обработает дальше.
- Экспортируйте изображение в разрешении, которое ровно в 2 раза больше ширины блока на странице - не в 4 и не в 10 раз, лишний запас Tilda всё равно обрежет до максимума 2600 px по длинной стороне, а огромный исходник только замедлит загрузку в редакторе.
- Перед загрузкой сжимайте JPEG на 85-90% качества в Photoshop или Squoosh, а не оставляйте 100%. Двойное сжатие (сначала слабое ваше, потом сильное от Tilda) даёт меньше артефактов, чем одно сильное сжатие сразу с несжатого исходника.
- Для графики с текстом, тонкими линиями или прозрачностью используйте PNG, а не JPEG - на артефактах сжатия PNG-графика страдает заметно меньше.
- Переводите файлы в sRGB до загрузки. Если оставить Adobe RGB, Tilda конвертирует профиль сама, но иногда даёт лёгкий сдвиг цвета, особенно в красных и оранжевых оттенках.
- Для баннеров и логотипов отключайте режим кропа «cover» в настройках Zero Block и используйте «contain» с точным соответствием размеру исходника - так картинка не проходит через двойное масштабирование.
Эти шаги не убирают сжатие Tilda полностью, но заметно снижают разницу между тем, что вы загрузили, и тем, что видит посетитель сайта.
Кастомный скрипт и ручные доработки против пережатия
Когда стандартных настроек не хватает - например, для фотопортфолио, каталога с сотнями SKU или сайта недвижимости, где качество фото критично для конверсии - я подключаю кастомный скрипт, который выводит изображения через внешний CDN (Cloudflare Images, imgproxy или собственный S3-бакет), минуя штатный обработчик Tilda. Картинка вставляется через HTML/код-блок, и платформа её уже не трогает.
Такой подход добавляет пару часов настройки и требует отдельного хостинга для медиафайлов, зато позволяет управлять качеством сжатия вручную и отдавать retina-версии именно там, где они нужны. Если стандартной загрузки через редактор недостаточно и нужна доработка под конкретный сайт, такие задачи я беру в услугах по доработке сайтов на Tilda.
Что делать, если изображения уже испортились после публикации
Если сайт уже опубликован и качество фото не устраивает, первым делом проверьте, не осталось ли старой версии картинки в кэше CDN Tilda - иногда повторная загрузка того же файла с тем же именем не обновляет отдачу мгновенно, и помогает загрузка с новым именем файла. Дальше пересмотрите исходники: если фото изначально были взяты со стоков в низком разрешении и просто растянуты под ширину блока, никакая перезагрузка не спасёт, нужен более качественный исходник.
Для сайтов, где фотографии - это основа продукта (портфолио фотографов, шоурумы, каталоги дизайнерской мебели), в какой-то момент ограничения Tilda становятся не косметической проблемой, а барьером для продаж. В таких случаях я советую считать миграцию на WordPress с полным контролем над обработкой медиа, а не бесконечно бороться с чужим пайплайном сжатия.
От лендинга до интернет-магазина
Сайт / Tilda
от 30 000 ₽
Подробнее →Частые вопросы
Можно ли отключить сжатие изображений в Tilda?
Полностью отключить нельзя ни на одном тарифе, включая платные. Обработчик изображений встроен в платформу и работает одинаково для всех аккаунтов. Единственный способ обойти его - выводить картинки через внешний код-блок с собственным хостингом, минуя стандартную загрузку в редакторе.
Почему PNG на Tilda весит меньше, но выглядит хуже?
Если PNG после загрузки стал легче, значит Tilda всё равно перегнала его в WebP или пережала алгоритмом с потерями, хотя исходно PNG - формат без потерь. На фотографиях с плавными переходами цвета это даёт заметный баннинг. Для фото лучше изначально грузить JPEG в разумном качестве, а PNG оставлять для графики с текстом и прозрачностью.
Помогает ли платный тариф Tilda с качеством картинок?
Нет, тариф влияет на лимиты хранилища, количество страниц и доступные блоки, но не на алгоритм обработки изображений. Business и Agency обрабатывают фото точно так же, как Personal.
Стоит ли переносить сайт с Tilda на WordPress из-за качества изображений?
Если фото - ключевая часть продукта и разница в резкости реально влияет на продажи (портфолио, шоурум, каталог с крупными карточками товара), перенос оправдан. Для обычного лендинга с несколькими фоновыми картинками смысла тратить бюджет на миграцию обычно нет, достаточно подготовить исходники по правилам из этой статьи.