Адаптивная загрузка изображений — новая функция на Тильде

💫 Внедрили технологию обработки изображений, которая масштабирует их под размер контейнера на сайте и конвертирует в WebP — формат нового поколения.

Функция уже работает на всех сайтах на Тильде, её не нужно подключать. Мы тестировали технологию несколько месяцев и готовы рассказать подробности.

👉 Читать о новой функции: https://tilda.cc/ru/lp/image-optimization
👉 Смотреть видео: https://youtu.be/wyglxbbz7kA

1. Поддержка WebP

🌪 Тильда автоматически конвертирует все картинки на сайте в WebP — формат, который позволяет сжимать изображение до 35% сильнее, чем JPEG, без потери качества. Загружать изображения на сайт в новом формате не нужно, система всё сделает за вас.

2. Адаптивный ресайз изображений

✨ Технология определяет размер браузера и контейнера на макете сайта, затем запрашивает у сервера изображение подходящего размера.

Представьте, что вы загрузили фотографию 1680px по ширине в блок с плиткой из нескольких изображений. На макете сайта размер контейнера 450×300px. Соответственно, посетитель получит не оригинал фотографии, а фотографию, уменьшенную до необходимого размера.

Система постоянно анализирует трафик сайта на Тильде. Скрипт заранее готовит изображения под устройства и браузеры, с которых пользователи заходят на сайт чаще всего. Этот принцип более гибкий, чем «ресайз-на-лету»: иногда браузер тратит меньше времени на скачивание оригинального изображения, чем на ресайз и скачивание оптимизированной картинки.

3. Retina-дисплеи и медленный интернет

👩‍💻 Если у посетителя сайта дисплей с высоким количеством точек на дюйм, скрипт это распознает и запросит у сервера картинку высокого разрешения. Таким образом, изображения будут четкими на устройствах с Retina-дисплеем.

Но если у человека медленный интернет, предположим, на даче, система загрузит облегченную версию изображения. Это позволит не снижать быстродействие сайта.

Адаптивная загрузка изображений — одна из довольно значимых оптимизаций, которую мы внедрили в Тильде. Мы продолжаем работать над ускорением загрузки сайтов, созданных на платформе.

#tildaupdates

Редактирование свойств нескольких элементов в Zero Block

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

Ещё нововведение удобно для адаптации элементов под разные разрешения экрана. Например, если на странице есть шесть текстов одного порядка 24 кегля, дизайнер может переключить вид на экран меньше и сразу задать всем текстам размер 22px.

#tildaupdates

Корзина товаров в Каталоге переместилась в меню модуля

Теперь в Каталоге корзина вынесена отдельным пунктом меню. Отображается, только если есть удалённые товары.

Товары можно восстановить из корзины в течение 7 дней, затем они удалятся навсегда.

#tildaupdates

Импорт макета из Фигмы в Тильду

🚀 Новая функция — автоматический перенос макета из Figma в Zero Block. Больше не нужно переносить созданный дизайн вручную, теперь это можно сделать через API в несколько кликов.

Как работает импорт из Фигмы в Zero Block

1. Подготовьте макет к переносу из Фигмы, чтобы после импорта все элементы встали на нужные места:

— Ширина фрейма — 1200px;
— Каждый блок расположен в отдельном фрейме;
— Чтобы импортировать группу изображением, назовите её image или svg;
— Для импорта кнопки объедините текст и шейп в группу и назовите её button;
— Ширина текста на кнопке должна совпадать с шириной шейпа кнопки;
— Если на шейпе есть эффект, который нельзя воспроизвести в Zero Block, он импортируется с изображением эффекта на фоне.

2. Получите API токен в настройках аккаунта Фигмы. Через API Тильда получит доступ к макету и перенесет его в Zero Block автоматически.

3. Импортируйте макет в Zero Block:
— Откройте меню в Zero Block;
— Нажмите Import;
— Вставьте ссылку на макет, API токен и нажмите Import.
Готово!

Подробнее об импорте макета из Фигмы в Тильду 👉 https://blog.tilda.cc/import-from-figma-to-zero-block

Инструмент находится в beta-тестировании. Если у вас есть предложения по улучшению, вы заметили ошибку или у вас не получилось перенести макет, напишите нам в поддержку через виджет в личном кабинете.

Автоматизируйте рутинные процессы, чтобы оставалось больше времени для творческих задач.

#tildaupdates

NEW: Коллекция изображений Tilda Images

🏞 Tilda Images — премиум-коллекция из 600+ тысяч качественных фотографий и изображений, которые можно добавить на свой сайт, не выходя из редактора.

Пользователи Тильды могут использовать изображения из коллекции для коммерческих проектов на уникальных условиях — без дополнительной платы и указания авторства. Эксклюзивный провайдер библиотеки — сервис Depositphotos.

Чтобы перейти в библиотеку изображений, перейдите в Контент блока с изображением и нажмите на ссылку «Искать в библиотеке» или на иконку с лупой. Просто введите любое ключевое слово и выберите подходящее для вашего проекта изображение.

#tildaupdates

👻 Тёмная тема в Zero Block

Работайте с комфортом при любом освещении — попробуйте тёмную тему для Zero Block ♠️

Работа за компьютером в ночное время или в слабоосвещённом помещении создаёт дополнительное напряжение для глаз. Человек быстрее устаёт и меньше успевает.

Тёмная тема позволяет снизить контраст между помещением и интерфейсом на компьютере — не будет резкого перехода между цветами, значит, напряжение для глаз снизится.

Где включить: перейдите в Zero Block → Нажмите Tab → Zero Block settings → Theme.

Вы попробовали тёмную тему? Поделитесь своими впечатлениями ✨

#tildaupdates

Градиенты в Zero Block

Теперь можно добавлять градиенты в дизайн проекта без использования дополнительных инструментов — прямо внутри редактора Zero Block.

Градиенты в веб-дизайне притягивают взгляд пользователя, добавляют глубину цвета и создают иллюзию трёхмерного пространства. Используйте их, чтобы сделать страницу ярче и свежее. Рассказываем подробнее 👇

✨ Линейный градиент (Linear)
В линейном градиенте переход между цветами происходит по прямой линии. Можно использовать несколько цветов, изменить расстояние между ними внутри градиента и задать любой угол направления для цветового сочетания.

Чтобы добавить линейный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Linear. Чтобы добавить ещё один цвет, выберите его на панели. Чтобы удалить цвет, зажмите его и потяните вниз. Под палитрой можно задать угол, под которым будет отображаться градиент — введите число или покрутите виджет мышкой.

✨ Радиальный градиент (Radial)
Переход между цветами в радиальном градиенте происходит из центра наружу по кругу. В настройках блока можно задать любое количество цветов и расстояние между ними внутри градиента.

Чтобы добавить радиальный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Radial.

📌 Оба эффекта применимы к фону блока, к тексту, кнопкам, шейпам и тултипам.

Подробнее о градиентах в Zero Block 👉 https://blog.tilda.cc/gradients-in-zero-block

А вы используете градиенты в своих проектах? Поделитесь в комментариях 💬

#tildaupdates