Загрузка...
Загрузка...
Как обрезать изображение онлайн, какое соотношение сторон выбрать для соцсетей, YouTube, Instagram. Обрезка без потери качества.
Поделитесь с коллегами или изучите другие материалы блога
Обрезка (кадрирование) изображения — базовая операция редактирования: выделить нужную область и удалить лишнее. Правильное соотношение сторон важно для соцсетей, баннеров и аватаров — каждая платформа требует своё.
Для обрезки используйте Image Crop на reChecker.
Соотношение сторон (aspect ratio) — отношение ширины к высоте изображения. Запись 16:9 означает, что на каждые 16 единиц ширины приходится 9 единиц высоты.
1:1 (квадрат)
4:3 (почти квадрат)
3:2
16:9 (широкоформатный)
9:16 (вертикальный)
2:3 и 3:4
| Тип контента | Соотношение | Размер (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 |
| Тип | Соотношение | Размер (px) |
|---|---|---|
| Превью (Thumbnail) | 16:9 | 1280×720 |
| Обложка канала | 16:9 | 2560×1440 |
| Аватар | 1:1 | 800×800 |
| Shorts | 9:16 | 1080×1920 |
| Тип | Соотношение | Размер (px) |
|---|---|---|
| Аватар | 1:1 | 200×200 |
| Обложка группы | 16:9 | 1590×400 |
| Пост | 16:9 / свободно | до 14 400 px |
| Stories | 9:16 | 1080×1920 |
| Тип | Соотношение | Размер (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 |
Когда вы делитесь ссылкой в соцсетях, превью берётся из OG-тегов:
Проверить как выглядит превью: Open Graph Preview.
Правило третей — базовый принцип композиции: разделите кадр на 9 равных частей двумя горизонтальными и двумя вертикальными линиями. Помещайте главный объект на пересечение этих линий.
+-------+-------+-------+
| | | |
+-------+---X---+-------+ ← объект на пересечении
| | | |
+-------+-------+---X---+
| | | |
+-------+-------+-------+
При кадрировании портрета: глаза должны быть на верхней горизонтальной линии правила третей, а не в центре кадра.
Обрезка сама по себе не ухудшает качество — вы просто выбираете часть изображения. Качество может ухудшиться только при:
Совет: если нужна миниатюра 200×200 px для аватара, лучше вырезать из изображения 600×600+ пикселей, а не масштабировать 200×200 вырезку.
Для сайтов с большим количеством изображений автоматизируйте обрезку:
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');
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')
Для кадрирования изображений в браузере без редактирования файла:
.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. Всё работает в браузере — изображение не загружается на сервер.
Другие задачи с изображениями:
Правильное кадрирование — это выбор нужной части изображения и подходящего соотношения сторон под платформу. Для Instagram Stories — 9:16, для YouTube превью — 16:9, для аватаров — 1:1. Используйте Image Crop для быстрого кадрирования прямо в браузере.