Kenapa tangkapan layar Anda 2 MB, dan cara menciutkannya 60–90%

Saya pernah menghitung tangkapan layar dalam satu utas email tinjauan desain. Sebelas buah, PNG, rata-rata sedikit di bawah 2 MB masing-masing. Dua puluh sekian megabyte dasbor yang kebanyakan putih, terbang bolak-balik antara enam orang yang semuanya membuka aplikasi yang sama di tab lain. Tak ada yang memikirkannya, karena "berhasil". Itulah jebakannya. Tangkapan layar diam-diam berukuran raksasa, dan alasannya tertanam dalam cara komputer Anda mengambilnya.

Kenapa satu tangkapan layar jadi file 2 MB

Saat Anda menekan pintasan tangkapan layar, sistem operasi menyimpan PNG. Itu bawaan yang masuk akal — PNG bersifat lossless, jadi tangkapannya sempurna piksel, dan untuk tangkapan penuh teks tajam itu memang naluri yang tepat. Masalahnya ada pada apa yang dilakukan PNG terhadap ukuran.

PNG menyimpan tiap piksel persis. Layar modern itu padat — tangkapan satu jendela penuh pada layar Retina atau 4K bisa selebar 2.000+ piksel, dan PNG dengan setia mencatat tiap satu dari jutaan piksel itu pada kesetiaan penuh. Ia tak peduli bahwa 60% bingkainya adalah rona nyaris-putih yang sama. Ia tak membuang apa pun, karena membuang bukanlah yang ia lakukan. Jadi tangkapan halaman pengaturan yang nyaris kosong — secara visual nyaris tak ada apa-apa — tetap berbobot 1,5 sampai 2,5 MB, karena kanvasnya raksasa bahkan saat isinya tipis.

Langkahnya: konversi ke WebP

WebP bisa melakukan sesuatu yang tak bisa PNG — mengompresi secara lossy sambil menjaga tepi tajam dan transparansi. Pada tangkapan layar khususnya, kombinasi itu nyaris ajaib, karena tangkapan layar kebanyakan bidang datar (murah dikompresi) dengan sedikit teks (yang dijaga tajam oleh WebP). Lintasan lossy membuang derau yang tak terlihat; mata Anda tak pernah mengajukan keluhan.

Angka nyata dari tangkapan layar di disk saya sendiri:

Itu kira-kira 85–90% terpangkas, dan disandingkan saya tak bisa membedakan mana yang mana. Teksnya tetap terbaca sampai ke piksel. Ini konversi dengan imbalan tertinggi yang saya lakukan, justru karena tangkapan layar sejak awal kelewat berat — ada sejumlah besar kekosongan untuk diperas keluar.

"Bukankah teksnya jadi buram?"

Ini ketakutannya, dan itu wajar, karena Anda mungkin pernah melihat tangkapan layar JPG dengan teks berlingkar cahaya buram dan mengira semua format lossy berbuat begitu. WebP lebih baik pada tepi ketimbang JPG — jauh lebih baik. Pada pengaturan kualitas yang wajar, teks pada tangkapan layar WebP tetap tajam. Saya sudah memperbesar sampai 400% memburu artefak di sekeliling bentuk huruf dan pulang dengan tangan kosong pada tangkapan UI biasa.

Pengecualian jujurnya: kalau Anda menurunkan kualitas jauh-jauh demi mengejar file mungil, akhirnya Anda akan melihat teks melembut. Solusinya adalah jangan lakukan itu. Pengaturan kualitas menengah sudah memberi Anda kemenangan 60–90% dengan teks tetap utuh. Tak ada alasan mendorong ke rentang tempat ia rusak.

Kapan menciutkan tak membantu

Dua kasus saat saya membiarkan PNG-nya.

Kalau tangkapan layar akan kembali ke dalam alat desain untuk ditandai, dianotasi, atau dikomposit, saya jaga tetap lossless. Lintasan lossy WebP adalah pintu satu arah, dan saya tak mau memanggang kompresi ke dalam sesuatu yang akan saya sunting dan ekspor ulang. Kirim WebP-nya, simpan master PNG — aturan yang sama seperti biasa.

Dan kalau tangkapan layar sudah kecil — potongan detail mungil, satu tombol, sesuatu yang sudah di bawah sekitar 100 KB — konversinya nyaris tak menggerakkan jarum. Kemenangan 60–90% datang dari file yang raksasa karena kanvasnya raksasa. Potongan kecil sudah menyelesaikan masalah itu. Jangan menambah langkah tanpa guna.

Bagaimana saya benar-benar melakukannya

Saya menjalankan tangkapan layar lewat konverter PNG ke WebP di situs ini sebelum ia mendekati email atau dokumen. Ia terjadi di browser Anda, jadi tangkapan itu — yang, jujur saja, sering memperlihatkan separuh layar Anda dan apa pun yang ada di latar — tak pernah meninggalkan perangkat. Jatuhkan PNG-nya, saksikan kolom ukuran runtuh, unduh WebP-nya, lampirkan itu sebagai gantinya.

Intinya yang lebih besar bukan alatnya, tapi refleksnya. Begitu "tangkap layar, lalu ciutkan" jadi otomatis, Anda berhenti melontarkan gambar 2 MB ke orang yang sudah membuka aplikasinya, email Anda terkirim lebih cepat, dan utas berhenti membengkak jadi puluhan megabyte. Email sebelas tangkapan tadi seharusnya cuma sekitar 2 MB total, bukan dua puluh lebih. Gambar yang sama. Segalanya sama. Cuma tanpa bobot mati.