CodeKitHubЧто это за инструмент?
Инструмент для обрезки изображений вырезает из фотографии прямоугольную область и удаляет остальную часть. Это самая простая и наиболее востребованная операция по редактированию фотографий: обрезка скриншота до нужного окна, вырезание себя из группового снимка для создания аватара, удаление неаккуратных краев фона или переформатирование пейзажного снимка в квадрат для публикации.
Этот инструмент для кадрирования работает на основе API HTML5 Canvas прямо в вашем браузере. Когда вы выбираете файл, он декодируется локально; вы настраиваете область выделения, перетаскивая её края и углы, а обрезанный фрагмент создается путём копирования только этих пикселей на новый холст. Поскольку сервер не задействован, вам не придётся ждать загрузки, не взимается плата за размер файла и не нарушается конфиденциальность — инструмент работает даже в автономном режиме после загрузки страницы.
Зачем его использовать?
- Выделение с помощью перетаскивания и настройки: перемещайте прямоугольник или тяните за любой уголок или ручку по краю, пока рамки не будут расположены точно так, как нужно, с отображением размера в пикселях в режиме реального времени.
- Предустановленные соотношения сторон — 1:1, 4:3, 16:9 и 9:16 — фиксируют форму рамки для аватаров, миниатюр и вертикальных обложек видео; также можно переключиться в свободный режим для произвольного кадрирования.
- Скачайте в формате PNG (без потерь, с сохранением прозрачности) или JPG (меньший размер файлов для фотографий) — выберите нужный вариант при экспорте.
- 100% локальная обработка с помощью API Canvas: ваше изображение никуда не загружается, не отправляется и не хранится, что особенно важно для фотографий на документы, официальных документов и скриншотов, содержащих персональные данные.
- Бесплатно, без водяных знаков, без регистрации, работает как на телефонах и планшетах с сенсорным управлением, так и на настольных компьютерах.
Как использовать
- Щелкните по области загрузки или перетащите туда файл изображения — поддерживаются форматы JPG, PNG, WebP и большинство распространенных форматов.
- Перетащите курсор внутри рамки выделения, чтобы переместить её, или перетащите угловые и боковые ручки, чтобы изменить её размер.
- При желании выберите один из предустановленных вариантов соотношения сторон (1:1, 4:3, 16:9, 9:16), чтобы зафиксировать форму прямоугольника, или оставьте его свободным.
- Выберите PNG или JPG в качестве формата вывода.
- Нажмите кнопку «Обрезать и скачать», и обрезанное изображение сразу же загрузится.
Пример
Ввод
A 4000×3000 photo, selection locked to 1:1 over the face, 800×800 area chosenРезультат
An 800×800 PNG containing only the selected squareВ результате вывода исходные пиксели сохраняются в соотношении «один к одному» — при кадрировании выбранная область никогда не масштабируется и не сжимается заново, за исключением случаев экспорта в формат JPG, при котором применяется незначительное сжатие изображения.
Распространённые соотношения сторон при обрезке и где они используются
Выбирайте соотношение сторон в соответствии с требованиями платформы, на которой вы публикуете материал, а не исходя из исходного изображения — миниатюра в формате 16:9, обрезанная по центру вертикальной фотографии, обычно выглядит лучше, чем изображение с черными полосами по краям. Если на платформе указан точный размер в пикселях, сначала приведите соотношение сторон в соответствие с ним; правильный выбор формы на этапе кадрирования позволяет избежать автоматического центрированного кадрирования, которое применяют многие сайты и которое часто обрезает головы и текст.
| Причина | Форма | Типичные области применения |
|---|---|---|
| 1:1 | Квадрат | Аватарки, лента Instagram, значки приложений |
| 4:3 | Классический пейзаж | Презентации, старые фотоаппараты, экраны iPad |
| 16:9 | Широкоформатный | Миниатюры на YouTube, обложки видео, мониторы |
| 9:16 | Вертикальный | Истории, Reels, TikTok, обои для телефона |
| Свободный | Любой прямоугольник | Обрезка скриншотов, удаление краев, настраиваемые макеты |
Какое место занимает обрезка среди инструментов для работы с изображениями
Кадрирование изменяет то, что показано на изображении; изменение размера — его габариты. В типичном процессе создания аватара используются оба метода: сначала кадрирование до соотношения 1:1, а затем масштабирование до требуемого размера 400×400 с помощью Image Resizer. Выполнение этих действий в указанном порядке позволяет сохранить четкость объекта, поскольку масштабирование происходит только один раз — при окончательном кадрировании.
Если после кадрирования файл по-прежнему слишком объёмный — что часто бывает с фотографиями, сделанными на телефон в большом размере, — обработайте его с помощью инструмента «Сжатие изображения». А если цель состоит не в удалении информации из кадра, а в её скрытии, размытие или пикселизация конфиденциальной области с помощью инструмента цензуры позволит сохранить остальную часть изображения.
→ Программа для изменения размера изображений · Программа для сжатия изображений · Инструмент цензурирования фото
Часто задаваемые вопросы
Мое изображение загружено на сервер?
Нет. Файл открывается непосредственно в вашем браузере и обрабатывается с помощью API Canvas на вашем собственном устройстве. Никакие данные не передаются, не сохраняются и не регистрируются — вы можете убедиться в этом, загрузив страницу, отключив интернет и всё равно выполнив кадрирование. Благодаря этому инструмент безопасен для работы с удостоверениями личности, договорами и другими конфиденциальными изображениями.
Какое соотношение сторон лучше выбрать?
Соотношение сторон 1:1 (квадрат) подходит для большинства аватаров и постов в ленте Instagram. Соотношение 4:3 соответствует классическим форматам фотографий и презентаций. 16:9 — это стандарт для миниатюр YouTube, обложек видео и широкоформатных дисплеев. 9:16 предназначено для вертикального контента — Stories, Reels, TikTok и обоев для смартфонов. Если ни одна из платформ не предписывает конкретное соотношение сторон, режим «Свободный» позволяет обрезать изображение до любого прямоугольника.
Что лучше скачать: PNG или JPG?
Формат PNG не приводит к потере качества и сохраняет прозрачность, поэтому он подходит для скриншотов, графики, логотипов и любых изображений, содержащих текст. Формат JPG сжимает фотографический контент до гораздо меньшего размера файла с едва заметной потерей качества, поэтому он подходит для фотографий, которые вы планируете поделиться или загрузить. Если сомневаетесь: текст или прозрачность → PNG, фотография → JPG.
Ухудшает ли кадрирование качество изображения?
Само по себе кадрирование не приводит к потере качества — выбранные пиксели копируются без изменений, поэтому кадрированная область пиксельно идентична исходному изображению. Единственный фактор, влияющий на качество, — это формат экспорта: PNG сохраняет все в точности, а JPG применяет фотографическое сжатие. Инструмент никогда не масштабирует изображение, поэтому при передискретизации не теряется резкость.
Можно ли обрезать изображение до точных размеров в пикселях?
Размер выделенной области отображается в пикселях в режиме реального времени во время перетаскивания, поэтому вы можете точно настроить положения ручек, пока на экране не появится нужный вам размер. Если вам нужен точный целевой размер, например 512×512, независимо от кадрирования исходного изображения, обрежьте его здесь до нужной формы (в данном случае 1:1), а затем измените масштаб полученного изображения с помощью инструмента «Image Resizer».