Page Comparison

Модули, применяемые изображения и их размеры

Подробные рекомендации по подготовке графического контента

Все изображения, загруженные на портал кадрируются под определённый размер.
Размеры мы собрали в таблице.

Помните, что изображения не должны быть меньше ожидаемого размера.
Мы рекомендуем подбирать изображения с безопасными полями сверху и снизу, около 50px или 5-20% от длин сторон изображения.
Это должны быть не рамки, а просто участки изображения, которые система может обрезать, затемнить или каким-то другим образом изменить отображение.

Существует 6 типов изображений, которые вы можете использовать в работе с контентом портала.

1. Превью 

2. Шапка

3. Галерея

4. Изображение в теле записи

5. Онбординг

6. Баннеры

7. Изображение на Хоткейс на ГС

8. Изображение для Опросов на ГС

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

Превью

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

Размер изображений: 376 х 160 px для главной и вторичной страницы. Размер может быть пропорционально больше – изображения будут кадрированы под этот размер.
Изображения кадрируются по центру.

Шапка

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

Размер изображений: 1175 х 360 px. Изображения кадрируются по центру.

Галерея

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

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

Размер изображенийможет быть любым. Изображения кадрируются по центру.

Так выглядят изображения в галерее на странице материала.

А так выглядит изображение при просмотре в галерее.

Изображения в теле записи

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

Размер изображений: 750 x N px. Изображения кадрируются по центру.

Онбординг

Требования к размеру изображений – не менее 332 x 480 px.

Баннеры

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

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

Размер изображения:

Фактический отображаемый размер: 1176 x 424 px.

Рекомендуемый к загрузке размер изображения: 1176 x 424 px или пропорционально больше. Рекомендуется оставлять внутри изображения вылеты в 20-30 пикселей. Изображения кадрируются по центру.

Info
Особенности вывода баннеров в мобильном приложении: Выравнивание баннера по центру. Ширина — 444 px, высота — 270 px. При этом высота меняется в зависимости от количества символов в заголовке и подзаголовке баннера.

Хоткейс на ГС

Фактический отображаемый размер: Х x 52 px.

Рекомендуемый к загрузке размер: минимум 188 по ширине, фиксировано 52 по высоте. Размеры хоткейсов формируются в зависимости от их количества. Меньше хоткейсов — шире плашки. Поэтому рекомендуется при малом количестве хоткейсов загружать более широкие картинки, при малом - от 188 пикселей по ширине. Высота хоткейса всегда одна и та же — 52 пикселя.

Опросы

Фактический отображаемый размер: 344 x 196 px — десктоп, 408 x 196 px — ноутбуки, планшеты и мобильное разрешение.

Рекомендуемый к загрузке размер: 408 x 196 px или пропорционально больше. Рекомендуется оставлять внутри изображения вылеты по бокам в 20-30 пикселей, т.к. в разных разрешениях картинка может обрезаться по бокам, (но не по высоте).