Обрезка изображений онлайн: соотношения сторон, форматы и инструменты

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

Для обрезки используйте 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 — длинные вертикальные пины
• Портретные фотографии

Размеры для разных платформ

Instagram

YouTube

VK

Telegram

LinkedIn

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% от каждой стороны
• Сторонние платформы могут обрезать края при отображении

Качество при обрезке

Обрезка сама по себе не ухудшает качество — вы просто выбираете часть изображения. Качество может ухудшиться только при:

1. Сохранении в JPG с низким качеством — артефакты сжатия
2. Масштабировании вверх — если вырезанная область меньше целевого размера, пиксели растягиваются

Совет: если нужна миниатюра 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 для быстрого кадрирования прямо в браузере.