CodeKitHubЩо це за інструмент?
Інструмент для обрізки вирізає прямокутну область із зображення й відкидає решту. Це найпростіша й найпотрібніша операція редагування фото: обрізати скриншот до потрібного вікна, вирізати себе з групового фото для аватарки, прибрати неохайний край фону або перетворити пейзажний кадр на квадрат для допису.
Ця обрізка працює на HTML5 Canvas API у вашому браузері. Коли ви обираєте файл, він декодується локально, ви коригуєте виділення, перетягуючи його краї та кути, а обрізаний результат створюється копіюванням лише цих пікселів на новий canvas. Оскільки сервер не задіяний, немає ані очікування завантаження, ані обмежень на розмір файлу, ані компромісу з приватністю — інструмент працює навіть офлайн, щойно сторінка завантажилася.
Навіщо його використовувати?
- Перетягування й коригування виділення: пересувайте рамку або тягніть за будь-який кут чи край, доки кадрування не стане ідеальним, з живим відображенням розміру в пікселях.
- Готові співвідношення сторін — 1:1, 4:3, 16:9 та 9:16 — фіксують форму рамки для аватарок, мініатюр і обкладинок вертикального відео, або перемикайтеся на вільний режим для довільної обрізки.
- Завантаження як PNG (без втрат, зі збереженням прозорості) або JPG (менший розмір файлу для фотографій) — обираєте на етапі експорту.
- 100% локальна обробка через Canvas API: ваше зображення ніколи не завантажується, не надсилається і ніде не зберігається, що важливо для фото на документи, паспортів та скриншотів з особистими даними.
- Безкоштовно, без водяних знаків, без реєстрації, працює на телефонах і планшетах із перетягуванням дотиком так само, як і на комп'ютері.
Як користуватися
- Натисніть область завантаження або перетягніть туди файл зображення — підходять JPG, PNG, WebP та більшість поширених форматів.
- Перетягуйте всередині рамки виділення, щоб пересунути її, або тягніть за кутові й крайові маркери, щоб змінити розмір.
- За бажанням оберіть готове співвідношення сторін (1:1, 4:3, 16:9, 9:16), щоб зафіксувати форму рамки, або залиште вільний режим.
- Оберіть PNG або JPG як формат виводу.
- Натисніть кнопку обрізки — обрізане зображення завантажиться миттєво.
Приклад
Введення
Фото 4000×3000, виділення зафіксоване на 1:1 навколо обличчя, обрана область 800×800Результат
PNG 800×800, що містить лише обрану квадратну областьРезультат зберігає оригінальні пікселі один в один — обрізка ніколи не масштабує й не перестискає обрану область, якщо тільки ви не експортуєте як JPG, який застосовує легке фотостиснення.
Поширені співвідношення обрізки та де вони застосовуються
Обирайте співвідношення, виходячи з платформи, для якої публікуєте, а не з вихідного зображення — мініатюра 16:9, обрізана з центру вертикального фото, зазвичай виглядає краще, ніж чорні смуги з боків. Якщо платформа вказує точний розмір у пікселях, спочатку узгодьте з ним співвідношення тут; правильна форма ще на етапі обрізки дозволяє уникнути автоматичної обрізки по центру, яку застосовують багато сайтів і яка регулярно обрізає голови та текст.
| Співвідношення | Форма | Типове застосування |
|---|---|---|
| 1:1 | Квадрат | Фото профілю, стрічка Instagram, іконки застосунків |
| 4:3 | Класичний альбомний формат | Презентації, старі камери, екрани iPad |
| 16:9 | Широкий екран | Мініатюри YouTube, обкладинки відео, монітори |
| 9:16 | Вертикальний | Сторіс, Reels, TikTok, шпалери для телефону |
| Вільний | Будь-який прямокутник | Обрізка скриншотів, видалення країв, довільні макети |
Місце обрізки серед інструментів для роботи із зображеннями
Обрізка змінює те, що показує зображення; зміна розміру змінює те, яке воно велике. Типовий процес створення аватарки використовує обидва: обрізати до 1:1 тут, а потім масштабувати до потрібних 400×400 за допомогою інструмента зміни розміру зображення. Такий порядок зберігає різкість об'єкта, адже масштабування відбувається лише один раз, на фінальному кадруванні.
Якщо файл усе ще завеликий після обрізки — типова ситуація з великими фото з телефону — пропустіть його через компресор зображень. А коли мета — приховати інформацію, а не прибрати її з кадру, розмиття або пікселізація чутливої області за допомогою інструмента цензурування зберігає решту зображення без змін.
→ Зміна розміру зображень · Компресор зображень · Цензура / розмиття фото
Часті запитання
Чи завантажується моє зображення на сервер?
Ні. Файл відкривається безпосередньо вашим браузером і обробляється за допомогою Canvas API на вашому власному пристрої. Нічого не передається, не зберігається й не логується — ви можете переконатися в цьому, завантаживши сторінку, відключившись від інтернету й усе одно обрізавши зображення. Це робить інструмент безпечним для документів, посвідчень особи та інших чутливих зображень.
Яке співвідношення сторін обрати?
1:1 (квадрат) підходить для більшості фото профілю та стрічки Instagram. 4:3 відповідає класичним фотографіям і презентаціям. 16:9 — стандарт для мініатюр YouTube, обкладинок відео та широкоформатних екранів. 9:16 призначене для вертикального контенту — сторіс, Reels, TikTok та шпалер для телефону. Якщо жодна платформа не диктує форму, вільний режим дозволяє обрізати до будь-якого прямокутника.
Чи знижується якість зображення від обрізки?
Сама обрізка не втрачає якості — вона копіює обрані пікселі без змін, тож обрізана область пікселя в піксель ідентична оригіналу. Єдине рішення щодо якості — формат експорту: PNG зберігає все точно, тоді як JPG застосовує фотостиснення. Інструмент ніколи не масштабує ваше зображення, тож різкість не втрачається через ресемплінг.
Чи можна обрізати до точних розмірів у пікселях?
Розмір виділення відображається наживо в пікселях під час перетягування, тож ви можете точно налаштувати маркери, доки не отримаєте потрібний розмір. Якщо потрібен точний розмір, наприклад 512×512, незалежно від кадрування джерела, обріжте тут до потрібної форми (у цьому випадку 1:1), а потім масштабуйте результат за допомогою інструмента зміни розміру зображення.
Чи PNG чи JPG варто вибрати для завантаження?
PNG не втрачає якості й зберігає прозорість, тож підходить для скриншотів, графіки, логотипів і всього, що містить текст. JPG стискає фотографічний контент до значно менших файлів із ледь помітною втратою якості, тож підходить для фото, якими ви плануєте ділитися чи завантажувати. Якщо сумніваєтеся: текст або прозорість → PNG, фотографія → JPG.