Nisbah Mampatan Imej: Panduan Kualiti dan Saiz

Dikemaskini kali terakhir: June 28, 2026

Nisbah mampatan imej memberitahu anda berapa kecil sesebuah imej selepas dieksport. Ia berguna, tetapi hanya apabila anda menggabungkan nombor itu dengan semakan visual. Nisbah 12:1 boleh menjadi sangat baik untuk foto latar belakang yang lembut dan tidak boleh diterima untuk tangkapan skrin produk dengan teks kecil.

Panduan ini memberikan anda formula, julat kualiti biasa, dan senarai semak penerbitan untuk WebP, JPEG, PNG, dan AVIF. Gunakannya apabila anda memerlukan halaman yang lebih kecil tanpa menjadikan imej kelihatan kabur.

Jawapan ringkas: apakah nisbah mampatan imej yang baik?

Nisbah mampatan imej yang baik ialah pengurangan bait tertinggi yang masih kelihatan bersih pada saiz paparan akhir. Kirakan ia seperti ini: saiz fail asal dibahagi dengan saiz fail termampat. Imej 4 MB yang dimampatkan kepada 500 KB mempunyai nisbah 8:1.

Untuk foto web, sasaran praktikal selalunya ialah 5:1 hingga 12:1 selepas mengubah saiz dan mengeksport ke WebP atau AVIF. Bagi tangkapan skrin yang banyak teks, logo, dan imej UI, nisbah yang lebih rendah adalah normal kerana tepi tajam dan warna rata memerlukan perlindungan. PNG tanpa kehilangan (lossless) atau WebP tanpa kehilangan mungkin hanya menghasilkan 1.2:1 hingga 3:1.

Jangan menilai mampatan hanya berdasarkan nisbah sahaja. Periksa wajah, tepi produk, gradien, dan teks kecil. Jika pengguna boleh melihat blocking, ringing, smearing, atau banding, nisbah itu terlalu agresif walaupun saiz fail kelihatan menarik.

Bagaimana cara mengira nisbah mampatan imej?

Gunakan saiz bait asal dan saiz bait akhir selepas semua langkah penerbitan sebenar: memotong (crop), mengubah saiz (resize), menanggalkan metadata, penukaran format, dan penetapan kualiti. Jika anda mengira sebelum mengubah saiz, nombor tersebut biasanya mengelirukan.

Gunakan kiraan bait yang tepat apabila anda menyelaraskan paip binaan (build pipeline). Gunakan KB atau MB yang dibundarkan apabila anda mendokumentasikan tetapan editorial. Keputusan ini tidak berubah: lebih kecil hanya berguna selagi imej itu masih menyampaikan fungsinya.

Panduan imej Google menekankan kelajuan dan kualiti: imej sering mendorong berat halaman (page weight), tetapi imej yang kabur atau tidak jelas adalah buruk untuk pengguna dan pratonton carian. Ia juga mengesyorkan elemen imej HTML yang boleh diakses oleh bot, teks alt yang deskriptif, dan format sokongan seperti JPEG, PNG, WebP, SVG, dan AVIF dalam Google Images best practices.

Apa nisbah yang perlu anda gunakan untuk WebP, JPEG, PNG, dan AVIF?

Nisbah yang tepat bergantung pada kandungan imej. Foto mengompres dengan ketat kerana perubahan tekstur kecil sukar dikesan. Tangkapan skrin dan rajah mengompres kurang kerana teks, garis, dan sempadan UI menjadikan artifak itu jelas.

Panduan format imej MDN menyatakan bahawa WebP boleh menjadi lossy atau lossless, manakala WebP lossy dan WebP lossless menggunakan representasi dalaman yang berbeza. Itulah sebabnya "nisbah WebP" tunggal tidak wujud; tetapan yang betul bergantung pada sama ada kandungan itu boleh menoleransi kehilangan data. Lihat [panduan jenis dan format fail imej] MDN (https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) untuk tingkah laku format.

Untuk artikel ini, saya menyulitkan empat grafik 1400 by 788 secara tempatan dengan ImageMagick dan WebP. Fail-fail itu diterbitkan pada 23 KB, 28 KB, 35 KB, dan 40 KB. Angka-angka itu sangat kecil kerana aset tersebut adalah rajah yang bersih, bukan foto kamera; gunakan nombor ini sebagai bukti bahawa grafik rata mengompres secara berbeza daripada perincian fotografi.

Untuk pertukaran format yang lebih luas, bandingkan artikel ini dengan AVIF vs WebP Comparison. Jika anda memerlukan butiran algoritma di sebalik artifak, baca How Image Compression Works.

Mengapa tetapan kualiti berhenti menjimatkan banyak selepas satu titik tertentu?

Kebanyakan encoder mempunyai keuntungan awal yang curam dan pertukaran akhir yang menyakitkan. Beralih dari fail kamera asal ke WebP q80 mungkin menghilangkan banyak data tidak kelihatan. Beralih dari q70 ke q55 mungkin menjimatkan bait yang lebih sedikit sambil menjadikan artifak lebih mudah dilihat.

Kesan praktikalnya ringkas: lengkungan saiz menjadi rata manakala lengkungan kualiti terus menurun. Itulah sebab WebP q75-85 adalah julat permulaan biasa untuk foto artikel dan produk. Ini bukan peraturan untuk setiap fail; ia adalah ujian pertama yang baik sebelum anda memeriksa hasilnya.

Gunakan susunan ini apabila menyelaraskan kualiti:

1. Resize to the largest rendered width you actually serve.
2. Export one WebP at q85, one at q80, and one at q75.
3. Open them beside the original at the intended display size.
4. Check faces, text, product edges, shadows, and smooth gradients.
5. Pick the smallest version that does not look degraded.
6. Record the resulting ratio for that content type.

Jika imej berkemungkinan menjadi elemen Largest Contentful Paint, pemampatan hanyalah sebahagian daripada penyelesaiannya. Panduan LCP web.dev mengesyorkan untuk memberi keutamaan kepada imej LCP yang mungkin dengan fetchpriority="high" dan menyemak penemuan sumber dalam air terjun rangkaian di Optimize Largest Contentful Paint.

Bagaimana anda patut membandingkan nisbah mampatan merentasi format?

Bandingkan format pada kualiti visual yang sepadan, bukan nombor slider yang sepadan. JPEG q82, WebP q78, dan AVIF q55 semuanya boleh menjadi output yang munasabah daripada sumber yang sama. Nombor-nombor ini adalah kawalan pengekod (encoder controls), bukan skor kualiti universal.

Di sinilah pasukan sering salah membaca nisbah. JPEG pada 5.7:1 mungkin lebih teruk daripada WebP pada 8:1 jika kedua-duanya kelihatan sama di skrin. WebP tanpa kehilangan data (lossless) pada 2:1 mungkin lebih baik daripada WebP dengan kehilangan data (lossy) pada 10:1 jika aset itu adalah tangkapan skrin jadual harga.

Untuk kerja kelompok (batch work), hasilkan pelbagai output daripada master yang sama dan kekalkan keputusan tersebut dalam nama fail atau log binaan (build logs). Batch Resize Guide meliputi aliran kerja ubah saiz-dahulu, dan Complete Image Optimization Checklist memberikan semakan akhir pra-terbit.

Kapan nisbah mampatan yang tinggi adalah petanda buruk?

Nisbah yang tinggi adalah petanda amaran apabila imej mempunyai perincian yang diperiksa oleh orang. Pemilik kedai memerhatikan tekstur produk. Pereka bentuk memerhatikan jenis huruf yang lembut. Pembeli memerhatikan tepi perhiasan yang kotor. Dalam kes-kes ini, "fail terkecil" boleh menelan kos lebih daripada penjimatan yang diperoleh.

Nisbah tinggi memerlukan pemeriksaan tambahan apabila imej merangkumi:

• Label produk, teks pembungkusan, bahan-bahan, atau nombor siri.
• Tangkapan skrin UI, papan pemuka, kod, atau jadual harga.
• Wajah, tekstur kulit, rambut, perhiasan, fabrik, atau makanan.
• Gradien licin, langit, bayangan, neon, atau latar belakang gelap.
• Garisan nipis, ikon, tepi lutsinar, atau tanda jenama.
• Imej yang akan dizum, dipotong, atau digunakan semula dalam iklan.

Untuk e-dagang, gunakan pemeriksaan yang lebih ketat daripada yang anda lakukan untuk imej blog hiasan. Imej kecil kategori boleh menanggung kehilangan lebih banyak berbanding imej produk utama. Jika sumber induk yang sama membekalkan kedua-duanya, cipta pengeksportan berasingan dan jangan paksa satu nisbah untuk memenuhi setiap slot.

Aliran kerja apa yang memberikan saiz terbaik tanpa kehilangan kualiti yang kelihatan?

Gunakan nisbah mampatan sebagai pengukuran, bukan sebagai tetapan pertama. Kualiti keluaran bergantung lebih kepada sumber, pemotongan (crop), dimensi piksel, dan pilihan format daripada nombor nisbah akhir.

Gunakan urutan penerbitan ini:

1. Kekalkan fail induk yang belum disulitkan semula berulang kali.
2. Potong (Crop) untuk kes penggunaan akhir sebelum mengubah saiz.
3. Ubah saiz kepada lebar yang dirender terbesar, dengan varian responsif jika perlu.
4. Pilih format mengikut kandungan: WebP atau AVIF untuk foto, tanpa kehilangan (lossless) untuk grafik berat teks.
5. Eksport dua atau tiga calon kualiti.
6. Buang metadata daripada salinan awam melainkan ia diperlukan secara undang-undang atau editorial.
7. Bandingkan calon pada saiz yang dirender di desktop dan mudah alih (mobile).
8. Semak imej LCP yang mungkin secara berasingan daripada imej bawah lipatan (below-fold).
9. Terbitkan ke URL CDN yang stabil dan sahkan HTTP 200.
10. Rekod bait akhir, nisbah, dan tetapan supaya kelompok seterusnya lebih pantas.

Jika anda menyasarkan bajet saiz yang ketat, mulakan dengan aliran kerja di Compress Image to 100KB atau Compress Image to 200KB. Untuk halaman mudah alih (mobile), padankan keputusan nisbah dengan Mobile Image Optimization Guide.

Bagaimana nisbah mampatan dan SEO saling berkaitan?

Nisbah mampatan membantu SEO secara tidak langsung. Imej yang lebih kecil mengurangkan saiz pemindahan, yang boleh meningkatkan prestasi muat, terutamanya apabila imej termampat itu juga bersaiz dengan betul. Tetapi enjin carian dan pengguna masih memerlukan imej yang berguna, URL yang stabil, teks sekeliling yang mudah dibaca, dan alt text yang deskriptif.

Jangan hantar imej kecil yang kelihatan rosak dalam pratonton carian atau kad sosial. Google secara eksplisit mengesyorkan memilih imej representatif untuk metadata dan mengelakkan imej generik untuk structured data atau og:image apabila imej yang lebih relevan wujud. Imej itu harus pantas dan jelas.

Untuk catatan blog, ini biasanya bermaksud:

• Gunakan WebP unik dalam frontmatter dan data Open Graph.
• Pastikan kulit boleh dibaca pada saiz pratonton sosial.
• Letakkan imej berhampiran teks yang menerangkan intipati utama.
• Gunakan alt text deskriptif, bukan keyword stuffing.
• Sediakan aset akhir daripada URL CDN yang boleh di-crawl.
• Elakkan menggantikan URL imej berindeks melainkan aset itu salah.

Nisbah ini adalah satu baris dalam rekod penerbitan. Ia harus diletakkan di sebelah lebar yang dirender, format, tetapan kualiti, saiz bait, dan nota visual.

Senarai Semak Nisbah Mampatan

Sebelum menerbitkan, jalankan semakan ringkas ini:

Sasaran berguna bukanlah "mampatan maksimum." Ia adalah tetapan yang boleh diulang yang memastikan halaman ringan dan imej dipercayai. Apabila ragu-ragu, gunakan fail yang lebih kecil hanya selepas semakan visual lulus.