Как добавлять изображение на сайт Тильда

Для установки фонового изображения для всей страницы в Tilda, нужно воспользоваться специальным блоком:

1. Найдите блок T674. В режиме редактирования страницы перейдите во вкладку “Библиотека блоков” → “Другое” и добавьте блок T674.
2. Загрузите фоновое изображение. В настройках нового блока нажмите на область загрузки и выберите файл в диалоговом окне загрузки.
3. Удалите цвет фона. Если на вашей страничке уже есть блоки с заданным цветом фона, он может перекрывать картинку. Чтобы сделать прозрачный фон, откройте настройки каждого блока, удалите значение цвета в поле “Фон” и сохраните изменения. Теперь ваше изображение будет видно. Если вы используете ZeroBlock, или другой блок с пустой основой, вам не нужно ничего удалять.

После этих действий выбранное изображение будет отображаться на фоне всей страницы.

В Tilda, фотография может использоваться в дизайне блоков. Изображения можно сочетать с текстом и другими элементами. Для этого используется встроенная библиотека изображений.

1. Откройте библиотеку изображений. Чтобы выбрать изображение из библиотеки, нажмите в настройках блока на иконку с лупой рядом с полем для загрузки картинки или снимка.
2. Выберите изображение. В появившейся панели есть поиск по ключевым словам. Укажите желаемый размер и категорию. Для загрузки, наведите курсор на нужный вариант и нажмите “Выбрать”.
3. При необходимости – добавьте собственное фото. Через интерфейс блока вы можете загрузить свои изображения с компьютера или подключить аккаунт Instagram.

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

Расположение текста поверх фотографии или иллюстрации – популярный и сильный графический прием оформления сайта. Он обращает на себя внимание, показывает важность информации. Этот прием часто используется в обложках, оглавлениях, блоках с призывами к действию и кнопками.

Для размещения текста поверх изображения используйте такие блоки:

• CR45 – обложка с текстом и кнопкой на изображении.
• CR46 – обложка с заголовком, кнопками и колонками.
• Zero Block – дает возможность вручную разместить текст на любой слой, относительно изображения.

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

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

Для размещения текста рядом с изображением можно использовать следующие блоки:

• IM07 – блок с изображением и текстом, расположенными рядом. В настройках можно изменить порядок элементов.
• TE610 – карточки с фоновым изображением и текстом в колонках. Позволяет создать плитку из изображений с текстом.
• Zero Block – предоставляет свободный функционал для настройки расположение текста и изображения.

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

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

Чтобы добавлять подписи под изображением можно использовать следующие блоки:

• GL26 – галерея с миниатюрами. Позволяет добавить подписи к изображениям.
• Zero Block – позволяет вручную добавить текст под изображением с полной свободой в дизайне.

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

Вы должны выбирать дизайн исходя из типизации сайта и целевой аудитории.

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

Чтобы открыть библиотеку изображений, в любом блоке с изображением перейдите в меню “Контент” и нажмите на ссылку “Искать в библиотеке”. В Zero Block откройте настройки элемента, там будет иконка с лупой. Нажмите на нее.

Библиотека изображений Tilda предлагает следующие возможности:

• Сервисы. Подборка лучших изображений, которые разделены на категории: фотографии, иллюстрации, конструкторы иллюстраций и иконки.
• Tilda Icons. Коллекция бесплатных иконок от Tilda Publishing, которые можно использовать в личных и коммерческих проектах. Выберите тему из предложенных, чтобы просмотреть варианты иконок. Для загрузки иконки в блок наведите курсор на нее и нажмите “Выбрать”, после чего иллюстрация загрузится в блок.
• Иконки от Linea.io: коллекция иконок, созданных дизайнером Дарио Фернандо, и имеющие лицензии Creative Commons Attribution. Вы можете копировать, модифицировать, распространять и использовать эти иконки бесплатно, включая коммерческие цели. Для загрузки иконки в блок наведите на нее курсором и нажмите кнопку “Выбрать”.
• Добавление собственных фото из Instagram. Перейдите на вкладку Instagram в библиотеке изображений и нажмите кнопку “Продолжить через Instagram”. Введите логин и пароль от “Инстаграма” и подтвердите доступ для приложения Тильда. Откройте меню “Контент”, библиотеке изображений есть вкладка Instagram. Выберите нужную фотографию и добавьте ее на сайт.

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

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

Использование современных форматов WebP, AVIF, вместо традиционных JPEG и PNG позволяет дополнительно сократить размер изображения на 25 - 35% благодаря более эффективным алгоритмам сжатия.

Перед загрузкой на Tilda рекомендуется уменьшить размер изображений. Это связано с тем, что при загрузке больших изображений, они автоматически уменьшаются до 1680 на 945 в пикселях.

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

Чтобы определить необходимый размер изображения, можно воспользоваться сеткой в редакторе Tilda. Одна колонка сетки составляет 60 пикселей, а расстояние между колонками – 40 пикселей. Таким образом, зная, сколько колонок занимает изображение, можно рассчитать его оптимальный размер.

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

• OptiPNG;
• RIOT;
• PNGOUT;
• Shrink Pictures;
• Jpeg Reducer;
• JPEGMini.

С этими инструментами вы уменьшите размер, и соответственно вес, изображения, без заметных потерь качества. В различных редакторах вы также можете экспериментировать с гаммой, резкостью, контрастом и прочими настройками. 

Для примера оптимизации была выбрана фотография в исходном разрешении 2048:1348 пикселей.

Используем бесплатный инструмент JPEGMini. Как видно по результату – качество и гамма изображения практически не изменились, но размер и вес стали подходить под требование загрузки на сайт.