Как проверить безопасную область баннера YouTube: разбор спецификации 2560×1440

Если ты хоть раз загружал баннер на YouTube, а потом открывал канал с телефона и видел, что половина надписи просто исчезла, — этот разбор для тебя. YouTube принимает картинку 2560×1440, но показывает её на разных устройствах по-разному. И говоря «по-разному», я имею в виду «обрезает почти всё».

В чём подвох спецификации

Официальные требования YouTube простые: размер 2560×1440, формат PNG или JPG, вес до 6 МБ, цветовое пространство sRGB. Проблема в том, что одна и та же картинка кадрируется под пять типов устройств, и для каждого свои координаты.

Так выглядит реальное поведение платформы:

Безопасные зоны

Внутри холста есть два прямоугольника, о которых знают только те, кто читал API.

• Web-safe area: 1546×423 px, по центру по горизонтали, со смещением к верху.
• TV-safe area: 1235×338 px, ровно по центру внутри предыдущей.

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

Это не маркетинговые рекомендации — точные координаты публикует только Google в документации channelBanners endpoint API YouTube Data API v3.

Главная ошибка — рисовать на всём холсте

Самая частая история, которую я вижу в сотнях присланных баннеров: дизайнер раскладывает макет по всему полю 2560×1440, кликает «Загрузить», а потом недоумевает, почему на мобильном видно только средние 31% картинки. Так и работает. YouTube молча принимает файл, но при отображении берёт лишь маленький кусок.

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

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

Самый простой способ — наложить на макет три прямоугольника: полный холст, Web-safe и TV-safe. Можно сделать это в графическом редакторе, но быстрее использовать готовый чекер: он принимает картинку, рисует эти рамки поверх и показывает, что останется на каждом типе устройств. Всё происходит в браузере, файл никуда не загружается.

Дальше план такой:

1. Открой исходный PSD, Figma или готовый JPG/PNG в исходном размере.
2. Включи оверлей с безопасными зонами.
3. Перемести все смысловые элементы — текст, логотип, кнопки — внутрь области 1546×423.
4. Если важно, чтобы баннер не резался на телевизорах, держи ключевое внутри 1235×338.
5. Экспортируй в sRGB, проверь вес файла. Если больше 6 МБ — сожми до качества 92 в JPG.

После такой проверки баннер не придётся перезаливать трижды.

Мелочи, которые ломают баннер

За годы работы с этим форматом я насобирал несколько граблей, о которых не пишут в официальных гайдах.

API — источник правды, а не маркетинговые страницы. В справке YouTube всё гладко и красиво, но точные прямоугольники кадрирования указаны только в документации API. Если делаешь инструмент или сверяешь координаты — читай channelBanners endpoint.

CMYK тихо ломает цвета на некоторых телевизорах. Браузеры отдают изображения в sRGB, а если дизайнер принёс баннер в CMYK или Adobe RGB, красные становятся оранжевыми, а синие плоскими. Перед загрузкой всегда конвертируй в sRGB.

Лимит 6 МБ срабатывает молча. Форма просто не реагирует, никакого сообщения об ошибке. Поэтому всегда проверяй вес файла до того, как жать «Загрузить». PNG-24 нужен только при реальной прозрачности, во всех остальных случаях JPG с качеством 92 обычно влезает без проблем.

Умные телевизоры могут срезать ещё больше. На старых Vizio и Hisense есть оверскан: картинка теряет ещё 3–5% по краям. Если TV для тебя важен, держи важные детали минимум в 50 px от любого края.

Вывод

Спецификация 2560×1440 — это не площадь для творчества, а конверт, из которого YouTube вырезает разные куски. Главное правило: весь смысл — в центр, особенно в верхнюю его половину. Перед загрузкой проверь оверлей безопасных зон и размер файла. Это займёт меньше минуты, но избавит от перезаливок и недоуменных сообщений от подписчиков, которые не видят твоё расписание.