Картинка

Элемент Картинка (Image) используется для добавления, редактирования и стилизации изображений.

Картинка отличается от фонового изображения тем, что фоновое изображение размещается на другом элементе, например, на Секции или Div-блоке, а картинка сама по себе является элементом.

Как добавить Картинку на страницу

• Добавьте элемент Картинка на Холст — перетащите его из панели Элементов (Elements) или просто кликните на его названии.

• Загрузите изображение — дважды кликните на элементе Картина на Холсте — в левой панели откроется вкладка Ресурсы, где вы можете выбрать одно из уже загруженных изображений или загрузить новое.

Вы можете загрузить изображения в форматах jpg, png, tiff, tif, bmp, svg, gif, webp. Максимальный размер загружаемого изображения — 64 мегабайта.

Подробнее о загрузке изображений — Вкладка Ресурсы: Файловое хранилище.

Настройки Картинки

Настройки Картинки на вкладке Настройки (Settings) правой панели включают:

Общие настройки (General)

• Предварительный просмотр изображения
• Адрес файла со ссылкой на изображение
• Данные о размере изображения (ширина и высота в пикселях и размер в килобайтах)
• Кнопка Заменить изображение (Replace image), которая открывает вкладку Ресурсы

Публикуемый размер (Incoming size)

Ширина (Ш) и высота (В) изображения на сайте после публикации проекта, измеряется в пикселях.

По умолчанию ширина составляет 640px, высота — 480px. Вы можете изменить размер изображения, а также включить зависимость ширины от высоты, установив один из этих параметров (при этом другой автоматически под него подстроится).

Дополнительные стили (Extra styles)

Параметр Заполнение (Object fit) определяет, как элемент Картинка реагирует на высоту и ширину загруженного изображения:

• Вмещать (Contain) — масштабирует изображение так, чтобы оно полностью отображалось внутри элемента Картинка. Это значение также переопределяет любую заданную ширину и высоту.

• Покрывать (Cover) — масштабирует изображение, чтобы заполнить весь элемент, переопределяя любую заданную ширину и высоту. Изображение может быть обрезано в зависимости от соотношения сторон элемента Картинка, размера экрана и изображения.

• Исходный размер (Original) — определяет исходную ширину и высоту изображения.

Настройки SEO

Вы можете установить для изображения атрибут Alt и заголовок Title, которые имеют важное значение для seo-оптимизации сайта, помогая поисковым системам определить, о чем идет речь в изображении.

Альтернативный текст (Alt) предназначен для альтернативного текста, который появляется, когда по какой-либо причине изображение не загружается на страницу. Это может быть краткое описание изображения.

Название (Title) добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на изображение на сайте.

Стили Картинки

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

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

Чтобы сделать Картинку оригинальной, вы можете:

• настроить радиус закругления для одного или нескольких углов Картинки (в разделе Размер)
• создать рамку вокруг Картинки (в разделе Граница)
• добавить эффекты (в разделе Внешний вид):

  • тень: сделайте так, чтобы Картинка выглядела более выразительной

  • фильтры: используйте для Картинки различные фильтры, такие как размытие, оттенки серого или сепия