Почему после экспорта с Тильды картинки размытые

Если картинки размытые после экспорта с Тильды — дело почти никогда не в том, что «скачалось плохое качество». Оригиналы обычно скачались нормально. Проблема в другом: на странице осталась заглушка, которую Тильда показывает первые доли секунды, пока грузится настоящее фото. На живом сайте её подменяет JavaScript. В экспорте подменять некому — и заглушка остаётся навсегда.

Причин ровно три, и они разные. Мы разбирали каждую на живых сайтах, когда чинили парсер, — ниже механика без упрощений.

Причина 1: настоящая картинка лежит не в том атрибуте

Тильда отдаёт изображение примерно так:

<img src="https://static.tildacdn.com/…/blurred.jpg"
     data-original="https://static.tildacdn.com/…/full.jpg">

В src — крошечная размытая копия, в data-original — настоящая. Это ленивая загрузка: браузер сразу рисует лёгкую заглушку, а скрипт Тильды потом подставляет оригинал в src. Пока скрипт не отработал, посетитель видит размытое пятно — предполагается, что доли секунды.

Что ломается при простом скачивании. Утилита вроде wget забирает HTML как есть — с заглушкой в src. Оригинал в data-original она может даже скачать, но в вёрстке он никак не используется: браузер показывает то, что в src. Сайт открывается — и весь состоит из размытых пятен.

Почему не спасает «просто отрендерить в браузере». Кажется, что достаточно дать скрипту Тильды отработать и снять готовый DOM. Но если в разметке остались оба атрибута, ленивая загрузка на экспортированном сайте может запуститься заново и снова подставить заглушку — теперь уже без шанса подгрузить оригинал.

Как чиним. Переносим значение data-original (а также data-src, data-lazy-src) в src — и удаляем ленивый атрибут. Не «скачиваем оба», а именно перекладываем и убираем источник соблазна. После этого подставлять заглушку нечем и неоткуда.

Причина 2: фон задан CSS-классом, и он сильнее вашего inline-стиля

Со фоновыми картинками — отдельная история. Тильда часто ставит фон не атрибутом, а своим CSS-классом:

.t-bgimg { background-image: url(…blurred.jpg); }

А настоящий адрес лежит в data-bg или data-content-cover-bg.

Логичный ход — подставить локальный файл в inline-стиль элемента:

<div style="background-image: url('/images/full.jpg')">

И это не сработает. Точнее, сработает не всегда — а «не всегда» на практике означает «на части блоков фон останется размытым, и вы будете гадать почему». Inline-стиль обычно сильнее класса, но у Тильды в этих классах свои правила приоритета, и при определённых сочетаниях выигрывает класс — с заглушкой внутри.

Как чиним. Пишем фон принудительно:

<div style="background-image: url('/images/full.jpg') !important">

!important здесь не «на всякий случай», а осознанное решение: мы не знаем заранее, какой из классов Тильды окажется на конкретном блоке, и не хотим угадывать. Заодно вычищаем filter: blur(...), если он остался в том же inline-стиле.

Причина 3: размытие — это не картинка, а эффект, который забыли снять

Третий случай самый обидный, потому что картинка тут правильная. В Zero-блоках и в анимациях «с появлением» Тильда вешает на обёртку эффект прямо в стиле:

<div class="t-cover__carrier" style="filter: blur(4px)">

Это часть анимации загрузки: сначала размыто, потом скрипт снимает blur, и фото «проявляется». Если снять снимок страницы до того, как скрипт снял размытие, эффект застынет в экспорте. Оригинал на месте, ссылка правильная, файл скачан — а блок навсегда не в фокусе.

Как чиним. Отдельным проходом убираем filter: blur(...) из inline-стилей у элементов, чьи классы мы знаем как «обёртки-заглушки». Не у всех подряд: размытие бывает и осознанным приёмом дизайна, и вычищать его везде — значит ломать вёрстку тем, кто размытие задумал.

Такая же ровно история есть у mottor: там каждый <div class="section-image"> приезжает с filter: blur(1px) — и без отдельного правила секция выглядит перманентно расфокусированной.

Почему это нельзя «просто предусмотреть заранее»

Ни один из трёх случаев не описан в документации Тильды. Это не публичный контракт, а детали реализации, которые находятся только так: пользователь присылает скриншот, где вместо фото — пятно, и дальше вы разбираетесь, какой из трёх механизмов сработал именно здесь.

Поэтому у нас на каждый такой разбор заводится правило: в чём паттерн, как проявляется, почему решено именно так и на каком сайте проверено. И тест, который падал бы до исправления, — чтобы починенное однажды не отвалилось через месяц.

Как понять, какая причина у вас

Откройте размытую картинку в браузере правой кнопкой → «Проверить код» (Inspect):

• В <img> рядом с src есть data-original с другим адресом → причина 1.
• Картинки нет вовсе, а размытый фон у <div> → смотрите, откуда приходит background-image: если из CSS-класса, а в атрибутах элемента лежит data-bg → причина 2.
• В inline-стиле элемента написано filter: blur(...) → причина 3.

Если экспорт делали через Webrelay и картинка всё равно размытая — это повод написать нам: значит, встретился четвёртый механизм, которого мы ещё не видели. Так и появляются новые правила.

Часто задаваемые вопросы

Почему картинки размытые после экспорта с Тильды?

Потому что в src осталась заглушка — маленькая размытая копия, которую Тильда показывает, пока грузится оригинал. На живом сайте её подменяет скрипт, в экспорте подменять некому. Настоящий адрес обычно лежит рядом, в атрибуте data-original.

Значит, оригиналы не скачались?

Чаще всего скачались. Именно поэтому случай и коварный: файлы лежат на хостинге, вес архива нормальный, а на странице — пятна. Проблема не в скачивании, а в том, какой адрес остался в вёрстке.

Можно ли починить вручную?

На одной-двух картинках — да: замените значение src на то, что в data-original, и удалите data-original. На сайте из тридцати блоков это часы работы, и фоновые картинки так не чинятся — там нужен !important.

Почему просто не отрендерить страницу в браузере и не снять готовый результат?

Помогает, но не полностью. Если в разметке остались оба атрибута, ленивая загрузка на новом сайте запустится снова и вернёт заглушку. Плюс так не решается случай с застрявшим filter: blur. Нужны все три правила, а не одно.

У меня mottor, а не Тильда — те же причины?

Механика похожа, детали другие: у mottor размытие приезжает в filter: blur(1px) на блоках section-image, а адаптивные картинки лежат в собственном атрибуте pc-adapt, из которого <img> создаётся уже в браузере. Разбор — в статье перенос сайта с mottor.

Что ещё ломается при переносе с конструктора?

Формы (их надо подключать заново) и корзина (на статике она превращается в заявку, а не в оплату). Полный список — в статье что переносится с конструктора, а порядок действий — в чек-листе перед переносом.