Catatan dari tim tentang keahlian, format, dan keputusan kecil di balik pemotongan bulat yang baik.
Cara Cropper.js v2 menggambar masker lingkaran
Cropper.js v2 hadir sebagai Web Component. Elemen cropper-canvas, cropper-image, dan cropper-handle menyusun panggung crop. Crop lingkaran bukan trik CSS border-radius. Ini adalah operasi komposit canvas (destination-in) yang diterapkan saat ekspor. Pengguna melihat seluruh gambar dengan overlay gelap, dan area seleksi lingkaran dihitung secara live dari posisi handle yang tersimpan di state internal komponen. Saat Simpan diklik, canvas sementara dibuat sesuai dimensi yang dipilih, gambar digambar di atasnya, dan masker komposit menghapus semua yang berada di luar lingkaran. Untuk PNG, WebP, dan AVIF, hasilnya menyertakan saluran alpha. Untuk JPEG, piksel transparan diisi dengan warna solid sebelum encoding karena JPEG tidak mendukung saluran alpha. Itulah sebabnya JPEG tidak menghasilkan lingkaran transparan, berbeda dengan tiga format lainnya. Cropper.js v2 dirilis di bawah lisensi MIT (fengyuanchen/cropperjs).
PNG, WebP, AVIF, atau JPEG untuk crop lingkaran
PNG bersifat lossless, didukung secara universal, dan file lebih besar. Ekspor lingkaran 512 kali 512 dari foto 8 megapiksel rata-rata 180 sampai 350 KB tergantung kompleksitas foto. WebP visual lossless pada kualitas q85 sampai q90, sekitar 25 sampai 40 persen lebih kecil dari PNG, dan didukung semua browser modern sejak 2023. AVIF memakai intra-coding AV1 dan biasanya 40 sampai 50 persen lebih kecil dari WebP pada kualitas visual setara. Encoder WASM @jsquash/avif membutuhkan waktu lebih lama, sekitar 3 detik di desktop dan bisa mencapai 30 detik di ponsel kelas menengah untuk input 8 megapiksel. JPEG paling cepat dienkode, sekitar 400 milidetik di desktop, tapi tidak punya saluran alpha. Pakai JPEG hanya jika platform tujuan menolak file transparan. Untuk kebanyakan pengguna, PNG memberi keandalan dan WebP memberi ukuran file lebih kecil.
Panduan ukuran platform untuk avatar bulat
LinkedIn menampilkan foto profil minimal 400 kali 400 piksel di halaman profil dan ukuran lebih kecil sekitar 48 piksel di feed, semua dirender melingkar. Discord menampilkan ikon guild maksimal 512 kali 512 piksel secara bulat, avatar pengguna 128 kali 128 di daftar anggota, dan 32 kali 32 di chat. Instagram menampilkan foto profil sekitar 110 piksel di profil mobile dan 32 piksel di thumbnail feed. Slack menerima avatar workspace maksimal 512 kali 512 piksel untuk diunggah dan menampilkannya sekitar 36 piksel di daftar channel. Tool ini mengekspor pada resolusi foto asli. Jika kamu butuh dimensi piksel tertentu, ubah ukuran gambar dulu lewat resize sebelum menjalankan crop lingkaran. Cara ini menghasilkan output piksel yang akurat tanpa artefak upscaling.
HEIC dan keterbatasan hanya di Safari
HEIC adalah format kontainer Apple yang memakai kompresi HEVC. Safari 17 ke atas menangani HEIC secara native melalui createImageBitmap, jadi crop lingkaran foto iPhone berfungsi langsung di Safari tanpa konversi. Chrome, Firefox, dan Edge belum mengimplementasikan dekode HEIC di createImageBitmap pada 2026. Browser-browser itu mengembalikan error decode. Tool memeriksa magic bytes saat diunggah, jadi jika file HEIC terdeteksi di browser selain Safari, pesan error ramah menyarankan untuk mengonversi ke JPG dulu. Solusi untuk pengguna non-Safari: buka foto di iPhone di aplikasi Photos, bagikan sebagai JPG lewat menu share, atau pakai png-to-jpg jika file HEIC sudah ada di desktop. File .heic yang sekadar diubah namanya menjadi .jpg tetap akan ditolak karena pemeriksaan magic bytes mendeteksi perubahan nama tersebut.
Mengapa area di luar lingkaran transparan
Saat kamu mengekspor crop lingkaran sebagai PNG atau WebP, piksel di luar batas lingkaran memiliki nilai alpha nol, sepenuhnya transparan. Di platform yang menampilkan avatar dalam bingkai lingkaran, latar transparan menjadi tidak terlihat dan warna latar platform tampak bersih di belakangnya. Di platform yang menampilkan file dalam ukuran penuh, seperti pratinjau lampiran, area transparan terlihat sebagai pola kotak-kotak abu-muda. Jika kamu menempelkan lingkaran ke alat desain seperti Figma atau Canva, kamu bisa melapisinya di atas warna apa pun tanpa artefak halo putih. Pilihan JPEG ada untuk kasus di mana transparansi menimbulkan masalah. Beberapa klien email, sejumlah alat unggah CMS, dan beberapa platform lama menghapus transparansi dan menggantinya dengan hitam. Memakai JPEG dengan warna isi yang kamu pilih menghindari hal itu.
Pakai DevTools untuk memverifikasi pemrosesan di browser
Buka DevTools browser (F12 atau klik kanan lalu Inspect), pilih tab Network, klik Clear untuk menghapus entri sebelumnya, lalu unggah gambar ke tool crop lingkaran dan seret handle. Perhatikan tab Network selama proses berlangsung. Satu-satunya permintaan yang muncul adalah untuk aset halaman seperti JS, CSS, dan font yang dimuat sebelum pengunggahan. Tidak ada permintaan POST atau PUT baru yang membawa data gambar yang akan muncul. Setelah kamu klik Simpan, permintaan ke URL blob muncul sebentar di tab itu untuk menyelesaikan blob lokal, dan itu bukan pengiriman data ke server. Langkah verifikasi ini bisa dilakukan di Chrome, Firefox, Safari, dan Edge dengan cara yang sama.
