Нотатки від команди про майстерність, формати та невеликі рішення, що стоять за гарною круглою обрізкою.
Як Cropper.js v2 малює кругову маску
Cropper.js v2 постачається як Web Component із елементами cropper-canvas, cropper-image та cropper-handle. Кругове обрізання не є трюком із CSS border-radius. Це операція canvas composite із режимом destination-in, яка застосовується під час збереження. На екрані користувач бачить повне зображення з темним накладенням, а кругова область виділення обчислюється в реальному часі із позицій маркерів у внутрішньому стані компонента. При натисканні «Зберегти» створюється тимчасовий canvas з обраними розмірами, на нього малюється зображення, а складена маска видаляє все за межами кола. Для PNG, WebP і AVIF результат включає альфа-канал. Для JPEG прозорі пікселі заповнюються суцільним кольором перед кодуванням, оскільки специфікація JPEG не має альфа-каналу. Бібліотека ліцензована за MIT і розміщена на GitHub як fengyuanchen/cropperjs.
PNG проти WebP проти AVIF проти JPEG для кругових обрізань
PNG зберігається без втрат і підтримується повсюдно, але дає більші файли. Типовий круговий PNG 512×512, побудований із фото 8 МП, важить від 180 до 350 КБ залежно від складності зображення. WebP при q85 до q90 виглядає візуально без втрат і важить на 25 до 40 відсотків менше за PNG, з повною підтримкою у всіх сучасних браузерах. AVIF використовує внутрішнє кодування AV1 і зазвичай на 40 до 50 відсотків менший за WebP при еквівалентній якості, але WASM-кодувальник @jsquash займає значно більше часу. На настільному комп'ютері це близько 3 секунд, а на мобільному середнього класу до 30 секунд для 8-МП файлу. JPEG кодується найшвидше (близько 400 мс на настільному), але не підтримує альфа-канал. Використовуйте JPEG лише тоді, коли цільова платформа відхиляє прозорі файли. Для більшості випадків PNG забезпечує надійність, а WebP дає компактність.
Посібник із розмірів для платформ і що насправді означає кругла аватарка
LinkedIn відображає фото профілю від 400×400 пікселів і показує його як коло на сторінці профілю, а також меншим розміром близько 48 пікселів у стрічці. Discord приймає іконку сервера до 512×512 і відображає її круглою. Аватарка користувача Discord показується 128×128 у списку учасників сервера і 32×32 у потоці чату. Instagram малює фото профілю круглим близько 110 пікселів на мобільній сторінці профілю і 32 пікселі в мініатюрах стрічки. Slack використовує аватарки робочого простору до 512×512 і показує їх близько 36 пікселів у списку каналів. Інструмент зберігає результат у роздільній здатності вашого вихідного фото. Якщо потрібен точний розмір виведення, спочатку змініть розмір через інструмент resize, а потім виконайте кругову обрізку. Це забезпечує точний результат у пікселях без артефактів масштабування.
HEIC та обмеження Safari
HEIC є контейнерним форматом Apple із компресією HEVC. Safari 17 та новіші версії обробляють HEIC нативно через createImageBitmap, тому кругове обрізання фото iPhone працює в Safari без конвертації. Chrome, Firefox і Edge не реалізують createImageBitmap для HEIC станом на 2026 рік. Вони повертають помилку декодування. Інструмент перевіряє сигнальні байти під час завантаження. Якщо у браузері, відмінному від Safari, виявлено файл HEIC, з'являється зрозуміле повідомлення з пропозицією спочатку конвертувати в JPG. Спосіб вирішення для не-Safari: відкрийте фото на iPhone у програмі «Фото», поділіться у форматі JPG через меню «Поділитися», або скористайтеся інструментом PNG to JPG, якщо файл HEIC уже знаходиться на комп'ютері. Файл HEIC, перейменований на .jpg, усе одно буде відхилено, оскільки перевірка сигнальних байтів виявляє перейменування.
Чому область за межами кола прозора і чому це важливо
Коли ви зберігаєте PNG або WebP кругового обрізання, пікселі за межами кола мають альфа-значення 0, тобто повністю прозорі. На платформах, де аватарки відображаються у круглій рамці, прозорий фон стає невидимим, а власний колір фону платформи проглядається чисто, без білого ореолу. На платформах, де файл відображається в повному розмірі, наприклад у попередньому перегляді вкладення або фотоальбомі, прозора область відображається як шахова дошка. Якщо вставити коло в інструмент дизайну на кшталт Figma або Canva, його можна розмістити поверх будь-якого кольору без білого контуру. Варіант JPEG існує для випадків, коли прозорість створює проблеми. Деякі поштові клієнти, деякі завантажувачі зображень CMS та деякі старіші платформи замінюють прозорість чорним кольором. У цих випадках JPEG із вибраним кольором заливки дає чистіший результат.
Перевірка обробки в браузері через вкладку Network
Допитливий користувач може самостійно перевірити, що зображення не покидає пристрій. Відкрийте DevTools браузера через F12 або клацання правою кнопкою миші з вибором «Перевірити елемент». Перейдіть на вкладку «Мережа» і натисніть «Очистити», щоб видалити попередні записи. Потім завантажте зображення в інструмент кругового обрізання і перетягуйте маркери. Єдині запити, що з'являтимуться, це запити на ресурси сторінки (JS, CSS, шрифти), завантажені до того, як ви відкрили вкладку. Жодного нового POST або PUT-запиту з даними зображення не з'являється. Після натискання «Зберегти» у вкладці на долю секунди з'явиться запит до URL blob. Браузер розв'язує локальний blob, а не надсилає дані на сервер. Цю перевірку можна виконати в Chrome, Firefox, Safari та Edge однаковим чином.
