Rasio Kompresi Gambar: Panduan Kualitas dan Ukuran

Terakhir diperbarui: June 28, 2026

Rasio kompresi gambar memberi tahu Anda seberapa kecil sebuah gambar setelah diekspor. Ini berguna, tetapi hanya jika dipadukan dengan pemeriksaan visual. Rasio 12:1 bisa sangat baik untuk foto latar belakang yang lembut dan tidak dapat diterima untuk tangkapan layar produk dengan teks kecil.

Panduan ini memberikan formula, kisaran kualitas umum, dan daftar periksa penerbitan untuk WebP, JPEG, PNG, dan AVIF. Gunakan ini saat Anda membutuhkan halaman yang lebih kecil tanpa membuat gambar menjadi buram.

Jawaban cepat: apa rasio kompresi gambar yang baik?

Rasio kompresi gambar yang baik adalah pengurangan byte tertinggi yang masih terlihat bersih pada ukuran tampilan akhir. Hitunglah seperti ini: ukuran file asli dibagi dengan ukuran file terkompresi. Gambar 4 MB yang dikompres menjadi 500 KB memiliki rasio 8:1.

Untuk foto web, target praktis seringkali adalah 5:1 hingga 12:1 setelah diubah ukurannya dan diekspor ke WebP atau AVIF. Untuk tangkapan layar, logo, dan gambar UI yang banyak teksnya, rasio yang lebih rendah normal karena tepi tajam dan warna datar membutuhkan perlindungan. PNG lossless atau WebP lossless mungkin hanya menghasilkan 1.2:1 hingga 3:1.

Jangan menilai kompresi hanya berdasarkan rasio. Periksa wajah, tepi produk, gradien, dan teks kecil. Jika pengguna dapat melihat pemblokiran (blocking), ringing, smearing, atau banding, maka rasionya terlalu agresif meskipun ukuran file terlihat menarik.

Bagaimana cara menghitung rasio kompresi gambar?

Gunakan ukuran byte asli dan ukuran byte akhir setelah semua langkah penerbitan nyata: potong (crop), ubah ukuran (resize), penghapusan metadata, konversi format, dan pengaturan kualitas. Jika Anda menghitung sebelum mengubah ukuran, angkanya biasanya menyesatkan.

Gunakan hitungan byte yang tepat saat Anda menyetel build pipeline. Gunakan KB atau MB yang dibulatkan saat Anda mendokumentasikan pengaturan editorial. Keputusan tidak berubah: semakin kecil itu berguna hanya selama gambar masih mengomunikasikan fungsinya.

Panduan gambar Google menekankan kecepatan dan kualitas: gambar sering kali mendorong bobot halaman, tetapi gambar yang buram atau tidak jelas buruk bagi pengguna dan pratinjau pencarian. Ini juga merekomendasikan elemen gambar HTML yang dapat di-crawl, teks alt deskriptif, dan format yang didukung seperti JPEG, PNG, WebP, SVG, dan AVIF di Google Images best practices.

Rasio apa yang harus Anda gunakan untuk WebP, JPEG, PNG, dan AVIF?

Rasio yang tepat tergantung pada konten gambar. Foto dikompresi keras karena perubahan tekstur kecil sulit diperhatikan. Tangkapan layar dan diagram dikompresi lebih sedikit karena teks, garis, dan batas UI membuat artefak terlihat jelas.

Panduan format gambar MDN mencatat bahwa WebP bisa lossy atau lossless, sementara WebP lossy dan WebP lossless menggunakan representasi internal yang berbeda. Itulah sebabnya tidak ada "rasio WebP" tunggal; pengaturan yang benar tergantung pada apakah konten dapat mentoleransi kehilangan data. Lihat image file type and format guide MDN untuk perilaku format.

Untuk artikel ini, saya mengenkode empat grafis 1400 by 788 secara lokal dengan ImageMagick dan WebP. File yang diterbitkan pada 23 KB, 28 KB, 35 KB, dan 40 KB. Itu sangat kecil karena asetnya adalah diagram bersih, bukan foto kamera; gunakan angka-angka tersebut sebagai bukti bahwa grafis datar terkompresi berbeda dari detail fotografi.

Untuk pertukaran format yang lebih luas, bandingkan artikel ini dengan AVIF vs WebP Comparison. Jika Anda membutuhkan rincian algoritma di balik artefak, baca How Image Compression Works.

Mengapa pengaturan kualitas berhenti menghemat banyak setelah titik tertentu?

Sebagian besar encoder memiliki kemenangan awal yang curam dan pertukaran akhir yang menyakitkan. Beralih dari file kamera asli ke WebP q80 mungkin menghilangkan banyak data tak terlihat. Beralih dari q70 ke q55 mungkin menghemat byte lebih sedikit sambil membuat artefak lebih mudah diperhatikan.

Efek praktisnya sederhana: kurva ukuran menjadi datar sementara kurva kualitas terus menurun. Itulah mengapa WebP q75-85 adalah rentang awal umum untuk foto artikel dan produk. Ini bukan aturan untuk setiap file; ini adalah tes pertama yang baik sebelum Anda memeriksa hasilnya.

Gunakan urutan ini saat menyetel kualitas:

1. Ubah ukurannya ke lebar render terbesar yang sebenarnya Anda layani.
2. Ekspor satu WebP pada q85, satu pada q80, dan satu pada q75.
3. Buka di samping aslinya pada ukuran tampilan yang dimaksudkan.
4. Periksa wajah, teks, tepi produk, bayangan, dan gradien halus.
5. Pilih versi terkecil yang tidak terlihat terdegradasi.
6. Catat rasio yang dihasilkan untuk jenis konten tersebut.

Jika gambar kemungkinan akan menjadi elemen Largest Contentful Paint (LCP), kompresi hanyalah sebagian dari perbaikannya. Panduan web.dev LCP merekomendasikan memprioritaskan gambar LCP yang mungkin dengan fetchpriority="high" dan memeriksa penemuan sumber daya di network waterfall di Optimize Largest Contentful Paint.

Bagaimana Anda harus membandingkan rasio kompresi di berbagai format?

Bandingkan format pada kualitas visual yang cocok, bukan angka penggeser (slider) yang cocok. JPEG q82, WebP q78, dan AVIF q55 semuanya dapat menjadi keluaran yang wajar dari sumber yang sama. Angka-angka tersebut adalah kontrol encoder, bukan skor kualitas universal.

Di sinilah tim sering salah membaca rasio. JPEG pada 5.7:1 mungkin lebih buruk daripada WebP pada 8:1 jika keduanya terlihat sama di layar. WebP lossless pada 2:1 mungkin lebih baik daripada WebP lossy pada 10:1 jika asetnya adalah tangkapan layar tabel harga.

Untuk pekerjaan batch, hasilkan beberapa keluaran dari master yang sama dan pertahankan keputusan tersebut dalam nama file atau log build. Batch Resize Guide mencakup alur kerja ubah ukuran-dulu, dan Complete Image Optimization Checklist memberikan pemeriksaan pra-publikasi akhir.

Kapan rasio kompresi tinggi merupakan tanda buruk?

Rasio yang tinggi adalah tanda peringatan ketika gambar memiliki detail yang diperiksa orang. Pemilik toko memperhatikan tekstur produk. Desainer memperhatikan jenis huruf yang melunak. Pembeli memperhatikan tepi perhiasan yang keruh. Dalam kasus-kasus tersebut, "file terkecil" dapat menelan biaya lebih dari penghematannya.

Rasio tinggi memerlukan pemeriksaan ekstra ketika gambar mencakup:

• Label produk, teks kemasan, bahan, atau nomor seri.
• Tangkapan layar UI, dasbor, kode, atau tabel harga.
• Wajah, tekstur kulit, rambut, perhiasan, kain, atau makanan.
• Gradien halus, langit, bayangan, neon, atau latar belakang gelap.
• Garis tipis, ikon, tepi transparan, atau tanda merek.
• Gambar yang akan diperbesar (zoom), dipotong (crop), atau digunakan kembali dalam iklan.

Untuk e-commerce, gunakan pemeriksaan yang lebih ketat daripada yang Anda lakukan untuk gambar blog dekoratif. Thumbnail kategori dapat mentoleransi kehilangan data lebih banyak daripada gambar produk utama. Jika master yang sama memberi makan keduanya, buat ekspor terpisah alih-alih memaksa satu rasio untuk melayani setiap slot.

Alur kerja apa yang memberikan ukuran terbaik tanpa kehilangan kualitas visual?

Gunakan rasio kompresi sebagai pengukuran, bukan sebagai pengaturan pertama. Kualitas keluaran lebih bergantung pada sumber, potong (crop), dimensi piksel, dan pilihan format daripada pada angka rasio akhir.

Gunakan urutan penerbitan ini:

1. Simpan file master yang belum di-encode berulang kali.
2. Potong untuk kasus penggunaan akhir sebelum mengubah ukuran.
3. Ubah ukurannya ke lebar render terbesar, dengan varian responsif jika diperlukan.
4. Pilih format berdasarkan konten: WebP atau AVIF untuk foto, lossless untuk grafis yang banyak teks.
5. Ekspor dua atau tiga kandidat kualitas.
6. Hapus metadata dari salinan publik kecuali secara hukum atau editorial diwajibkan.
7. Bandingkan kandidat pada ukuran render di desktop dan seluler.
8. Periksa gambar LCP kemungkinan secara terpisah dari gambar below-fold.
9. Publikasikan ke URL CDN yang stabil dan verifikasi HTTP 200.
10. Catat byte akhir, rasio, dan pengaturan sehingga batch berikutnya lebih cepat.

Jika Anda menargetkan anggaran ukuran yang ketat, mulailah dengan alur kerja di Compress Image to 100KB atau Compress Image to 200KB. Untuk halaman seluler, padukan keputusan rasio dengan Mobile Image Optimization Guide.

Bagaimana rasio kompresi dan SEO saling berhubungan?

Rasio kompresi membantu SEO secara tidak langsung. Gambar yang lebih kecil mengurangi ukuran transfer, yang dapat meningkatkan kinerja pemuatan, terutama ketika gambar terkompresi juga diukur dengan benar. Tetapi mesin pencari dan pengguna masih membutuhkan gambar yang berguna, URL yang stabil, teks di sekitarnya yang mudah dibaca, dan alt text deskriptif.

Jangan mengirimkan gambar kecil yang terlihat rusak di pratinjau pencarian atau kartu sosial. Google secara eksplisit merekomendasikan memilih gambar representatif untuk metadata dan menghindari gambar generik untuk data terstruktur atau og:image ketika gambar yang lebih relevan ada. Gambar harus cepat dan jelas.

Untuk posting blog, itu biasanya berarti:

• Gunakan sampul WebP unik di frontmatter dan data Open Graph.
• Jaga agar sampul tetap dapat dibaca pada ukuran pratinjau sosial.
• Letakkan gambar di dekat teks yang menjelaskan intinya.
• Gunakan alt text deskriptif, bukan pengisian kata kunci (keyword stuffing).
• Sajikan aset akhir dari URL CDN yang dapat di-crawl.
• Hindari mengganti URL gambar terindeks kecuali asetnya salah.

Rasio hanyalah satu baris dalam catatan penerbitan. Itu harus berada di samping lebar render, format, pengaturan kualitas, ukuran byte, dan catatan visual.

Daftar periksa rasio kompresi

Sebelum menerbitkan, jalankan tinjauan singkat ini:

Target yang berguna bukanlah "kompresi maksimum." Ini adalah pengaturan berulang yang menjaga halaman tetap ringan dan gambar terpercaya. Jika ragu, gunakan file yang lebih kecil hanya setelah pemeriksaan visual lolos.