Обложка сообщества ВК: размеры, безопасные зоны и сборка кодом

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

Разберу две вещи: точные размеры с безопасными зонами и способ собирать обложку кодом, чтобы правка занимала минуту.

Размеры, которые надо знать

Что	Размер	Где показывается
Обложка сообщества	1920 × 768	десктоп, полностью
Видимая зона на мобильном	центральные ~1196 × 768	телефон, обрезка по краям
Безопасная зона под текст	центр 1100 × 600	видно везде
Аватар сообщества	400 × 400	круглый кроп
Живая обложка (сторис)	1080 × 1920	вертикаль, до 5 штук

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

Правило безопасной зоны

Всё, что должно читаться, живёт в центральном прямоугольнике. По краям — только фон, градиент, декор.

Практическое следствие: не выравнивай текст по левому краю обложки. Классическая ошибка — красивая композиция «текст слева, фото справа», которая на телефоне превращается в обрезанное слово и половину лица.

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

Почему кодом, а не в редакторе

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

Обложка кодом — это веб-страница размером 1920 × 768, которую браузер сохраняет картинкой. Текст в ней лежит переменной. Поменял строку, запустил, получил новый файл. Минута.

Второй выигрыш — повторяемость. Пять вариантов обложки под А/Б тест собираются одним прогоном, а не пятью подходами к редактору.

Как это устроено технически

Три части, каждая простая.

Разметка. Обычный HTML: фон, блок с фото, блок с текстом. Размер страницы жёстко задан в 1920 × 768.

Стили. Палитра, шрифты, положение блоков. Безопасная зона задаётся отступами: по 410 пикселей слева и справа остаются под обрез.

Рендер. Браузер открывает страницу в нужном размере и делает снимок. Никаких графических редакторов и подписок.

node build_cover.js --text "Контент-завод на коде" --photo фото/автор-01.jpg

На выходе — PNG точного размера, готовый к загрузке.

Проверка перед загрузкой

1. Открой картинку и мысленно отрежь по 410 пикселей слева и справа. Всё важное осталось? Если нет — двигай к центру.
2. Уменьши картинку до ширины экрана телефона. Заголовок читается? Если приходится вглядываться — увеличивай кегль.
3. Посмотри на неё три секунды и закрой. Что запомнилось? Если ничего — на обложке слишком много всего.
4. Проверь контраст текста к фону в самом светлом месте фона, а не в среднем.
5. Загрузи и обязательно открой сообщество с телефона. Это единственная настоящая проверка.

Что писать на обложке

Не название сообщества — оно и так подписано сверху. Обложка отвечает на другой вопрос: зачем сюда подписываться.

Работающая формула: одна строка про то, что человек получит, плюс одна деталь, которая делает это правдоподобным.

Не «Блог о нейросетях», а «Собираю контент-завод на коде и показываю каждый шаг». Не «Обучение ИИ», а «Как отдать контент машине: разборы, скрипты, грабли».

И не ставь на обложку призыв «подпишись» — он занимает место и ничего не добавляет. Человек и так знает, где кнопка.

Живая обложка: стоит ли

Живая обложка — это вертикальные сторис вместо статичной картинки. Плюс: движение цепляет глаз, можно показать несколько смыслов подряд. Минус: на десктопе она превращается в узкую полосу, и вся композиция рушится.

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

Три ошибки, из-за которых обложку не читают

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

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

Три смысла сразу. Кто ты, что даёшь, куда идти, плюс регалии — и человек не считывает ничего. Обложка держит одну мысль. Остальное расскажут описание и закреп.

Что ещё собирается тем же способом

Раз обложка — это страница, то тем же скриптом делается всё остальное оформление:

• аватар 400 × 400 — с проверкой, что не обрежется в круг;
• плитки меню — одинаковый стиль без ручной вёрстки каждой;
• баннеры под кодовые слова — по одному на кампанию;
• вертикали для живой обложки — те же смыслы в формате сторис.

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

Частые вопросы

Какой размер обложки сообщества ВКонтакте?

1920 × 768 пикселей. Но на телефоне видна только центральная часть — примерно 1196 пикселей шириной, поэтому весь значимый текст должен помещаться в центр.

Почему обложка обрезается на телефоне?

Мобильная версия показывает центральную часть широкой картинки. Всё, что вынесено к краям, не помещается. Лечится тем, что текст и лицо ставятся в центральные две трети кадра.

Можно ли сделать обложку без графического редактора?

Да. Обложка — это картинка фиксированного размера, а браузер умеет сохранять страницу картинкой. Достаточно свёрстанной страницы 1920 × 768 и одной команды на рендер.

Как часто менять обложку?

Когда меняется главный смысл сообщества: новый продукт, новый оффер, запуск. Менять ради разнообразия смысла нет — узнаваемость важнее свежести.