Размеры шапки и аватара для соцсетей: как оформить профиль, чтобы не обрезало

Короткий ответ: загружайте аватар квадратом 1080×1080 и держите лицо или знак в центральном круге, а шапку делайте точно под размер площадки — например, 1920×768 для обложки сообщества ВК и не менее 2204×826 для обложки канала Rutube. Всё важное — заголовок, лицо, товар — ставьте в центральную безопасную зону, а не к краям: обрезает картинку не «плохой файл», а несовпадение пропорций и элементы интерфейса поверх краёв. Перед публикацией обязательно посмотрите результат и с компьютера, и с телефона.

Почему соцсеть обрезает шапку и аватар даже у «правильной» картинки?

Одна и та же картинка показывается в разных местах и пропорциях: на компьютере шапка широкая, на телефоне — уже и выше, а аватар почти везде вписан в круг. Если пропорции файла не совпали с пропорциями «витрины», платформа сама дорезает края под свой формат.

• Круглая маска аватара. Площадь круга — примерно 78,5% площади квадрата: углы (около 21,5%) гарантированно пропадут.
• Разные пропорции на устройствах. Шапка, целиком видимая на компьютере, на телефоне может урезаться сверху, снизу или по бокам.
• Интерфейс поверх картинки. Аватар, название и кнопки накладываются на шапку и закрывают её часть — чаще всего низ и левый край.
• Сжатие при загрузке. Площадка уменьшает файл под свои лимиты, и мелкий шрифт с тонкими линиями «рассыпаются» первыми.

Видеоразбор — в начале статьи.

Какие размеры загружать: таблица для шапки, аватара и обложки канала

Единого размера для всех площадок нет, но рабочие размеры загрузки предсказуемы. Главное правило: холст в редакторе создаётся сразу в финальных пропорциях площадки, а не обрезается «потом как-нибудь».

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

Что такое безопасная зона и сколько отступать от краёв?

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

• Для аватара: впишите в квадрат круг диаметром 80% стороны (для холста 1080×1080 это круг 864 px по центру) и не выводите лицо или логотип за его границу. Запас в 20% страхует от масок разной формы.
• Для шапки: держите ключевой текст и объект в центральных 60% по ширине и в средней половине по высоте. Это рабочий ориентир для случая, когда одна шапка смотрится и на компьютере, и на телефоне.
• Отступы: не ставьте текст ближе 5% ширины холста к левому и правому краям; для холста 1920 px это примерно 100 px с каждой стороны.
• Низ шапки — самая рискованная полоса: там чаще всего «живут» аватар и кнопки. Контакты и призывы к действию в нижние 15–20% высоты лучше не ставить.

Как подготовить шапку и аватар без обрезки: пошагово

Порядок действий одинаков для любого редактора — от профессионального до онлайн-конструктора. На весь цикл с проверкой обычно уходит 20–30 минут.

1. Шаг 1. Создайте холст точного размера площадки (например, 1920×768 для сообщества ВК) до того, как начнёте дизайн, а не после.
2. Шаг 2. Включите направляющие безопасной зоны: центральный круг для аватара и центральную полосу для шапки. Разместите внутри только главное: 1 объект + короткий заголовок.
3. Шаг 3. Проверьте читаемость шрифта арифметикой: на телефоне шапка шириной 1920 px сожмётся примерно до 390 px, то есть в 5 раз. Чтобы буква на телефоне была не ниже 14 px, на холсте её высота должна быть около 70 px (14 × 1920 / 390 ≈ 69).
4. Шаг 4. Экспортируйте в JPG (фото и градиенты) или PNG (строгая графика и логотипы), цветовое пространство — sRGB. Вес файла держите заметно ниже лимита площадки, чтобы сжатие не «съело» детали.
5. Шаг 5. Загрузите и посмотрите предпросмотр на компьютере и в мобильном приложении: обрезка часто видна только на одном из устройств.
6. Шаг 6. Уменьшите копию аватара до 48×48 px и посмотрите на неё одну секунду: если за секунду не понятно, что это за знак или лицо, аватар нужно упрощать.

Почему аватар «мылится» и не читается в комментариях?

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

• Один знак или одно лицо крупным планом — занимает 60–70% круга.
• Фон заметно темнее или светлее объекта; ориентир для пары «текст + фон» — контраст от 4,5:1.
• Если логотип горизонтальный, для аватара делается отдельная квадратная версия-знак, а не уменьшенная копия полного логотипа.
• Исходник меньше 800×800 px площадка растянет, и картинка потеряет резкость ещё до круглой обрезки.

Сколько текста можно ставить на шапку, чтобы его не закрыло кнопками?

Шапка — не баннер на сайте: поверх неё лежат аватар, название страницы и кнопки действий. Поэтому текст на шапке выполняет одну задачу — за 2 секунды объяснить, куда попал человек.

• Объём: ориентир — 3–7 слов заголовка и одна короткая строка под ним. Телефоны и адреса на шапке с телефона не читаются и дублируют блок контактов.
• Место: заголовок — в центральной полосе; проверьте, что на мобильном предпросмотре его не пересекает аватар.
• Размер: считайте по формуле из шага 3 выше; мелкий подзаголовок «для красоты» лучше убрать совсем, чем оставить нечитаемым.

Делать / не делать: чек-лист перед загрузкой

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

Что лучше загружать — PNG или JPG?

Фото и градиенты — JPG: легче, а видимых потерь после сжатия обычно нет. Плоская графика и логотипы — PNG: без «грязных» ореолов вокруг букв. Цвет — sRGB, иначе после загрузки картинка потускнеет.

Можно ли одной картинкой закрыть все соцсети сразу?

Одним мастер-файлом — да, одним финальным размером — нет. Сделайте один дизайн и экспортируйте его в размерах каждой площадки, каждый раз проверяя безопасную зону. Пропорции шапок различаются (5:2, 8:3 и другие), поэтому прямая загрузка одного файла везде почти гарантированно что-то обрежет.

Почему на компьютере всё видно, а на телефоне шапка обрезана сверху и снизу?

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

Аватар загрузился, но лицо оказалось срезано сверху. Что делать?

Сместите лицо ниже и уменьшите его в исходнике так, чтобы вся голова попадала в центральный круг диаметром около 80% стороны квадрата. Быстрая проверка в редакторе: наложите круг по центру холста и посмотрите, что останется за его пределами, — там не должно быть ничего важного.

Нужно ли делать шапку в двойном разрешении «для ретины»?

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

Итог

Обрезка предсказуема: круглая маска съедает углы аватара, а шапку дорезают пропорции телефона и кнопки поверх неё. Работает простая система: холст точного размера площадки, главное — в центральной безопасной зоне, шрифт проверен пересчётом под экран телефона. Финальный контроль — три взгляда: компьютер, телефон и аватар в размере 48 px. Если во всех трёх случаях за пару секунд понятно, чья это страница и о чём она, — оформление свою задачу выполнило.