Обрезка (кадрирование) изображения — базовая операция редактирования: выделить нужную область и удалить лишнее. Правильное соотношение сторон важно для соцсетей, баннеров и аватаров — каждая платформа требует своё.
Для обрезки используйте Image Crop на reChecker.
Соотношения сторон: основы
Соотношение сторон (aspect ratio) — отношение ширины к высоте изображения. Запись 16:9 означает, что на каждые 16 единиц ширины приходится 9 единиц высоты.
Распространённые соотношения
1:1 (квадрат)
- Instagram: фото, посты, аватары
- Telegram: аватары и превью
- Linkedin: профильные фото
4:3 (почти квадрат)
- Стандарт старых телевизоров и мониторов
- Фотографии с камер (часто)
- Презентации в старом формате
3:2
- Зеркальные фотоаппараты (DSLR) — стандартный кадр 35 мм
- Открытки, фотопечать 10×15 см
16:9 (широкоформатный)
- YouTube: обложки (thumbnails) и видео
- Презентации (PowerPoint, Google Slides)
- Современные мониторы и ТВ
- Баннеры и обложки соцсетей
9:16 (вертикальный)
- Instagram Reels, TikTok, YouTube Shorts
- Stories в Instagram, VK, Telegram
- Вертикальные мобильные форматы
2:3 и 3:4
- Pinterest — длинные вертикальные пины
- Портретные фотографии
Размеры для разных платформ
| Тип контента | Соотношение | Размер (px) |
|---|---|---|
| Профильное фото | 1:1 | 180×180 |
| Пост квадратный | 1:1 | 1080×1080 |
| Пост горизонтальный | 16:9 | 1080×608 |
| Пост вертикальный | 4:5 | 1080×1350 |
| Stories | 9:16 | 1080×1920 |
| Reels | 9:16 | 1080×1920 |
| Обложка | 1:1 | 420×420 |
YouTube
| Тип | Соотношение | Размер (px) |
|---|---|---|
| Превью (Thumbnail) | 16:9 | 1280×720 |
| Обложка канала | 16:9 | 2560×1440 |
| Аватар | 1:1 | 800×800 |
| Shorts | 9:16 | 1080×1920 |
VK
| Тип | Соотношение | Размер (px) |
|---|---|---|
| Аватар | 1:1 | 200×200 |
| Обложка группы | 16:9 | 1590×400 |
| Пост | 16:9 / свободно | до 14 400 px |
| Stories | 9:16 | 1080×1920 |
Telegram
| Тип | Соотношение | Размер (px) |
|---|---|---|
| Аватар | 1:1 | 640×640 |
| Превью публикации | 16:9 или свободно | рекомендуется 1280×720 |
| Sticker | 1:1 | 512×512 |
| Тип | Соотношение | Размер (px) |
|---|---|---|
| Профильное фото | 1:1 | 400×400 |
| Обложка профиля | 4:1 | 1584×396 |
| Пост с изображением | 1.91:1 | 1200×628 |
| Логотип компании | 1:1 | 300×300 |
Open Graph (превью ссылки)
Когда вы делитесь ссылкой в соцсетях, превью берётся из OG-тегов:
- Рекомендуемый размер: 1200×630 px (соотношение ~1.91:1)
- Минимум: 600×315 px
Проверить как выглядит превью: Open Graph Preview.
Правило третей в кадрировании
Правило третей — базовый принцип композиции: разделите кадр на 9 равных частей двумя горизонтальными и двумя вертикальными линиями. Помещайте главный объект на пересечение этих линий.
+-------+-------+-------+
| | | |
+-------+---X---+-------+ ← объект на пересечении
| | | |
+-------+-------+---X---+
| | | |
+-------+-------+-------+
При кадрировании портрета: глаза должны быть на верхней горизонтальной линии правила третей, а не в центре кадра.
Как правильно кадрировать
Портреты
- Оставляйте пространство над головой (если глаза смотрят вверх)
- Не обрезайте по суставам (кисти, колени, щиколотки)
- Для аватара в 1:1 центрируйте лицо, оставив немного воздуха
Пейзажи
- Горизонт на нижней трети (небо доминирует) или верхней трети (земля доминирует)
- Никогда не по центру — скучно
- Выбирайте 16:9 или 3:2 для широких панорам
Продуктовые фото
- Для каталога e-commerce: белый фон, 1:1, объект занимает 80% кадра
- Для соцсетей: контекст и текстуры добавляют атмосферу, 4:5 или 1:1
Текст и баннеры
- Оставляйте «зону безопасности» по краям — 10% от каждой стороны
- Сторонние платформы могут обрезать края при отображении
Качество при обрезке
Обрезка сама по себе не ухудшает качество — вы просто выбираете часть изображения. Качество может ухудшиться только при:
- Сохранении в JPG с низким качеством — артефакты сжатия
- Масштабировании вверх — если вырезанная область меньше целевого размера, пиксели растягиваются
Совет: если нужна миниатюра 200×200 px для аватара, лучше вырезать из изображения 600×600+ пикселей, а не масштабировать 200×200 вырезку.
Форматы при сохранении
PNG
- Без потерь качества
- Поддерживает прозрачность
- Больший файл, чем JPG
- Используйте для логотипов, скриншотов, изображений с прозрачностью
JPG
- Небольшой файл при хорошем качестве (85–90%)
- Не поддерживает прозрачность
- Используйте для фотографий, публикаций в соцсетях
Пакетная обрезка (программная)
Для сайтов с большим количеством изображений автоматизируйте обрезку:
Sharp (Node.js)
const sharp = require('sharp');
// Обрезка квадрата из центра
await sharp('photo.jpg')
.resize(800, 800, {
fit: 'cover',
position: 'center'
})
.toFile('avatar.jpg');
// Обрезка определённой области
await sharp('photo.jpg')
.extract({ left: 100, top: 50, width: 400, height: 400 })
.toFile('cropped.jpg');
Python (Pillow)
from PIL import Image
img = Image.open('photo.jpg')
# Обрезка по координатам (left, top, right, bottom)
cropped = img.crop((100, 50, 500, 450))
cropped.save('cropped.jpg')
# Квадратная обрезка из центра
width, height = img.size
size = min(width, height)
left = (width - size) // 2
top = (height - size) // 2
square = img.crop((left, top, left + size, top + size))
square.save('avatar.jpg')
CSS: object-fit
Для кадрирования изображений в браузере без редактирования файла:
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover; /* обрезает под контейнер */
object-position: top; /* выравнивание: top, center, bottom */
}
// Next.js Image с fill и object-fit
<div style={{ position: 'relative', width: 200, height: 200 }}>
<Image src="/photo.jpg" alt="..." fill style={{ objectFit: 'cover' }} />
</div>
Онлайн-инструменты для обрезки
Image Crop на reChecker — визуальная обрезка с готовыми соотношениями сторон, отображением размера в пикселях и экспортом в PNG или JPG. Всё работает в браузере — изображение не загружается на сервер.
Другие задачи с изображениями:
- Конвертер изображений — PNG ↔ JPG ↔ WebP
- Image Resize — изменение размера
- Image Compressor — сжатие без потери качества
Заключение
Правильное кадрирование — это выбор нужной части изображения и подходящего соотношения сторон под платформу. Для Instagram Stories — 9:16, для YouTube превью — 16:9, для аватаров — 1:1. Используйте Image Crop для быстрого кадрирования прямо в браузере.