Зачем обрезать изображения
Кадрирование решает две задачи сразу: убирает лишнее из композиции и приводит картинку к нужным пропорциям. Каждая площадка требует своего формата, и снимок, отлично выглядящий в галерее, в ленте соцсети обрежется по краям непредсказуемым образом.
- Аватары и обложки — квадрат для профиля, широкий баннер для шапки
- Публикации — вертикальные сторис, квадратные посты, горизонтальные превью
- Документы — фото на паспорт с нужными пропорциями
- Сайт — карточки товаров одного размера выглядят аккуратнее разнобоя
- Вес файла — уменьшение размера в пикселях снижает вес в разы
Популярные форматы
| Где | Пропорции | Размер |
|---|---|---|
| Аватар профиля | 1:1 | 400×400 |
| Пост в ленте | 1:1 или 4:5 | 1080×1080 |
| Сторис и вертикальное видео | 9:16 | 1080×1920 |
| Обложка Open Graph | 1.91:1 | 1200×630 |
| Превью на YouTube | 16:9 | 1280×720 |
| Фото на документы | 3:4 | 35×45 мм |
Про качество при изменении размера
Уменьшение проходит без потерь для глаза: лишние пиксели просто отбрасываются. А вот увеличение изображения качества не добавляет — браузер дорисовывает недостающие пиксели интерполяцией, и картинка становится мыльной.
Правило простое: всегда исходите из максимального размера, в котором изображение будет показано. Уменьшить можно, восстановить детали после уменьшения — нельзя.
Выбор формата
- JPG — фотографии. Хорошо сжимает плавные переходы, не поддерживает прозрачность
- PNG — скриншоты, графика с текстом, изображения с прозрачным фоном. Сжатие без потерь, файлы крупнее
- WebP — универсальный выбор для сайта: меньше JPG на четверть, поддерживает прозрачность
Безопасность
Обработка идёт в браузере через canvas. Изображение не загружается на сервер, не сохраняется и никуда не передаётся — можно кадрировать личные фотографии и документы без опасений.
Частые вопросы
Загружаются ли фото на сервер?
Нет. Обработка выполняется в браузере, изображение не покидает ваше устройство. Отключите интернет после загрузки страницы — обрезка продолжит работать.
Теряется ли качество при обрезке?
Само кадрирование качества не меняет — вырезается часть исходных пикселей. Потери возможны при изменении размера или при сохранении в JPG с сильным сжатием.
Можно ли увеличить маленькое фото?
Технически да, но резкости это не добавит. Браузер растянет существующие пиксели, изображение станет размытым. Для реального увеличения нужны нейросетевые апскейлеры.
Как обрезать точно по размеру?
Выберите нужные пропорции кнопкой, затем задайте точные ширину и высоту в полях. Выделение автоматически подстроится под заданное соотношение.
Сохраняется ли прозрачность?
В PNG и WebP — да. При сохранении в JPG прозрачные области заливаются белым, так как формат прозрачность не поддерживает.
Какой максимальный размер файла?
20 МБ. Ограничение связано с памятью браузера при работе с canvas.