Кадрирование изображений

Что такое кадрирование изображений?#

Кадрирование кажется простейшей операцией — оставить прямоугольник, остальное выбросить. Но стоит сделать это правильно, и наваливается ворос: сохранит ли кадр фиксированное соотношение сторон под слот миниатюры или баннера, можно ли сначала выправить заваленный горизонт, будет ли экспорт достаточно мелким для загрузки, и покидает ли что-либо из этого ваше устройство? Эта страница — полноценная студия кадрирования, отвечающая на все четыре вопроса прямо в браузере.

Вы перетаскиваете изображение, рисуете над ним рамку выделения (или хватаете одну из восьми ручек для изменения размера), опционально поворачиваете или отражаете весь кадр, фиксируете выделение на соотношении вроде 1:1 или 16:9 и экспортируете кадрированную область как PNG, JPEG или WebP на выбранном качестве. Всё работает на Canvas API внутри этой вкладки — исходный файл читается локально и результат перекодируется локально, поэтому ничего не загружается.

Как пользоваться#

1. Перетащите картинку в пунктирную зону перетаскивания (или щёлкните её, чтобы выбрать файл). Появится редактор вместо зоны перетаскивания.
2. Используйте панель инструментов над превью, чтобы преобразовать весь кадр перед кадрированием:
   • Повернуть на 90° поворачивает изображение по часовой стрелке на 90° при каждом клике. Выделение отслеживается в повёрнутом координатном пространстве, поэтому всегда совпадает с тем, что вы видите.
   • Отразить по горизонтали / Отразить по вертикали зеркалит кадр по горизонтали или вертикали.
3. Выберите Соотношение сторон из выпадающего списка: Свободно (любой прямоугольник), 1:1 (аватар / профиль), 4:3 или 16:9 (обои / обложка видео). При зафиксированном соотношении рамка сохраняет форму при перетаскивании — угловые ручки разрастаются, чтобы дотянуться до курсора, а боковые автоматически выводят перпендикулярную сторону.
4. Перетаскивайте тело рамки для перемещения; тяните любую из восьми ручек для изменения размера. Работают и мышь, и касание.
5. Задайте параметры экспорта под превью:
   • Формат вывода — JPEG (самый мелкий, с потерями), WebP (мелкий, современный) или PNG (без потерь; ползунок качества отключён, потому что у PNG нет регулятора качества).
   • Макс. сторона вывода — число в пикселях; длинная сторона кадра ограничивается этим значением с сохранением пропорций. Оставьте 0, чтобы сохранить полное разрешение кадра.
   • Качество — 5–100, используется только для JPEG и WebP. 92 — разумное значение по умолчанию; снизьте до 80 для миниатюр.
6. Следите за счётчиком рядом с Скачать: он показывает размер выделения и итоговый размер вывода, например 1500×1500 → 800×800, когда выделение 1:1 ограничено до 800.
7. Нажмите Скачать, чтобы сохранить. Используйте Сбросить выделение, чтобы вернуть выделение в центрированное значение по умолчанию.

Ключевые возможности#

• Изменение размера с фиксацией соотношения, которое естественно ощущается. Угловые ручки разрастаются к курсору по обеим осям; боковые ручки регулируют только перетаскиваемую ось и пересчитывают другую из соотношения. Никакого случайного растяжения.
• Учитывающее трансформации выделение. Поворот и отражение применяются один раз к закадровому холсту, а рамка кадрирования живёт в этом преобразованном пространстве — поэтому то, что вы выделяете, в точности то, что вы экспортируете, без рассогласования превью и вывода.
• Три формата с честным качеством. PNG помечается как формат без потерь и отключает ползунок вместо того, чтобы молча его игнорировать. JPEG и WebP дают настоящее значение качества, идущее прямо в кодировщик.
• Необязательное ограничение вывода. Задайте максимальную сторону — и кадр масштабируется вниз с сохранением пропорций, удобно для аватаров, Open Graph изображений или лимитов загрузки, без необходимости считать вручную.
• Живой счётчик «до/после». Размеры выделения и итоговые размеры вывода стоят рядом, поэтому ограничение или смена соотношения видны до фиксации.
• 100 % локально. Изображение декодируется браузером и перекодируется браузером. Точки загрузки нет.

Разбор примера#

У вас ландшафтный кадр 4000×3000, нужен баннер-миниатюра 16:9 с длинной стороной 1280 px. Загрузите фото, задайте Соотношение сторон — 16:9 и перетащите выделение над линией горизонта. Поскольку соотношение зафиксировано, рамка прилипает к прямоугольнику 16:9; предположим, выделение установилось на 4000×2250 в пикселях источника. Теперь впишите 1280 в Макс. сторона вывода. Счётчик обновится до:

crop size  4000 × 2250  →  1280 × 720

Выберите Формат вывода: JPEG, оставьте Качество на 92 и нажмите Скачать. Получите JPEG 1280×720 размером примерно 180–280 KiB в зависимости от сцены — кроху от исходного мульти-мегабайтного файла, с тем самым соотношением сторон, какое нужно hero-баннеру, и без чёрных полос. Тот же поток с 1:1 и Макс. сторона вывода 512 даёт готовое к загрузке изображение профиля.

FAQ#

Выделение не делается меньше определённого размера — почему?#

Минимальная сторона — 8 пикселей; это ограничение нужно, чтобы ручки оставались удобными для захвата, а экспорт никогда не превращался в дегенеративную щепку. Если нужно крайне тесное кадрирование, не приближайте и не кадрируйте крошечную область — выделите участок побольше, а затем уменьшите через Макс. сторона вывода.

Я зафиксировал 16:9, но рамка изменила размер у края.#

Это ограничитель границ, удерживающий рамку целиком внутри изображения. Когда рамка с зафиксированным соотношением пытается выйти за край, более короткая сторона уменьшается, чтобы соотношение выжило в доступном пространстве. Сначала сдвиньте рамку к центру, затем меняйте размер.

Экспортировать в JPEG или WebP?#

WebP при том же качестве обычно на 25–35 % меньше JPEG и теперь поддерживается везде, где это важно. Используйте JPEG только тогда, когда какой-то Legacy-конвейер ниже по потоку отвергает WebP. Выбирайте PNG, когда кадр — логотип, скриншот интерфейса или что-либо с резкими краями и однотонными заливками, где артефакты сжатия с потерями были бы заметны.

Уменьшает ли кадрирование размер файла?#

Может, двумя путями: меньше площадь — меньше пикселей для кодирования, а Макс. сторона вывода может дополнительно уменьшить масштаб. Но кадр 200×200 шумного фото на качестве 100 всё равно может быть больше полного изображения на качестве 80 — настоящий рычаг для размера с потерями это ползунок Качество.