Блок «Изображение»

Назначение

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

Как выглядит на лендинге

В предпросмотре изображения файл занимает ширину блока с сохранением пропорций.

Блок «Изображение». 1. предпросмотре изображения — 1. предпросмотре изображения

Поле «Заголовок» не создаёт подпись над или под картинкой. Оно становится альтернативным описанием alt, которое помогает экранным дикторам и используется, если браузер не может показать файл.

Настройки

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

Блок «Изображение». 2. значок редактирования изображения — 2. значок редактирования изображения

Заголовок — кратко опишите смысл изображения, а не его оформление. Например: «Рабочее пространство онлайн-курса».
Изображение для компьютеров — файл для экранов шире 760 пикселей.
Изображение для мобильных устройств — файл для экранов шириной до 760 пикселей.

Блок «Изображение». Отмеченные элементы: 3. панель настроек изображения; 4. Изображение для компьютеров; 5. Изображение для мобильных устройств — 3. панель настроек изображения · 4. Изображение для компьютеров · 5. Изображение для мобильных устройств

Для двух вариантов можно загрузить разные PNG, JPEG или WebP. Если заполнено только одно поле, доступный файл используется на всех устройствах. После успешной загрузки поле показывает миниатюру и действие «Удалить изображение».

Подготовка и пропорции

После выбора файла откроется окно Подготовка изображения. Для обычной иллюстрации изначально выделено всё изображение. Можно оставить оригинал, выбрать другую область или задать пропорции рамки. Поля ширины и высоты задают размер итогового файла в пикселях и изменяются вместе, сохраняя пропорции выделенной области. «Сбросить изменения» возвращает исходное выделение и размеры.

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

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

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

Пустые поля и ограничения

Если оба файла отсутствуют, редактор показывает заполнитель «Изображение не загружено», а опубликованная страница полностью пропускает этот блок. Пустой заголовок не мешает показу картинки: для alt используется название лендинга.

Каждый файл должен быть не больше 10 МБ и не больше 8000 пикселей по ширине или высоте.