Cara Mengurangi Ukuran Berkas Gambar Tanpa Kehilangan Kualitas yang Terlihat
Kebanyakan gambar terlalu besar karena satu alasan membosankan: dimensi pikselnya tiga kali lebih besar daripada tempat mana pun gambar ditampilkan. Perbaiki itu dahulu dan berkas biasanya turun 80 hingga 90 persen sebelum menyentuh penggeser kualitas. Ada tiga pengaturan dengan urutan prioritas jelas, dan menggunakannya di luar urutan menghasilkan gambar tampak lembek tetapi tetap terlalu besar.
Tiga pengaturan sesuai urutan
- Dimensi. Jumlah piksel dalam gambar. Memperkecil lebar dan tinggi menjadi separuh menghapus tiga perempat piksel, dan ukuran berkas mengikuti dengan dekat.
- Format. Cara piksel dikodekan. Pilihan salah — foto disimpan sebagai PNG, logo disimpan sebagai JPG — dapat memerlukan beberapa kali byte yang sebenarnya dibutuhkan.
- Pengaturan kualitas. Jumlah detail yang dibuang pengode lossy. Berguna, tetapi paling kecil pengaruhnya di antara tiga pengaturan dan satu-satunya yang benar-benar dapat merusak tampilan gambar.
Urutan penting karena pengaturan saling mengalikan. Foto 4000×3000 sebagai PNG mungkin 12MB. Mengubahnya ke 1200×900 mengurangi menjadi sekitar sepersepuluh. Beralih ke JPG menguranginya lagi dengan faktor besar. Baru kemudian menurunkan kualitas 95 ke 82 bekerja, dan saat itu hanya memangkas sisa kecil, bukan menutupi masalah yang seharusnya diselesaikan perubahan ukuran.
Melakukannya dalam urutan terbalik menghasilkan hasil terburuk: gambar dipaksa ke kualitas 40 untuk mencapai ukuran target, masih membawa empat kali piksel yang diperlukan, memiliki artefak jelas, dan lebih besar dari seharusnya. Jika gambar tampak buruk setelah kompresi, penyebab umum adalah langkah pertama dilewati.
Pengaturan 1: ubah ukuran sebelum memampatkan
Pilih dimensi target berdasarkan tempat gambar benar-benar ditampilkan, bukan hasil kamera.
| Gunakan | Lebar yang wajar | Catatan |
|---|---|---|
| Gambar hero tanpa margin | 1920–2560 px | Satu tempat ukuran besar dapat dibenarkan |
| Gambar isi artikel | 1200–1600 px | Mencakup layar 2x pada lebar kolom yang umum |
| Gambar mini / kartu | 400–800 px | Sajikan berkas terpisah, jangan skalakan yang besar |
| Avatar | 200–400 px | Persegi, dan biasanya tetap dipangkas |
| Kartu Open Graph | 1200×630 px | Tepat ini; crawler mengharapkannya |
| Lampiran email | 1600–2000 px | Cukup untuk dilihat dan dicetak kecil |
Ada dua pengali yang perlu diingat. Layar berkepadatan tinggi membutuhkan kira-kira dua kali lebar piksel CSS agar hasil tajam — gambar yang ditampilkan selebar 600px sebaiknya memiliki lebar sekitar 1200px dalam file. Di atas 2x, manfaatnya turun drastis: 3x hampir tidak dapat dibedakan dari 2x, tetapi membawa lebih dari dua kali jumlah byte.
Pengaturan 2: cocokkan format dengan konten
Versi singkat keputusan ini, yang dibahas panjang lebar dalam panduan perbandingan format:
- Foto → WebP lossy, atau JPG jika kompatibilitas penting. Foto yang disimpan sebagai PNG adalah kesalahan format paling umum dan paling mahal, sering membutuhkan lima hingga sepuluh kali ukuran yang diperlukan.
- Grafis datar, logo, tangkapan layar, seni piksel → PNG, idealnya PNG berpalet. JPG pada gambar datar menghasilkan ringing terlihat di setiap tepi dan file yang lebih besar daripada PNG. WebP lossy juga sering lebih besar daripada PNG berpalet dalam kasus ini.
- Apa pun yang membutuhkan transparansi → PNG, atau WebP lossy jika kontennya fotografis. JPG tidak memiliki saluran alfa dan akan mengisi transparansi dengan warna solid.
Contoh nyata: kartu sosial PNG 606KB diekspor ulang sebagai JPG kualitas 82 menghasilkan 81KB, pengurangan 87% hanya dengan mengubah satu menu. Itu gambar foto dalam format untuk grafis datar. Sebaliknya, mengonversi latar halaman bergradasi lembut dari PNG ke WebP menguranginya sekitar 57% — konten halus tanpa tepian tegas memang paling cocok untuk pengodean lossy.
Pengaturan 3: kualitas, dan batas manfaatnya
Untuk JPG dan WebP lossy, kualitas adalah angka dari 0 hingga 100 yang mengendalikan seberapa agresif pengode menguantisasi. Hubungan angka tersebut dengan ukuran berkas sangat tidak linear, dan mengetahui bentuk kurvanya membantu menentukan posisi yang tepat.
| Kualitas | Hasil umum | Kapan menggunakannya |
|---|---|---|
| 100 | Sangat besar, tanpa peningkatan terlihat dibandingkan 90 | Pada dasarnya tidak pernah |
| 90–95 | Besar; secara visual tidak dapat dibedakan dari aslinya | Pengarsipan, cetak, gambar yang diedit ulang |
| 75–85 | Titik optimal; artefak tidak terlihat pada tampilan normal | Hampir semua hal di web |
| 60–70 | Artefak terlihat jika diperhatikan; penghematan tambahan kecil | Gambar mini, batas ukuran ketat |
| Di bawah 50 | Blok jelas dan detail lembek | Ketika batas byte tidak memberi pilihan |
Turun dari 100 ke 90 sering mengurangi berkas menjadi separuh tanpa kehilangan yang terlihat. Turun dari 90 ke 80 mengurangi banyak lagi, tetap tak terlihat pada konten foto. Turun dari 80 ke 70 menghemat jauh lebih sedikit sambil mulai terlihat. Di bawah 60, setiap langkah selanjutnya mengorbankan kualitas terlihat untuk pengurangan yang semakin kecil. Itulah kurva hasil yang makin menurun, dan itulah alasan kualitas 80 menjadi default yang sangat umum: posisinya tepat pada titik keseimbangan.
Konten menggeser titik kompromi. Foto ramai dan terperinci menyembunyikan artefak dengan baik dan menoleransi 70. Gambar dengan area halus luas — langit, latar studio, gradasi — lebih cepat menunjukkan pita warna dan memerlukan 85. Apa pun yang berisi teks atau tepi tajam seharusnya sama sekali tidak menggunakan format lossy.
Kapan PNG memerlukan kuantisasi palet
PNG tidak memiliki penggeser kualitas, tetapi memiliki pengaturan yang jarang digunakan: mengurangi jumlah warna. PNG truecolor menyimpan empat byte per piksel; PNG berpalet menyimpan indeks satu byte ke tabel hingga 256 warna. Untuk gambar yang benar-benar memakai sedikit warna, versi palet beberapa kali lebih kecil dan, jika semua warna muat dalam tabel, identik secara matematis.
Kandidat yang baik:
- Logo, ikon, dan ilustrasi datar dengan sedikit warna.
- Seni piksel, yang biasanya sejak awal dibuat dengan palet terbatas.
- Tangkapan layar UI, yang sebagian besar terdiri dari area berwarna rata dan teks.
- Bagan dan diagram.
Kandidat buruk: foto, apa pun dengan gradasi halus, dan gambar bertepi antialias lembut pada banyak latar berbeda. Kuantisasi menimbulkan pita warna, dan penguantisasi baik melakukan dithering untuk menyamarkannya — menambah noise yang sulit dipampatkan dan sebagian membatalkan penghematan.
Alfa perlu diperhatikan di sini. PNG berpalet mendukung transparansi per entri palet, sehingga tepi antialias yang sebagian transparan memakai slot palet untuk setiap tingkat campuran. Ikon dengan bayangan lembut dapat menghabiskan sebagian besar dari 256 entri untuk gradasi bayangan. Periksa hasil pada latar yang kontras sebelum merilis.
Hapus metadata
Gambar kamera dan ponsel membawa blok EXIF: pengaturan eksposur, model lensa, cap waktu, gambar mini, dan sering kali koordinat GPS. Alat desain menambahkan bloknya sendiri. Ukurannya biasanya puluhan kilobyte dan terkadang jauh lebih besar jika profil warna atau gambar mini pratinjau tertanam.
Pada foto 2MB, hal ini tidak berarti. Pada gambar mini 40KB, EXIF 15KB lebih dari sepertiga berkas. Ada alasan kedua selain ukuran: koordinat GPS dalam foto publik memberi tahu semua orang tempat pengambilan, masalah privasi yang sering disadari dengan cara menyakitkan.
Dua hal yang sebaiknya sengaja dipertahankan: profil warna jika gambar belum menggunakan sRGB (menghapusnya dapat menggeser warna), dan kolom hak cipta jika Anda mengandalkannya. Perhatikan bahwa alat berbasis browser yang mengodekan ulang melalui kanvas otomatis menghapus metadata sebagai efek samping, karena kanvas hanya menyimpan piksel.
Resep untuk target umum
Di bawah batas lampiran email 25MB
Biasanya berupa batch foto ponsel. Ubah ukuran masing-masing menjadi 2000px pada sisi panjang, ekspor JPG pada kualitas 85. Foto 12 megapiksel umumnya menjadi sekitar 500KB, sehingga empat puluh foto muat. Jika Anda perlu lebih banyak, turunkan menjadi 1600px sebelum menurunkan kualitas — penerima melihatnya di layar, bukan mencetak poster.
Di bawah batas formulir atau unggahan 100KB
Umum untuk foto profil, unggahan dokumen, dan lamaran kerja. Kerjakan dari atas ke bawah: ubah ukuran ke ukuran tampilan maksimum (sering kali 800px atau kurang), ekspor JPG pada kualitas 80, lalu periksa. Jika masih melebihi batas, turunkan ke 70, lalu kurangi ukuran lagi. Hindari kualitas di bawah 60 — gambar 600px pada kualitas 75 terlihat jauh lebih baik daripada gambar 1200px pada kualitas 45, dengan ukuran berkas sama.
Gambar halaman web
Usahakan kurang dari 200KB per gambar konten dan kurang dari 500KB untuk gambar hero. Sajikan beberapa ukuran melalui srcset agar ponsel tidak mengunduh versi desktop. Gunakan lazy-load untuk apa pun di bawah area pertama yang terlihat. Periksa juga permintaan halaman sebenarnya — kegagalan umum adalah CMS menyajikan file asli 4000px dengan lebar CSS 600px, ketika masalahnya sepenuhnya pengaturan templat, bukan file gambar.
Anggaran tekstur game
Aturan berbeda berlaku karena yang penting adalah memori GPU, bukan ukuran unduhan. Memori GPU ditentukan oleh ukuran dan format tekstur, bukan ukuran PNG terkompresi pada disk — PNG yang sangat dioptimalkan dan PNG besar menempati VRAM sama setelah dimuat. Pertahankan karya sumber lossless, gunakan ukuran tekstur pangkat dua jika alur Anda membutuhkannya, dan biarkan pengaturan impor engine menangani kompresi GPU. Optimasi PNG itu sendiri hanya memengaruhi ukuran pemasangan.
Pertanyaan yang sering diajukan
Apa sebenarnya arti "tanpa kehilangan kualitas yang terlihat"?
Bukan piksel identik — itu akan meniadakan format lossy sepenuhnya. Artinya tidak ada perbedaan yang terlihat pada ukuran tampilan gambar dalam kondisi normal tanpa berganti-ganti versi. Pada kualitas 80 untuk foto, alat perbedaan dapat menemukan piksel berubah, tetapi Anda tidak melihatnya secara langsung.
Haruskah saya mengubah ukuran dan memampatkan dalam satu atau dua langkah?
Satu langkah lebih baik jika didukung alat karena menghindari pengodean perantara. Jika harus dua langkah, buat perantaranya lossless — ubah ukuran dan simpan sebagai PNG, lalu kompres ke JPG atau WebP. Mengubah ukuran JPG lalu menyimpan kembali sebagai JPG menumpuk artefak.
Apakah pengoptimal PNG lossless benar-benar membantu?
Sedikit. Alat yang menjalankan ulang kompresi dengan parameter lebih baik biasanya menghemat 5 hingga 20 persen dengan piksel identik bit demi bit. Nyata tetapi kecil dibandingkan mengubah ukuran atau format — gunakan sebagai tahap akhir, bukan strategi utama.
Apakah kompresi berbasis peramban sebagus alat desktop?
Untuk mengubah ukuran dan mengodekan ulang ke JPG atau WebP, peramban menggunakan codec dasar yang sama dan hasilnya sebanding. Alat khusus lebih unggul pada kuantisasi PNG tingkat lanjut dan pengode khusus dengan lebih banyak pengaturan. Peramban memiliki satu keunggulan nyata: gambar tidak pernah meninggalkan perangkat, penting ketika konten bukan milik Anda untuk diunggah.
Tiga pengaturan dalam satu tempat
Kompresor Gambar menjadikan panduan ini dapat digunakan: tarik penggeser kualitas dan amati ukuran, atau tetapkan target dan biarkan mencari kualitas di bawah batas — mengurangi dimensi jika kualitas saja tidak cukup. Perlu format berbeda, bukan berkas kecil? Konverter Gambar menangani PNG, JPG, dan WebP ke kedua arah. Keduanya sepenuhnya di peramban.
Buka Kompresor GambarBuka Konverter Gambar