Potong Gambar Online

Potong JPG, PNG, WebP, atau AVIF dengan rasio bebas: 1:1, 16:9, 9:16, 4:5, 3:2, 4:3, atau ukuran piksel khusus.

atau jatuhkan gambar di sini

Tentang alat ini

Potong gambar apa pun menjadi area persegi panjang langsung di browser kamu, menggunakan alat crop Araluma yang ditenagai cropperjs v2. Letakkan file JPG, PNG, WebP, atau AVIF ke halaman dan kanvas crop terbuka seketika. Seret pegangan untuk menentukan posisi pilihan, kunci rasio (1:1, 16:9, 9:16, 4:5, 3:2, 4:3, atau A4), atau ketik dimensi piksel yang tepat dan frame menyesuaikan otomatis. Pembacaan langsung menampilkan ukuran output dalam piksel sumber sebenarnya sebelum kamu mengunduh. Gambar kamu tetap di perangkat sepanjang proses, tab Network di DevTools menunjukkan nol permintaan gambar keluar selama crop. Output PNG dan WebP menjaga transparansi dari file asli, sedangkan output JPG mengganti area transparan dengan latar belakang putih. Metadata EXIF dihapus dari setiap ekspor. Alat ini cocok untuk siapa saja yang butuh crop persegi panjang cepat dan presisi tanpa menginstal software, satu file dalam satu waktu.

Potong gambar
Cara kerja alat crop di browser kamu

Cara kerja alat crop di browser kamu

Gambar dibuka langsung oleh browser menggunakan File API. Tidak ada upload ke server dan tidak ada salinan sementara tersimpan di luar perangkat kamu. Seret frame crop ke posisi yang kamu butuhkan, ubah ukurannya dari sudut atau tepi, dan pembacaan piksel langsung diperbarui saat kamu menyeret. Koordinat berada dalam ruang piksel gambar sumber, sehingga angka yang ditampilkan adalah ukuran literal dari file output. Buka DevTools dan beralih ke tab Network saat crop, tidak ada permintaan gambar keluar yang muncul. File yang kamu drop dan file yang kamu unduh keduanya tetap sepenuhnya di perangkat kamu selama sesi.

Potong gambar
Kunci rasio atau masukkan dimensi piksel tepat

Kunci rasio atau masukkan dimensi piksel tepat

Tap chip rasio (1:1 untuk persegi, 16:9 untuk widescreen, 9:16 untuk potret, 4:5, 3:2, 4:3, atau A4) dan frame seleksi terkunci pada proporsi tersebut. Seret ke mana saja pada gambar untuk memilih bagian yang ingin dipertahankan. Untuk mencapai target piksel spesifik, ketik lebar dan tinggi ke kolom dimensi dan frame crop menyesuaikan ukurannya. Output selalu sama dengan ukuran piksel sumber dari seleksi. Alat ini tidak melakukan upscale, jika seleksi kamu lebar 600 piksel, file output juga lebar 600 piksel.

Potong gambar
Output JPG mengganti transparansi dengan putih

Output JPG mengganti transparansi dengan putih

Jika file sumber kamu memiliki area transparan (PNG, WebP dengan alpha, atau AVIF dengan alpha) dan kamu memilih JPG sebagai format output, piksel transparan tersebut diisi dengan putih. JPG tidak memiliki channel alpha, jadi tidak ada tempat untuk menyimpan transparansi. Untuk menjaga transparansi, pilih PNG, WebP, atau AVIF di selector format pada layar selesai. Output PNG dan WebP membawa channel alpha asli tanpa perubahan. AVIF juga mendukung alpha. Selector format memberi label pada setiap opsi sehingga trade-off terlihat sebelum kamu mengunduh.

Potong gambar
Pindahkan seleksi dengan presisi keyboard

Pindahkan seleksi dengan presisi keyboard

Tekan Tab untuk berpindah ke frame crop, lalu gunakan tombol panah untuk menggeser seleksi satu piksel pada satu waktu. Tahan Shift dan stepnya bertambah menjadi sepuluh piksel. Navigasi keyboard ini dibangun ke dalam cropperjs v2 sebagai fungsi native, bukan lapisan aksesibilitas terpisah. Berguna saat kamu butuh keselarasan visual sub-piksel yang tidak bisa dicapai trackpad, atau saat bekerja dalam setup keyboard-saja. Seleksi juga merespons sentuhan di mobile, cubit untuk zoom kanvas, lalu seret sudut seleksi untuk membingkai ulang. Tidak perlu mengaktifkan mode tambahan di kedua kasus.

Potong gambar
Format output: PNG, JPG, WebP, dan AVIF

Format output: PNG, JPG, WebP, dan AVIF

Setelah crop, pilih format unduhan di layar selesai. PNG bersifat lossless dan menjaga transparansi. JPG menerapkan kompresi lossy pada kualitas 0.9 secara default, yang tidak bisa dibedakan secara visual dari sumber pada sebagian besar foto. WebP menyeimbangkan mode lossless dan lossy dan juga mendukung transparansi. AVIF dikodekan via library @jsquash/avif pada kualitas 0.9. Menghasilkan file terkecil pada kualitas visual setara, tetapi pengkodean AVIF pertama dalam sesi membutuhkan unduhan modul WASM 870 KB sekali saja. Format output default sesuai input kamu, input PNG default ke output PNG, input JPG default ke JPG. Bisa kamu ubah kapan saja di layar selesai.

Potong gambar
Kapan menggunakan alat crop lain

Kapan menggunakan alat crop lain

Alat ini hanya crop persegi panjang, persegi, rasio landscape, rasio portrait, dan dimensi piksel khusus. Untuk crop lingkaran, foto profil dengan sudut transparan, gunakan Circle Crop sebagai gantinya. Ia berbagi pemrosesan sisi browser yang sama tapi menghasilkan PNG bundar. Untuk preset spesifik platform dengan dimensi default sudah disetel (Instagram 1080×1080, thumbnail YouTube 1280×720, sampul Facebook 1200×630), halaman preset crop di keluarga Crop terbuka dengan dimensi tersebut sudah dimuat, jadi kamu tidak perlu menghitung apa pun. Jika gambar kamu perlu berubah format tanpa crop dulu, gunakan alat Convert untuk mendapatkan PNG, JPG, WebP, atau AVIF.

Cara memotong foto menjadi lingkaran

  1. Drop gambar kamu

    Buka alat dan drop file JPG, PNG, WebP, atau AVIF ke area unggah, atau klik untuk memilih file dari perangkat kamu.

  2. Pilih rasio atau ukuran piksel

    Tap chip rasio (1:1, 16:9, 9:16, 4:5, 3:2, 4:3, atau A4) atau ketik dimensi piksel tepat di kolom lebar dan tinggi untuk menyetel frame crop.

  3. Posisikan frame

    Seret frame crop ke area gambar yang ingin kamu pertahankan, lalu ubah ukurannya dari sudut atau tepi sampai pembacaan langsung menunjukkan ukuran output yang kamu butuhkan.

  4. Crop dan unduh

    Klik Crop, pilih format output (PNG, JPG, WebP, atau AVIF) di layar selesai, dan unduh file hasil crop ke perangkat kamu.

Pertanyaan yang Sering Diajukan

Bagaimana cara crop gambar online?

Drop gambar kamu ke alat crop, pilih rasio atau ketik dimensi piksel, seret frame seleksi ke area yang ingin kamu pertahankan, lalu klik Crop dan unduh. Seluruh proses berjalan di browser kamu. Crop tipikal dari unggah ke unduh memakan waktu kurang dari sepuluh detik di perangkat modern.

Bagaimana cara crop gambar PNG online?

Unggah PNG ke alat crop, atur rasio atau dimensi, posisikan frame crop, dan klik Crop. Di layar selesai, pilih PNG sebagai format output untuk menjaga channel alpha tetap utuh. Jika kamu memilih JPG, area transparan akan diganti dengan latar belakang putih. Output PNG bersifat lossless, jadi tidak ada kualitas piksel yang hilang selama crop.

Bagaimana crop foto untuk Instagram tanpa aplikasi?

Buka alat crop di browser kamu, unggah foto, lalu tap chip 1:1 untuk postingan Instagram persegi atau chip 4:5 untuk postingan potret. Seret frame untuk membingkai subjek, klik Crop, dan unduh. Ukuran output sesuai dengan piksel sumber seleksi. Untuk Story atau Reel Instagram, gunakan rasio 9:16.

Apa rasio aspek terbaik untuk crop gambar media sosial?

Gunakan 1:1 untuk postingan persegi Instagram, 4:5 untuk postingan potret yang mengisi lebih banyak feed, 9:16 untuk Story atau Reel, dan 16:9 untuk thumbnail YouTube atau header Twitter. Sampul Facebook bekerja paling baik pada ukuran 1200×630 piksel, yang dekat dengan rasio 2:1. Alat crop ini memiliki chip untuk 1:1, 16:9, 9:16, 4:5, 3:2, dan 4:3, plus input piksel khusus.

Bisakah aku crop gambar menjadi lingkaran dengan alat ini?

Tidak, alat ini hanya crop persegi panjang, persegi, landscape, potret, dan dimensi khusus. Untuk crop bundar dengan latar belakang transparan, gunakan alat Circle Crop sebagai gantinya. Ia menggunakan pemrosesan berbasis browser yang sama sehingga gambar kamu tetap di perangkat, tapi menghasilkan PNG bundar dengan sudut transparan, bukan persegi panjang.

Bagaimana crop gambar ke ukuran piksel tepat?

Ketik lebar dan tinggi target ke kolom dimensi di kanvas crop. Frame crop menyesuaikan ukurannya dan pembacaan langsung mengonfirmasi ukuran output dalam piksel sumber. Output selalu sesuai dengan dimensi piksel sumber seleksi. Alat tidak melakukan upscale, jika seleksi lebih kecil dari target kamu, output juga akan lebih kecil.

Detail

Catatan dari tim tentang keahlian, format, dan keputusan kecil di balik pemotongan bulat yang baik.

Library cropperjs v2 dan apa yang berubah dari v1
Alat ini dibangun di atas cropperjs versi 2.1.1, penulisan ulang lengkap dari library cropperjs asli. Rilis v2 menggantikan API berbasis constructor lama (new Cropper(img, { aspectRatio: 1 })) dengan arsitektur Web Components. Kanvas crop, overlay seleksi, dan elemen gambar semuanya adalah elemen HTML kustom yang terdaftar via CustomElementRegistry browser. Ini berarti Shadow DOM menangani semua style internal, tidak ada file cropper.css terpisah untuk diimpor, yang menghilangkan satu permintaan aset Vite dibandingkan v1. Kunci rasio aspek sekarang disetel pada elemen seleksi itu sendiri (cropperSelection.aspectRatio = 1) daripada di constructor, sehingga rasio bisa diubah saat runtime tanpa menginisialisasi ulang seluruh antarmuka crop. Library beratnya 41 960 byte raw dan 12 175 byte gzip, diukur langsung dari header content-length CDN jsDelivr. 12 KB itu dibayar sekali per sesi dan digunakan kembali di semua rute preset crop melalui pembagian chunk Vite.
Bagaimana dimensi piksel output dihitung tanpa upscale
Saat kamu menyeret seleksi crop di layar, koordinat yang kamu lihat berada dalam ruang piksel gambar sumber, bukan ruang piksel CSS. Perbedaan ini penting untuk layar DPI tinggi, ponsel dengan rasio piksel perangkat 3× menampilkan gambar lebar 300 piksel CSS sebagai 900 piksel nyata, tapi koordinat seleksi mencerminkan 900 piksel nyata, bukan 300 piksel CSS. File output yang kamu unduh berisi tepat sebanyak piksel yang diwakili persegi seleksi dalam gambar sumber. Operasi crop memanggil selection.toCanvas() dari API cropperjs v2, metode asinkron yang mengembalikan HTMLCanvasElement baru berukuran dimensi piksel seleksi. Kanvas itu kemudian diteruskan ke canvas.toBlob() untuk PNG, JPG, atau WebP, atau ke encoder @jsquash/avif untuk AVIF. Tidak ada langkah upscale yang disisipkan. Jika seleksi kamu lebar 800 piksel, output lebar 800 piksel.
Penghapusan metadata EXIF dan apa yang hilang
Setiap ekspor menghapus data EXIF, IPTC, XMP, dan profil ICC. Ini terjadi di tingkat pipeline kanvas, browser menggambar piksel gambar yang didekode ke HTMLCanvasElement dan kanvas mengkodekan ke file baru. Kanvas tidak memiliki konsep wadah metadata, ia hanya menyimpan nilai piksel dan parameter pengkodean. Yang dihapus mencakup koordinat GPS, merek dan model kamera, focal length lensa, pengaturan exposure, kolom hak cipta, dan tag profil warna. Profil warna sRGB secara efektif adalah asumsi kanvas, warna dirender melalui pipeline tampilan browser dan dikodekan ulang tanpa profil terlampir. Untuk sebagian besar publikasi web dan penggunaan media sosial, EXIF yang dilepas lebih disukai karena data GPS dapat mengekspos informasi lokasi yang tidak ingin dibagikan pengguna. Untuk alur kerja fotografi profesional yang membutuhkan keakuratan profil warna, gunakan alat ekspor yang dikelola warna.
Apa yang terjadi saat crop GIF animasi
Saat kamu drop GIF animasi ke alat crop, browser hanya mendekode frame pertama ke elemen gambar yang digunakan oleh kanvas crop. Ini adalah perilaku browser, bukan keterbatasan cropperjs, HTMLImageElement tidak mengekspos frame individual dari GIF animasi ke JavaScript dengan cara yang bisa diiterasi API kanvas. Hasilnya adalah hanya frame pertama yang tersedia untuk seleksi crop dan output akhir adalah gambar diam dalam format mana pun yang kamu pilih di layar selesai. Jika input adalah GIF dan kamu memilih GIF sebagai output, implementasi canvas.toBlob browser tidak menyertakan encoder GIF, jadi output secara diam-diam turun ke PNG. Alat secara eksplisit menolak GIF sebagai opsi format output untuk menghindari downgrade diam-diam itu. Jika kamu perlu crop semua frame animasi, kamu butuh alat yang bekerja frame-by-frame, yang tidak didukung alat ini.
Navigasi keyboard dan aksesibilitas
Elemen seleksi cropperjs v2 mengimplementasikan navigasi keyboard sebagai bagian dari spesifikasi Web Component-nya. Setelah kamu Tab ke seleksi crop, tombol panah menggerakkan frame satu piksel dalam arah yang ditekan. Shift plus tombol panah menggerakkan frame sepuluh piksel. Ini secara native dapat diakses tanpa solusi khusus pembaca layar atau lapisan JavaScript kustom, handler keyboard ada di dalam shadow root elemen seleksi dan dipicu pada keydown. Ini penting untuk pengguna yang mengandalkan navigasi hanya keyboard, termasuk beberapa pengaturan teknologi bantu, perangkat aksesibilitas motorik, dan alur kerja presisi di mana trackpad tidak dapat mencapai keselarasan sub-piksel dengan andal. Pembacaan piksel langsung yang melekat pada seleksi juga diperbarui dengan setiap penekanan tombol, sehingga pengguna pembaca layar dengan region aria-live pada pembacaan dapat mendengar dimensi saat ini berubah. Aksesibilitas keyboard adalah satu area di mana alat ini lebih unggul dari iLoveIMG dan img2go.
Trade-off pilihan format setelah crop
Selector format pada layar selesai memberikan empat opsi. PNG bersifat lossless, setiap piksel di area crop disimpan persis seperti yang didekode dari sumber. Ukuran file lebih besar daripada JPG untuk konten yang sama, biasanya tiga sampai lima kali lebih besar untuk foto. JPG menerapkan kompresi lossy pada kualitas 0.9 (pada skala 0 sampai 1), yang kira-kira sesuai dengan preset kualitas tinggi di sebagian besar editor desktop. Pada q0.9 perbedaan antara asli dan output umumnya tidak terlihat pada monitor standar tapi file jauh lebih kecil. WebP pada pengaturan kualitas yang sama menghasilkan file kira-kira 25 sampai 35 persen lebih kecil dari JPG dalam tes pengkodean kami, dengan kualitas perseptual yang sama pada foto. WebP juga mendukung mode lossless dan menjaga transparansi. AVIF pada kualitas 0.9 via library @jsquash/avif menghasilkan output terkecil dari empat format, tapi pengkodean pertama dalam sesi membutuhkan unduhan modul WASM 870 KB.