Картинка
Элемент Картинка (Image) используется для добавления, редактирования и стилизации изображений.
Картинка отличается от фонового изображения тем, что фоновое изображение размещается на другом элементе, например, на Секции или Div-блоке, а картинка сама по себе является элементом.
Чтобы добавить Картинку на страницу:
- Добавьте элемент Картинка на Холст - перетащите его из панели Элементов (Elements) или просто кликните на его названии.
- Загрузите изображение - дважды кликните на элементе Картина на Холсте и в открывшемся окне "Поиск изображений" (Image search) нажмите кнопку "Загрузить" (Upload) или выберите уже загруженное изображение из списка.
В окне поиска изображений можно сортировать изображения по типу (SVG, PNG, JPG, GIF, WEBP) и искать по названию. Максимальный размер загружаемого изображения составляет 64 мегабайта.
Все загруженные изображения автоматически конвертируются в формат WEBP, оптимизированный для веба.
Настройки Картинки на вкладке Настройки (Settings) правой панели включают:
Основные настройки (General)
- Предварительный просмотр изображения
- Атрибут Src со ссылкой на изображение и данными о его размере (ширина и высота в пикселях и размер в килобайтах)
- Кнопка Заменить изображение (Replace image), которая открывает окно поиска изображения
- Входящий размер (Incoming size). Ширина (W) и высота (H) изображения на сайте после публикации проекта, измеряется в пикселях. По умолчанию ширина составляет 640px, высота - 480px. Вы можете изменить размер изображения, а также включить зависимость ширины от высоты, установив один из этих параметров (при этом другой автоматически под него подстроится).
Дополнительные стили (Extra styles)
Параметр Размещение объекта (Object fit) определяет, как элемент Картинка реагирует на высоту и ширину загруженного изображения:
- Вмещать (Contain) - масштабирует изображение так, чтобы оно полностью отображалось внутри элемента Картинка. Это значение также переопределяет любую заданную ширину и высоту.
- Покрывать (Cover) - масштабирует изображение, чтобы заполнить весь элемент, переопределяя любую заданную ширину и высоту. Изображение может быть обрезано в зависимости от соотношения сторон элемента Картинка, размера экрана и изображения.
- Исходный размер (Original) - определяет исходную ширину и высоту изображения.
Настройки SEO
Вы можете установить для изображения атрибут Alt и заголовок Title, которые имеют важное значение для seo-оптимизации сайта, помогая поисковым системам определить, о чем идет речь в изображении.
Атрибут Alt предназначен для альтернативного текста, который появляется, когда по какой-либо причине изображение не загружается на страницу. Это может быть краткое описание изображения.
Заголовок (Title) добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на изображение на сайте.
Вы можете стилизовать Картинку так же, как и любой другой элемент, используя вкладку Стили правой панели.
Некоторые стили не стоит применять к Картинкам, например, фоновые стили, так как они не будут видны, либо будут частично перекрываться изображением с прозрачным фоном.
Чтобы сделать Картинку оригинальной, вы можете:
- настроить радиус закругления для одного или нескольких углов Картинки (в разделе Размер)
- создать рамку вокруг Картинки (в разделе Граница)
- добавить эффекты (в разделе Эффекты):
- тень: сделайте так, чтобы Картинка выглядела более выразительной
- фильтры: используйте для Картинки различные фильтры, такие как размытие, оттенки серого или сепия
