Заметки команды о мастерстве, форматах и небольших решениях, стоящих за хорошей круглой обрезкой.
Как Cropper.js v2 создаёт круговую маску
Cropper.js v2 реализован как веб-компонент. Элементы ``, `` и `` собирают редактор. Круговая обрезка не является трюком с CSS `border-radius`. Это операция canvas composite `destination-in`, которая применяется в момент экспорта. Пока пользователь двигает маркеры, на экране видно полное изображение с затемнённой областью вне круга, а размер выделения вычисляется по положению маркеров во внутреннем состоянии компонента. При нажатии «Сохранить» создаётся временный canvas выбранных размеров, изображение рисуется на нём, и составная маска удаляет всё за пределами круга. Для PNG, WebP и AVIF результат включает альфа-канал. Для JPEG прозрачные пиксели заполняются сплошным цветом перед кодированием, поскольку JPEG не поддерживает прозрачность. Cropper.js v2 распространяется по лицензии MIT, репозиторий github.com/fengyuanchen/cropperjs.
PNG, WebP, AVIF или JPEG для круговой обрезки
PNG работает без потерь и поддерживается везде. Круг 512×512, экспортированный из снимка 8 МП, весит примерно 180-350 КБ в зависимости от сложности фото. WebP визуально без потерь при качестве 85-90, на 25-40% меньше PNG и поддерживается всеми браузерами, выпущенными после 2023 года. AVIF использует AV1 intra-coding, обычно на 40-50% меньше WebP при сопоставимом визуальном качестве, но WASM-кодировщик @jsquash/avif работает заметно дольше, около 3 секунд на настольном компьютере и до 30 секунд на мобильном устройстве средней мощности для фото 8 МП. JPEG кодируется быстрее всех, около 400 мс на компьютере, но без альфа-канала. Большинству пользователей подойдёт PNG для надёжности или WebP для компактности.
Размеры аватарок на популярных платформах
Платформы рендерят круглые аватарки в разных размерах. LinkedIn: фото профиля минимум 400×400 пикселей, в ленте около 48 пикселей. Discord: иконка сервера до 512×512 пикселей, аватарка пользователя 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 год и возвращают ошибку декодирования. Инструмент проверяет магические байты при загрузке, и если HEIC-файл открыт в браузере, отличном от Safari, появляется понятная подсказка конвертировать снимок в JPG. Способ обхода для пользователей не из Safari: открыть фото на iPhone в приложении «Фото», поделиться им как JPEG (доступно в меню «Поделиться»), либо воспользоваться /png-to-jpg/, если файл HEIC уже на компьютере. Важно учесть, что файл .heic, переименованный в .jpg, всё равно будет отклонён, поскольку формат определяется по магическим байтам, а не по расширению.
Почему область за пределами круга прозрачная
При экспорте PNG или WebP пиксели за пределами границы круга имеют значение альфа, равное нулю, что означает полную прозрачность. На платформах, где аватарки отображаются в круглой рамке, прозрачный фон становится невидимым, и собственный фон платформы просвечивает чисто, без белой каймы. При просмотре файла в полный размер (например, в окне предпросмотра вложения или в фотоальбоме) прозрачная область выглядит как шахматная клетка. Если вставить круг в Figma или Canva, его можно слоить поверх любого цвета без артефактов. Вариант JPEG предусмотрен для случаев, когда прозрачность создаёт проблемы, поскольку некоторые почтовые клиенты, загрузчики CMS и устаревшие платформы убирают альфа-канал и заменяют его чёрным. JPEG с выбранным цветом заливки решает эту проблему.
Проверка обработки в браузере через DevTools
Любопытный пользователь может убедиться, что изображение не покидает устройство, через вкладку Network в DevTools. Откройте DevTools (F12 или «Просмотр кода»), перейдите на вкладку Network, нажмите «Очистить», затем загрузите снимок в инструмент обрезки по кругу и подвигайте маркеры. Во время загрузки и перемещения круга в списке появятся только запросы ресурсов страницы (JS, CSS, шрифты), загруженных до открытия файла. Ни одного нового POST- или PUT-запроса с данными изображения не будет. После нажатия «Сохранить» на долю секунды мелькнёт одна запись с URL вида `blob:`, и это браузер обращается к локальному blob через `URL.createObjectURL`, а не отправляет файл на сервер. Проверка работает в Chrome, Firefox, Safari и Edge.
