Размер в пикселях
Сначала определите максимальный размер изображения в дизайне. Если карточка никогда не шире 700 пикселей, исходник 5000 пикселей не дает полезной детализации. Для Retina можно оставить разумный запас, но не в семь раз.
Tilda указывает, что крупные изображения автоматически уменьшаются, однако ручная подготовка исходника помогает контролировать качество и вес.
Сжатие
После кадрирования сожмите файл. Фотография и иллюстрация с плоскими цветами требуют разных настроек. Сравнивайте результат визуально: артефакты на лице или продукте хуже небольшой экономии в килобайтах.
Форматы
Tilda использует адаптивную доставку и может отдавать оптимизированные форматы. Но исходный формат все равно выбирайте по типу графики: JPEG для фотографий, PNG там, где нужна прозрачность и она оправдана, SVG для векторных иконок и простых иллюстраций.
Нужно ли вручную делать WebP
Не обязательно для каждого файла. Tilda пишет, что ее система адаптивной загрузки умеет конвертировать изображения в WebP. Гораздо важнее не загружать избыточный исходник и не отключать оптимизацию без причины.
Lazy Load
Отложенная загрузка изображений ниже первого экрана включена на Tilda по умолчанию. Не отключайте ее глобально ради эффекта появления. Google также рекомендует lazy loading, который срабатывает по видимости, а не требует клика или ручного прокручивания скриптом.
Первое изображение и LCP
Картинка hero должна появляться быстро, поэтому к ней применяются другие приоритеты, чем к десятому экрану. Уберите лишние изображения рядом, подготовьте отдельный мобильный кадр и следите, чтобы критичный ресурс не начинал грузиться слишком поздно.
Alt для поиска и доступности
Alt описывает изображение в контексте страницы. Не превращайте его в список ключевых слов. Если на фото конкретная модель продукта, укажите модель и тип объекта. Если изображение чисто декоративное и не несет смысла, чрезмерно оптимизированный alt не нужен.
Имена файлов
Осмысленное имя полезнее случайного IMG_8392.jpg, особенно при управлении медиатекой. Но имя файла не компенсирует слабую страницу и бессодержательный alt.
Отдельные изображения на мобильном
Если композиция сильно меняется, мобильный исходник может быть оправдан. Он позволяет использовать вертикальное кадрирование и меньший размер. Проверяйте, не загружаются ли одновременно скрытая десктопная и мобильная версии из-за способа реализации.
Галереи и каталоги
Для больших галерей особенно важны Lazy Load и ограничение исходного размера. В каталоге оптимизируйте не только карточку товара, но и миниатюры списка: именно они загружаются массово.
Чек-лист перед загрузкой
- кадрирование соответствует контейнеру;
- размер в пикселях не избыточен;
- файл сжат без видимой потери качества;
- alt описывает содержание;
- на первом экране нет лишних тяжелых изображений;
- Lazy Load не отключен без необходимости;
- мобильная версия проверена отдельно.
Подробная инструкция Tilda по подготовке файлов доступна в справке по изображениям.
