Cara kompres PNG tanpa mengurangi kualitas sedikit pun

“Tanpa mengurangi kualitas” tertulis di banyak sekali alat kompresi, dan frasa itu mencakup dua janji yang tidak sama. Yang satu bisa diperiksa sampai bit terakhir. Yang lain adalah penilaian tentang apa yang akan disadari mata Anda. Panduan ini mengerjakan yang pertama, dan menjelaskan dengan tepat di mana batasnya.

Arti jujur dari “tanpa mengurangi kualitas”

Kompresi gambar lossless adalah menulis ulang cara gambar disimpan (filter yang diterapkan pada setiap scanline, palet, kedalaman bit, dan urutan aliran data terkompresi) tanpa mengubah satu pun nilai piksel. Ujinya mekanis: dekode file asli dan hasilnya, bandingkan setiap kanal dari setiap piksel, dan keduanya cocok. PNG punya banyak ruang untuk ini, karena formatnya mengizinkan banyak encoding valid untuk gambar yang sama, dan encoder serbaguna tidak berusaha mencari yang terkecil.

Janji yang lain biasanya disebut “visually lossless”. Artinya hasil lossy yang kerusakannya diperkirakan tidak terlihat pada ukuran tampilan normal. Itu bisa menjadi kompromi yang wajar, tetapi itu opini tentang satu gambar di satu layar, bukan sifat yang bisa dikonfirmasi lewat pemeriksaan byte demi byte. Pendekatan lossy yang umum untuk PNG memangkas gambar menjadi palet berisi 256 warna atau kurang; pada foto dengan warna jauh lebih banyak dari itu, cara ini memang dirancang untuk mengubah piksel.

Jadi, untuk mengompres PNG tanpa kehilangan apa pun, Anda memerlukan optimizer, bukan re-encoder dan bukan pengurang warna.

Melakukannya dengan kompresor gambar

1. Buka kompresor gambar dan tekan Choose images, atau jatuhkan atau tempel PNG Anda di mana saja pada halaman. Tidak ada batas jumlah; setiap file menjadi kartu bertanda “Ready · oxipng, lossless”.
2. Biarkan More options tertutup: baris ringkasannya berbunyi “PNG effort: Fast (level 2) · lossless at every level”. Harder (level 4) dan Hardest (level 6) ada di dalamnya jika Anda menginginkannya. Ketiganya lossless, seperti yang dinyatakan catatan di bawahnya.
3. Abaikan slider “JPEG quality · MozJPEG”. Slider itu hanya mengatur file JPEG, dan baris di bawahnya menyebutkan berapa banyak file JPEG yang Anda tambahkan.
4. Tekan Compress 1 image (atau sesuai jumlah yang Anda antrekan). File diproses satu per satu, tidak paralel, agar ponsel tidak kehabisan memori.
5. Baca setiap kartu: ukuran sebelum dan sesudah, persentasenya, dan “identical pixels” untuk semua file yang diproses oxipng. Before and after menampilkan file asli dan hasilnya berdampingan; jika ada beberapa file, pilih kartu untuk melihat yang lain.
6. Unduh dengan Download pada satu kartu, atau dengan tombol yang menggantikan “Compress” (Download all … as .zip untuk satu batch), yang juga ada di bilah di bagian bawah layar.

Jika persentase berubah merah dengan tanda plus, file itu justru menjadi lebih besar. File tersebut sudah ringkas dan tidak ada lagi yang bisa dipangkas, jadi simpan file asli Anda.

Hasil pengukuran

Angka-angka ini berasal dari riset di balik alat ini: piksel yang sama ditulis dengan tiga cara, lalu dibandingkan. Kolom canvas adalah hasil yang Anda dapat ketika browser mendekode PNG lalu meminta encoder-nya sendiri untuk menuliskannya kembali, yang merupakan cara kerja sebagian besar “kompresor” di browser.

Gambar	PNG sumber	Disimpan ulang lewat canvas	Dioptimalkan dengan oxipng	oxipng dibanding sumber
Grafis antarmuka datar	21 493 B	38 905 B (+81%)	3 350 B	−84%
Foto, 1600 × 1000	1 006 774 B	1 236 423 B (+23%)	864 362 B	−14%

Angka oxipng diambil pada level tertingginya, dan setiap piksel di kedua hasil cocok dengan sumbernya. Grafis datar adalah kejutan yang menyenangkan: 21 493 ÷ 3 350 = 6.4 kali lebih kecil. Foto adalah ekspektasi yang realistis untuk gambar dengan detail tonal yang nyata. Tiga gambar uji bersifat indikatif, bukan rangkaian benchmark, jadi anggap arahnya pasti dan persentase tepatnya sebagai satu sampel.

Upaya membeli waktu pencarian, bukan piksel

Level di menu tidak menukar kualitas dengan ukuran. Hasilnya lossless di setiap level; level yang lebih tinggi hanya mencari lebih lama untuk encoding valid yang lebih kecil. Pada foto yang sama, dijalankan secara native di satu core:

Level oxipng	Hasil	Waktu
2 (“Fast” di alat ini)	884 853 B	0.97 s
4 (“Harder” di alat ini)	870 679 B	1.98 s
max	864 362 B	3.45 s

Level tertinggi menghemat 20 491 byte lebih banyak daripada level 2 dengan kerja tiga setengah kali lipat. Di browser, WebAssembly berjalan dua sampai tiga kali lebih lambat daripada waktu native tersebut, itulah sebabnya alat ini dimulai di level cepat.

Yang sering salah: menyimpan ulang bukan mengoptimalkan

Kolom canvas di tabel pertama adalah kegagalan yang mudah terjadi pada tugas ini. Menyimpan ulang PNG lewat encoder browser membuat grafis datar 81% lebih besar dan foto 23% lebih besar. Pikselnya baik-baik saja; encoder-nya hanya tidak berusaha. Alat yang dibangun dengan cara itu justru menggelembungkan file pada cukup banyak input nyata, dan jika alat itu hanya pernah melaporkan penghematan, Anda mungkin tidak menyadarinya.

Tepi yang lembut adalah jebakan kedua. Canvas membulatkan piksel semi-transparan saat masuk, dan pembulatan itu tidak bisa dibatalkan saat keluar. Dalam pengukuran PNG ke WebP, potongan foto dengan tepi feather yang dilewatkan lewat canvas pada kualitas lossless kembali dengan 39.77% pikselnya berubah. Jalur PNG di kompresor ini menghindari kedua masalah itu dengan tidak pernah menyentuh canvas: byte Anda langsung masuk ke oxipng dan byte hasilnya langsung kembali.

Alat ini bahkan melangkah lebih jauh dari yang sebenarnya diperlukan. oxipng bisa menulis ulang nilai warna tersembunyi di bawah piksel yang sepenuhnya transparan, yang tidak bisa dilihat siapa pun dan memang menghemat byte, tetapi hasilnya tidak identik bit demi bit. Alat ini mematikan opsi itu (optimize_alpha bernilai false di kode sumbernya), karena “identical pixels” adalah klaim yang tertera di layar.

Batas lossless

• File JPEG diproses MozJPEG, yang bersifat lossy. MozJPEG membuang detail untuk menghemat byte, dan alat ini menyatakannya di samping slider-nya. JPEG tidak bisa diperkecil di alat ini tanpa kehilangan tersebut.
• GIF dan BMP keluar sebagai PNG. Keduanya dibaca sekali dan ditulis sebagai PNG yang dioptimalkan tanpa ada piksel yang berubah, sehingga ekstensi file berubah.
• WebP dan AVIF ditolak, karena keduanya sudah terkompresi lebih baik daripada yang bisa dicapai jalur PNG atau JPEG.
• PNG animasi dan GIF animasi ditolak. Mendekode animasi di browser hanya menyisakan frame pertama, yang akan mengubah GIF empat puluh frame menjadi gambar diam dan melaporkannya sebagai penghematan.

Cara lain melakukannya

Di command line, gunakan oxipng sendiri:

oxipng -o 4 --strip safe image.png

-o 4 adalah level upaya, sama dengan opsi “Harder” di alat ini, dan inilah sintaks yang kami pakai untuk pengukuran. --strip safe memintanya menghapus metadata yang dinilai aman untuk dibuang; pikselnya tidak tersentuh dalam kedua kasus. Kerjakan pada salinan jika Anda ingin menyimpan file aslinya.

macOS dan Windows tidak memiliki optimizer PNG lossless bawaan yang bisa kami tunjukkan; command line adalah alternatifnya.

Memastikan tidak ada yang diunggah

Buka developer tools browser Anda di tab Network sebelum menekan compress. Proses pertama mengambil mesin kompresinya sendiri, sebuah file WebAssembly yang disajikan situs ini; yang tidak akan Anda lihat adalah permintaan apa pun yang membawa gambar Anda keluar. Kompres file kedua dan mesinnya sudah termuat, jadi tidak ada hal baru yang muncul sama sekali.

Jatuhkan PNG Anda ke kompresor gambar dan baca angka per file sebelum menyimpan apa pun. Jika yang Anda butuhkan adalah format lain, bukan PNG yang lebih kecil, itu tugas konverter gambar.