Penyebab PNG Sangat Besar dan Solusinya
PNG bersifat lossless, yang merupakan alasan mengapa ukurannya sangat besar. Tiga solusi, dan apa konsekuensi dari masing-masing solusi tersebut.
PNG Anda berukuran 8 MB karena PNG menyimpan setiap piksel secara tepat, dan tangkapan layar satu halaman penuh pada resolusi retina memang mengandung informasi sebanyak itu. Format ini tidak membuang apa pun, yang merupakan keunggulan utama PNG sekaligus masalah utamanya.
Ada 3 cara untuk mengatasinya, dan masing-masing memiliki konsekuensi yang berbeda. Mengurangi dimensi mengorbankan resolusi yang mungkin sebenarnya tidak Anda butuhkan. Mengurangi kedalaman warna mengorbankan akurasi warna pada foto. Mengubah format mengorbankan kompatibilitas di luar browser. Pilih berdasarkan tujuan penggunaan gambar tersebut.
3 pilihan Anda
- Kurangi dimensinya. Gratis, dan biasanya memberikan hasil terbesar. Tidak ada yang membutuhkan tangkapan layar berukuran 5000 piksel.
- Kurangi kedalaman warna. Berfungsi sangat baik pada grafis datar, tetapi buruk pada foto.
- Ubah format. WebP mempertahankan transparansi dan biasanya menghasilkan ukuran 25 hingga 35 persen lebih kecil.
Mengapa ukuran file PNG membengkak begitu cepat
Ukuran file PNG berbanding lurus dengan jumlah piksel, karena setiap piksel harus dideskripsikan secara tepat. Menggandakan lebar dan tinggi akan melipatgandakan jumlah piksel dan secara kasar melipatgandakan ukuran file.
Tangkapan layar berukuran 5120 kali 2880 dari monitor beresolusi tinggi mengandung 14,7 juta piksel. Dengan ukuran 3 byte per piksel sebelum kompresi, itu berarti 44 MB data mentah, dan kompresi PNG biasanya menguranginya menjadi antara 4 MB hingga 12 MB tergantung pada seberapa banyak warna datar yang ada pada gambar tersebut. Hasil berukuran 8 MB adalah hal yang normal, bukan suatu kesalahan.
Solusi 1: kurangi dimensinya
Ubah ukuran gambar ke ukuran terbesar yang akan ditampilkan, yang akan memangkas sebagian besar bobot file sebelum mencoba hal lain. Ini adalah solusi dengan efek tertinggi dan konsekuensi terendah.
| Ukuran asli | Diubah ukurannya menjadi | Piksel yang dihapus | File tipikal |
|---|---|---|---|
| 5120 x 2880 | 2560 x 1440 | 75 persen | 8 MB menjadi 2 MB |
| 3840 x 2160 | 1920 x 1080 | 75 percent | 5 MB menjadi 1.3 MB |
| 2560 x 1440 | 1280 x 720 | 75 percent | 2 MB menjadi 500 KB |
| Foto 4000 x 3000 | 1600 x 1200 | 84 percent | 18 MB menjadi 2.9 MB |
Ukur lebar maksimal gambar yang akan ditampilkan pada halaman, kalikan dua untuk layar dengan kerapatan tinggi, lalu ubah ukurannya ke hasil tersebut. Tangkapan layar yang ditampilkan dengan lebar 800 piksel hanya membutuhkan 1600 piksel, tidak lebih.
Solusi 2: kurangi kedalaman warna
Mengonversi dari warna 24 bit ke palet 8 bit memangkas ukuran PNG sebesar 50 hingga 70 persen, dan hanya berfungsi pada gambar dengan warna terbatas. Tangkapan layar antarmuka, diagram, logo, dan grafik adalah pilihan yang ideal.
Teknik ini menyimpan palet hingga 256 warna dan merujuknya per piksel, alih-alih menyimpan nilai warna penuh. Tangkapan layar antarmuka pengguna jarang mengandung lebih dari 256 warna berbeda, sehingga pengurangan ini tidak akan terlihat. Sebuah foto mengandung puluhan ribu warna, sehingga pengurangan yang sama akan menghasilkan gradasi warna yang terlihat jelas pada area langit dan kulit.
Solusi 3: ubah formatnya
Konversikan ke WebP untuk penggunaan web, yang mempertahankan transparansi dan biasanya menghasilkan ukuran 25 hingga 35 persen lebih kecil daripada PNG. Konversikan ke JPG hanya jika gambar tersebut berupa foto dan tidak memerlukan transparansi.
- WebP lossless untuk grafis dan tangkapan layar, yang menjaga setiap piksel tetap tepat dan masih menghemat 20 hingga 30 persen.
- WebP lossy untuk file PNG foto, di mana penghematannya bisa mencapai 70 persen atau lebih.
- JPG untuk foto tanpa transparansi, di mana PNG adalah pilihan yang salah sejak awal.
- AVIF untuk gambar foto berukuran besar, yang mengompresi lebih kuat lagi pada file di atas 100 KB.
- Grafis vektor untuk logo dan ikon, di mana file SVG mungkin hanya berukuran sebagian kecil dari format raster apa pun.
Penyebab paling umum: foto yang disimpan sebagai PNG
Foto yang disimpan sebagai PNG berukuran 3 hingga 5 kali lebih besar daripada foto yang sama dalam format JPEG, tanpa perbedaan visual yang terlihat. Kesalahan tunggal ini menjadi penyebab sebagian besar file PNG berukuran terlalu besar.
Kompresi PNG mencari pengulangan, dan foto hampir tidak memiliki pengulangan pada tingkat piksel, karena setiap piksel sedikit berbeda dari piksel di sebelahnya. Format ini akhirnya menyimpan jutaan nilai yang hampir unik secara tepat. Simpan foto sebagai JPEG atau WebP dan khususkan PNG untuk gambar yang benar-benar memiliki warna datar atau transparansi.
Cara memperkecil ukuran PNG tanpa mengurangi kualitas
Untuk memperkecil ukuran PNG dengan tetap mempertahankan sifat lossless, ikuti 5 langkah berikut secara berurutan.
- Pangkas area yang tidak digunakan, karena margin kosong tetap memakan ukuran file.
- Ubah ukuran ke ukuran tampilan terbesar yang dibutuhkan gambar, kalikan dua untuk layar dengan kerapatan tinggi.
- Periksa apakah gambar tersebut benar-benar membutuhkan transparansi, karena gambar yang disatukan tanpa transparansi dapat dikompresi lebih baik.
- Kurangi palet warna jika gambar tersebut berupa grafis, bukan foto.
- Konversikan ke WebP lossless, yang tetap presisi dan biasanya 20 hingga 30 persen lebih kecil.
Langkah 1 dan 2 biasanya sudah cukup untuk menyelesaikan masalah. Langkah-langkah selebihnya penting ketika gambar harus tetap berukuran sangat besar, seperti tangkapan layar satu halaman penuh dalam dokumentasi.
Mengapa tangkapan layar sangat besar di layar modern
Layar dengan kerapatan tinggi menangkap gambar pada 2 atau 3 kali resolusi logis, sehingga tangkapan layar jendela dengan lebar 1200 piksel akan disimpan pada ukuran 2400 atau 3600 piksel. Ukuran file jauh lebih besar daripada tampilan jendela yang terlihat.
Resolusi ekstra tersebut berguna jika tangkapan layar akan dilihat di layar dengan kerapatan tinggi lainnya, dan akan sia-sia jika tidak. Untuk dokumentasi dan artikel bantuan, mengubah ukuran kembali ke ukuran logis akan memangkas dimensi menjadi setengahnya dan memotong ukuran file sekitar 75 persen dengan tampilan yang identik bagi sebagian besar pembaca.
Kapan harus mempertahankan ukuran PNG yang besar
Pertahankan PNG ukuran penuh jika gambar tersebut merupakan file master, aset cetak, atau sumber yang akan diedit nanti. Keputusan kompresi berlaku untuk salinan distribusi, bukan untuk file asli.
File desain, master logo, karya seni cetak, dan dokumen hasil pemindaian semuanya membenarkan ukurannya yang besar. Simpan file-file tersebut pada resolusi penuh dan buat salinan yang lebih kecil untuk setiap tujuan penggunaan. Kesalahannya adalah memublikasikan file master alih-alih menyimpannya, karena file master hanya memakan ruang penyimpanan sekali, sedangkan file master yang dipublikasikan akan memakan bandwidth pada setiap kunjungan.
Transparansi memakan lebih banyak ruang dari yang diperkirakan
Saluran transparansi menambahkan nilai keempat pada setiap piksel, meningkatkan data mentah sekitar 33 persen sebelum kompresi. Banyak file PNG membawa saluran tersebut tanpa menggunakannya.
Tangkapan layar, grafik hasil ekspor, dan gambar yang disatukan pada latar belakang putih sering kali tetap mempertahankan saluran alfa yang sepenuhnya buram di semua bagian. Menghapusnya tidak mengurangi kualitas visual sama sekali dan mengurangi ukuran file secara terukur. Periksa apakah gambar tersebut benar-benar membutuhkan latar belakang transparan sebelum berasumsi bahwa saluran tersebut diperlukan, karena sebagian besar gambar yang ditempatkan pada halaman putih tidak membutuhkannya.
Apakah mengompresi PNG akan mengurangi kualitas
Optimasi PNG lossless tidak mengurangi kualitas sama sekali, sedangkan mengurangi warna atau dimensi akan mengubah gambar secara permanen. Ketiga teknik ini sering kali dijelaskan bersamaan padahal tidak setara.
Optimasi lossless mengatur ulang cara file menyimpan datanya dan biasanya menghemat 5 hingga 20 persen dengan hasil piksel yang identik. Pengurangan palet warna dan pengubahan ukuran mengubah gambar itu sendiri, yang dapat diterima untuk salinan distribusi tetapi tidak dapat diterima untuk file master. Simpan file asli jika pengurangan ukuran tersebut tidak dapat dikembalikan ke semula.
Mengatasi satu folder penuh berisi file PNG yang terlalu besar
Proses folder tersebut dalam satu batch, karena file PNG yang terlalu besar biasanya datang dalam kelompok dari sumber yang sama. Kumpulan dokumentasi, pustaka tangkapan layar, atau hasil ekspor dari alat desain cenderung memiliki masalah yang sama secara keseluruhan.
Masukkan hingga 500 file sekaligus, atau seret arsip ZIP langsung ke dalam alat, lalu atur dimensi dan format sekali untuk seluruh kumpulan file. Semuanya berjalan di dalam browser Anda menggunakan prosesor Anda sendiri, sehingga tangkapan layar internal, desain produk, dan dokumentasi klien tidak pernah dikirim ke server. Tidak ada yang diunggah, sehingga tidak ada kebijakan penyimpanan yang perlu dibaca dan tidak ada data yang tertinggal setelahnya.
Atasi juga sumber masalahnya selain file-file tersebut. Alat penangkap layar yang diatur untuk menyimpan PNG pada resolusi retina penuh akan terus menghasilkan file berukuran 8 MB tanpa henti. Sebagian besar alat penangkap layar memungkinkan pengaturan format default dan faktor skala, dan mengubah keduanya sekali saja akan menghilangkan kebutuhan untuk memproses tangkapan layar lagi setelah setiap pembuatan artikel bantuan.