Соотношение сторон: 16:9, 4:3, 1:1 и расчёт под соцсети

Скриншот с телефона прислали в мессенджере, и по нему надо сделать баннер. Файл 1080×1920, а в задании написано 16:9. Или наоборот: макет требует 1200×630, а исходная фотография 3000×2000. Соотношение сторон это то, что превращает одно в другое, и понять его проще, чем кажется: по сути это одна дробь, которую нужно сократить.

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

Что такое соотношение сторон и как оно считается

Соотношение сторон это отношение ширины к высоте, записываемое двумя числами через двоеточие: 16:9. Оно никак не зависит от того, сколько пикселей в картинке. Плашка 320×180 и плашка 1920×1080 имеют одно и то же соотношение 16:9, просто вторая в шесть раз больше по каждой стороне. Поэтому в любом разговоре о пропорциях полезно сокращать: берёте ширину и высоту, делите обе на их наибольший общий делитель и получаете самую простую форму.

НОД(1920, 1080) = 120

1920 ÷ 120 = 16
1080 ÷ 120 = 9

1920 × 1080  →  16:9
1280 × 720   →  16:9   (НОД = 80)
3840 × 2160  →  16:9   (НОД = 240)

В десятичном виде то же отношение записывается как 1.7777..., и такие числа встречаются в характеристиках мониторов: 16:9, 16:10, 21:9. Сокращать нужно не всегда: 4:3 и 1:1 уже в простейшем виде, а вот 2560×1080 даёт 64:27, и это честный ответ. Отношение 21:9, которое рекламируют на ультрашироких мониторах, на самом деле равно 2,37, а не 2,333: производители округляют в свою пользу.

Популярные форматы: какие разрешения у каждого

• 16:9 - самый массовый: 1280×720, 1920×1080, 2560×1440, 3840×2160. Экраны, видео, презентации, обложки.
• 16:10 - 1280×800, 1440×900, 1680×1050, 2560×1600. Был стандартом на ноутбуках, встречается и сейчас.
• 4:3 - 1024×768, 800×600, 640×480. Эпоха телевизоров с почти квадратным экраном и первые мониторы.
• 3:2 - 3000×2000, 6000×4000. Классика полнокадровой фотографии: матрица 36×24 мм.
• 1:1 - 1000×1000, 1080×1080. Квадрат для лент и профилей.
• 4:5 - 1080×1350. Вертикальный кадр, который лента Instagram показывает крупнее квадрата.
• 9:16 - 1080×1920. Полноэкранные видео: Reels, Shorts, Stories, TikTok.
• 21:9 - 2560×1080, 3440×1440. Ультраширокие мониторы и кино в широкий кадр.
• A4 - 210×297 мм, соотношение 70:99. Бумага, а не экран, но расчёт тот же.

Под какую задачу какой формат нужен

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

Отдельно стоит сказать, откуда взялись сами пропорции. Формат 4:3 пришёл из телевизионной эпохи, когда кадр строили по экранам и передающим камерам, и держался он десятилетиями. Формат 16:9 пришёл с цифровым телевидением вместе с высшей чёткостью, и с тех пор прижился в мониторах, видео и презентациях. А 9:16 это тот же самый 16:9, просто поставленный вертикально, и поэтому вертикальное видео не обрастает чёрными полосами по бокам.

• Для видео на YouTube или для презентации: 16:9. Широкий кадр занимает всю ширину плеера.
• Для Reels, Shorts и Stories: 9:16. Такое видео идёт во весь экран телефона и в ленте занимает максимум места.
• Для поста в ленте Instagram: 4:5. Лента показывает такой кадр крупнее квадратного, значит он занимает больше места на экране.
• Для аватарки или товарной карточки, где форму задаёт площадка: 1:1.
• Для печати: A4 или Letter, а количество пикселей считается от DPI.
• Для обложки статьи или записи требования у площадок разные, поэтому их стоит проверять в документации конкретного сервиса.

Как посчитать недостающую сторону

Самый частый расчёт: известна одна сторона и известно соотношение, а найти надо вторую. Формула простая: недостающая сторона равна известной, умноженной на соответствующее число из соотношения и делённой на другое.

1. Запишите соотношение как дробь: ширина к высоте.
2. Если известна ширина W, то высота H = W × (h ÷ w), где w и h это числа соотношения.
3. Если известна высота H, то ширина W = H × (w ÷ h).
4. Округлите до целых пикселей и проверьте, что результат не поехал: у 1920×1080 точное отношение 16:9, а вот у 1919×1080 уже нет.

Задача 1: высота 1440 при соотношении 16:9
  ширина = 1440 × 16 ÷ 9 = 2560
  → 2560 × 1440

Задача 2: ширина 1080 при соотношении 9:16
  высота = 1080 × 16 ÷ 9 = 1920
  → 1080 × 1920

Задача 3: ширина 1200 при соотношении 3:2
  высота = 1200 × 2 ÷ 3 = 800
  → 1200 × 800

Проверка: НОД(2560, 1440) = 160  →  16:9

Если известны обе стороны, а найти надо привести картинку к нужному соотношению, всё решается кадрированием: лишнее по краям убирается, а недостающее достраивается. Считать вручную удобно для быстрой прикидки, а калькулятор соотношения сторон делает то же самое: сокращает введённые числа, показывает отношение в десятичном виде и пересчитывает вторую сторону при заданной первой.

Соотношение, DPI и печать

На экране пиксель это единица счёта, а не физическая величина. Сколько пикселей уместится на метр бумаги, зависит от DPI, то есть от количества точек на дюйм. Один дюйм равен 25,4 мм, поэтому пересчёт прямолинейный.

A4 = 210 × 297 мм = 8.2677 × 11.6929 дюйма

72 DPI:   8.2677 × 72  = 595     11.6929 × 72  = 842
96 DPI:   8.2677 × 96  = 794     11.6929 × 96  = 1123
150 DPI:  8.2677 × 150 = 1240    11.6929 × 150 = 1754
300 DPI:  8.2677 × 300 = 2480    11.6929 × 300 = 3508

Соотношение сторон при этом не меняется: 70:99

Для печати обычно берут 300 DPI: этого достаточно, чтобы глаз не различал отдельные точки на бумаге. Для экрана хватает 72 или 96, потому что там пиксель физически другой. В калькуляторе A4 переключаются между A4, A3, A5, B5, Letter и Legal, выбирается DPI от 72 до 600, а можно пойти и в обратную сторону: задать пиксели и узнать физический размер. Про перевод сантиметров и дюймов подробнее в статье конвертер единиц измерения.

Само соотношение сторон ничего не говорит о качестве печати. Один и тот же кадр 3:2 можно напечатать на A4 как 30×20 см или на A3 как 42×28 см: пропорции останутся теми же, а количество точек на дюйм будет разным, и на большем листе картинка выйдет заметно качественнее.

Кадрирование под соцсети и под макет

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

• Если важна вся композиция, лучше добавить поля: цвет фона подбирают по краям фотографии, чтобы он не выделялся.
• Если важен объект в центре, кадрируют по нему, оставляя нужное соотношение.
• Кадрирование с точностью до пикселя делают вручную, а готовые пресеты соотношений есть в инструменте обрезки: там задаются и пресет, и точные координаты.
• Изменить размер без искажения пропорций и сжать файл помогает изменение размера изображения: оно пересчитывает вторую сторону по соотношению и уменьшает вес файла.

Один важный момент: уменьшение почти всегда безопасно, а увеличение всегда ухудшает картинку. Растянуть 800×600 до 1920×1080 можно, но вместо настоящих деталей появятся размытые пятна. Если исходник меньше требуемого размера, честнее взять другой кадр, чем увеличивать этот.

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

Типичные ошибки

• Путают пиксели и проценты: «соотношение 50 %» не значит ничего, а «ширина 50 % от высоты» это 1:2.
• Путают размер картинки и размер файла: файл на 2 МБ может быть 4000×3000, а файл на 200 КБ быть 600×450. Вес зависит от сжатия, а не от пропорций.
• Считают, что 16:9 и 16:10 это одно и то же: при одинаковой ширине высота отличается примерно на 11 %, и при кадрировании это заметно.
• Режут картинку только с одной стороны, и пропорции меняются. Чтобы сохранить соотношение, резать надо с двух сторон.
• Путают ширину в процентах с соотношением сторон. В CSS ширина в процентах считается от родительского блока, и кадр меняется вместе с размером родителя.

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

Какое соотношение сторон выбрать для видео на YouTube?

16:9. Это стандартный полноэкранный формат, который занимает всю ширину плеера, и YouTube расширяет вертикальные ролики, добавляя по бокам размытую рамку. Короткие ролики в ленте показываются в вертикальном формате 9:16, и многие студии снимают именно так, но 16:9 остаётся классикой для длинных материалов.

16:9 или 16:10 для монитора?

Зависит от задач. 16:9 даёт больше высоты для видео и игр, а 16:10 даёт больше строк текста и таблиц при той же диагонали. Сейчас массово продаются 16:9, но ультраширокие модели 21:9 нужны тем, кто держит рядом несколько окон или монтирует длинные таймлайны.

Почему 1920×1080 это 16:9, а не 1,78:1?

Потому что 16:9 это точное отношение сторон, записанное целыми числами, а 1,78 это его десятичное приближение. 1920 делить на 1080 даёт 1,7777..., и округление до 1,78 вносит небольшую погрешность. В спецификациях пишут 16:9, потому что это несократимая дробь и потому что её можно проверить целочисленно.

Можно ли изменить соотношение сторон без потери качества?

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

Как посчитать, сколько места займёт картинка на странице?

Сначала узнайте ширину контейнера, в который вставляется картинка, потом умножьте её на числитель соотношения и разделите на знаменатель. Для колонки шириной 720 пикселей при 16:9 высота получится 720 × 9 ÷ 16 = 405 пикселей. В CSS это то же самое, что задать ширину 100 % и высоту auto: браузер посчитает её сам и сохранит пропорции.