Cara crop, putar, dan ubah ukuran gambar sekaligus tanpa kehilangan ketajaman

Pekerjaan yang umum memuat tiga kata kerja. Sebuah foto 4032 × 3024 yang diambil sambil menghadap ke meja ternyata miring ke samping, dan perlu di-crop persegi, diputar seperempat putaran, dan diberi ukuran akhir 1080 piksel. Jika dikerjakan di tiga situs yang masing-masing hanya punya satu fungsi, itu berarti tiga kali unggah, tiga kali unduh, dan tiga kali encode baru untuk gambar yang sama. Jika dikerjakan di satu tempat, itu satu kali decode dan satu kali encode, dan ketajaman yang bertahan sebagian besar bergantung pada cara langkah terakhir mengecilkan piksel.

Contoh lengkap, langkah demi langkah

Langkah	Ukuran sesudahnya	Megapiksel	Yang penting di sini
Foto asli	4032 × 3024	12.19	Penanda orientasi yang ditulis ponsel dihormati saat dibuka; foto ini memang benar-benar miring
Crop 1:1 di tengah (Left 504, Top 0, Width 3024, Height 3024)	3024 × 3024	9.14	(4032 − 3024) ÷ 2 = 504 piksel dipangkas dari setiap sisi
Seperempat putaran dengan ↻ 90°	3024 × 3024	9.14	Persegi mempertahankan ukurannya; angka crop tetap merujuk ke tepi yang sama
Width diatur ke 1080	1080 × 1080	1.17	1080 ÷ 3024 = 35.7% dari lebar, pengecilan sebesar 64%
Download	Satu file		Satu kali encode, dinamai sesuai format yang benar-benar ditulis browser

Baris terakhir sebelum unduhan adalah tempat ketajaman dipertahankan atau hilang. Pengecilan 64% sudah jauh melewati titik (sekitar sepertiga) di mana scaler bawaan browser mulai jelas membuang detail.

Mengapa pengecilan besar menjadi buram

Resampling adalah menghitung piksel baru dari piksel di sekitarnya ketika ukuran gambar berubah. Setiap resize melakukannya; pertanyaannya adalah seberapa cermat.

Cara bawaan browser adalah menggambar gambar ke canvas yang lebih kecil. Cara ini mengambil sampel secara murah, dan pada pengecilan lebih dari sekitar sepertiga, cara ini melewatkan detail yang berada di antara titik sampel: garis halus menjadi putus-putus, teks kecil menjadi berantakan, rambut dan dedaunan menjadi lembek. Anda juga tidak bisa memilih metodenya. Chrome dan Firefox memakai sesuatu yang mirip Lanczos, Safari memakai bicubic, dan tidak ada apa pun di antarmuka canvas yang memungkinkan halaman meminta metode lain.

Editor gambar ini melakukan resize dengan Lanczos3, yang menghitung setiap piksel keluaran dari jendela piksel sumber yang berbobot, bukan dari satu sampel murah. Itulah sebabnya tepi dan huruf bertahan saat dikecilkan 64%. Resampler ini berukuran 14 KB setelah gzip, hanya dimuat di halaman ini, dan berjalan di worker, jadi menyeret pegangan crop tetap mulus selama ia bekerja. Resampler hanya berjalan ketika ukuran benar-benar berubah; pada 1:1 tidak ada yang perlu di-resample.

Memperbesar gambar melewati resampler yang sama dan hasilnya bersih, tetapi tidak menciptakan apa pun. Detail yang tidak pernah ditangkap kamera tidak ada di file, dan itulah topik pembesar gambar.

Mengapa satu kali proses lebih baik daripada tiga

Setiap alat terpisah mendekode file Anda, mengerjakan satu tugasnya, lalu meng-encode file baru. Jika formatnya JPEG, atau WebP di bawah kualitas penuh, setiap encode itu membuang detail lagi, di atas yang sudah dibuang encode sebelumnya, dan Anda tidak bisa mengembalikannya. Tiga alat berarti tiga encode; satu kali proses berarti satu.

Perbandingan alat ini sendiri dengan halaman yang hanya punya satu fungsi:

	Editor gambar	Halaman crop, putar, flip, dan resize yang terpisah
Bolak-balik	Satu decode, satu encode	Encode ulang di antara setiap langkah
Urutan transformasi	Dinyatakan: crop, flip, rotasi, resize	Tidak didokumentasikan
Koordinat crop	Disimpan dalam piksel gambar asli	Dihitung ulang setelah setiap rotasi
Pengecilan	Lanczos3 di worker	Apa pun yang dilakukan browser
Keyboard	Kotak angka dan seleksi yang bisa difokus	Hanya pointer

Smallest, pilihan ekspor bawaan, mencoba WebP, JPEG, dan PNG lalu menyimpan mana pun yang hasilnya paling kecil. Itu tiga encode dari piksel jadi yang sama, bukan satu encode yang diumpankan ke encode berikutnya, jadi file yang Anda simpan tetap hanya berjarak satu generasi dari aslinya.

Urutannya tetap, dan tertulis

Urutan transformasi gambar adalah urutan penerapan crop, flip, rotasi, dan resize. Urutan ini penting karena transformasi tidak komutatif: flip lalu rotasi menghasilkan gambar yang berbeda dari rotasi lalu flip.

Di sini urutannya selalu crop, lalu flip, lalu rotasi, lalu resize. Kotak crop disimpan dalam koordinat piksel foto asli, jadi Left 504 yang diketik sebelum Anda menekan ↻ 90° tetap merujuk ke tepi yang sama sesudahnya. Resize berjalan terakhir karena tidak ada gunanya me-resample piksel yang akan dibuang oleh crop.

Ada satu konsekuensi yang terlihat seperti bug padahal bukan. Karena flip berjalan sebelum rotasi, flip horizontal yang tersimpan akan tampil sebagai flip vertikal begitu gambar berada di 90°. Tombol flip mengompensasinya, jadi Flip ↔ selalu membalik ke arah yang memang terlihat seharusnya, dan keterangan di sebelahnya menampilkan putaran dan flip sebagaimana yang Anda lihat.

Melakukannya di editor gambar

1. Buka editor gambar dan tekan Choose an image, atau jatuhkan gambar ke kotaknya. HEIC langsung dari iPhone sering perlu dikonversi dulu.
2. Atur crop di bawah Crop · drag or type. Seret persegi panjang di foto, pilih rasio dari Free, 1:1, 4:3, 16:9, dan 3:2, atau ketik nilai pasti di Left, Top, Width, dan Height. Tekan Tab hingga seleksi terfokus, dan tombol panah menggesernya satu piksel setiap kali, dua puluh piksel dengan Shift ditahan. Reset mengembalikan ke bingkai penuh.
3. Putar dan balik di bawah Turn: ↺ 90°, ↻ 90°, 180°, Flip ↔, dan Flip ↕.
4. Ubah ukuran di panel berikutnya. Ketik Width, Height, atau Percent; Ratio locked menjaga proporsi, dan Match crop mengembalikan ukuran ke dimensi hasil crop. Keterangan Output dan Megapixels di samping pratinjau langsung diperbarui saat Anda mengetik.
5. Pilih format di bawah Save as: Smallest, PNG, JPEG, atau WebP jika browser Anda bisa meng-encode-nya. Slider Quality berkisar dari 0.30 sampai 1.00, dimulai di 0.85, dan dinonaktifkan untuk PNG, yang bersifat lossless.
6. Tekan Download. File dinamai sesuai apa yang benar-benar dihasilkan browser, dan Last file menampilkan ukurannya.

Apa yang diubah ekspor selain piksel

• Metadata hilang. Encode ulang membuang EXIF, yang menghapus koordinat GPS yang ditulis ponsel ke setiap foto, dan juga kolom hak cipta dan kamera jika Anda membutuhkannya.
• JPEG tidak mendukung transparansi. Apa pun yang tembus pandang diratakan di atas putih.
• Ada batas ukuran. Canvas browser menampung sekitar 8 192 piksel per sisi, dan iOS versi lama membatasi totalnya sekitar 16 megapiksel. Melewati salah satu batas itu, canvas mengembalikan gambar kosong tanpa pesan error, jadi alat ini membatasi ukuran dan memberitahukannya. Pemeriksaan ini juga mencakup canvas perantara: pindaian 12 000 piksel yang di-crop menjadi 11 000 piksel tetap melewati batas.
• Tidak ada rotasi sudut bebas. Hanya seperempat dan setengah putaran. Meluruskan cakrawala sebanyak dua derajat akan menginterpolasi, dan melembutkan, setiap piksel.

Cara lain melakukannya

Di Mac, Preview bisa melakukan dua dari tiga: Tools → Crop memangkas sesuai seleksi, dan Tools → Adjust Size mengubah ukuran. Di Windows, aplikasi Photos bisa meng-crop dan memutar gambar. Aplikasi apa pun yang Anda pakai, lakukan semua perubahan sebelum menyimpan, agar gambar hanya di-encode sekali.

Memastikan tidak ada yang diunggah

Buka developer tools browser Anda di tab Network sebelum mulai. Resize pertama mengambil resampler-nya sendiri, sebuah skrip yang disajikan situs ini; tidak ada yang membawa gambar Anda keluar, karena crop, putaran, dan resample semuanya terjadi di tab.

Kerjakan ketiga tugas sekaligus di editor gambar. Untuk mengetahui seberapa besar piksel hasil akhir saat dicetak, gunakan konverter piksel; untuk memperkecil file tersimpan tanpa menyentuh satu piksel pun, gunakan kompresor gambar.