Cara memampatkan imej untuk laman web

Dalam Web Almanac 2025 oleh HTTP Archive, saiz median halaman utama ialah 2.56 MB pada peranti mudah alih, dan 911 KB daripadanya ialah imej. Pada desktop, halaman median membawa 1,058 KB imej. Imej juga yang paling lama ditunggu oleh pelawat: elemen terbesar pada skrin semasa halaman dimuatkan, iaitu Largest Contentful Paint (LCP), ialah imej pada 76% halaman mudah alih.

Imej yang lebih ringan dimuatkan lebih cepat pada sambungan perlahan, menggunakan kurang data mudah alih pelawat anda dan mengurangkan kos lebar jalur anda. LCP ialah salah satu Core Web Vitals Google, iaitu ukuran yang digunakan oleh Google untuk menilai pengalaman halaman, jadi kesan imej yang berat bukan sekadar beberapa saat menunggu.

Pemampatan tidak dapat menyelamatkan imej yang jauh lebih besar daripada ruang yang diisinya. Foto kamera selebar 4000 piksel yang dipaparkan dalam lajur 800 piksel membawa 25 kali lebih banyak piksel daripada yang boleh digunakan oleh halaman. Menurut web.dev, menghantar imej bersaiz desktop ke telefon boleh menggunakan 2–4 kali lebih banyak data daripada yang diperlukan.

• Sepanduk lebar penuh: kira-kira 1600–2000 piksel lebar sudah memadai untuk kebanyakan susun atur.
• Imej dalam lajur artikel: kira-kira dua kali lebar lajur, supaya kekal tajam pada skrin berketumpatan tinggi (contohnya, 1400 piksel untuk lajur 700 piksel).
• Imej kecil (thumbnail) dan avatar: dua kali saiz paparannya, selalunya 200–400 piksel.

Format menentukan sejauh mana sesuatu imej dapat disimpan dengan cekap. Ringkasnya: foto sesuai dengan JPG atau WebP; logo, tangkapan skrin dan apa-apa sahaja yang mempunyai ketelusan sesuai dengan PNG atau WebP. Perbandingan JPG, PNG dan WebP kami menerangkan bila setiap satu lebih baik.

Kira-kira 97% pelayar yang digunakan memaparkan WebP, dan saiz failnya selalunya jauh lebih kecil. Untuk mencubanya, tukar dengan JPG kepada WebP atau PNG kepada WebP dan bandingkan hasilnya dengan fail asal: fail yang ditukar tidak semestinya lebih kecil, terutamanya bagi grafik ringkas.

Pemampatan membuang data yang tidak mungkin disedari oleh mata. Di alat mampat imej Bitinz, anda boleh melepaskan sekelompok fail JPG, PNG atau WebP dan memilih salah satu daripada tiga tahap:

• Pantas: kelajuan dahulu, untuk kelompok besar.
• Seimbang: tahap lalai, dan sesuai untuk kebanyakan imej laman web.
• Terbaik: mengambil masa sedikit lebih lama untuk fail yang lebih kecil; berbaloi untuk imej yang muncul pada setiap halaman, seperti sepanduk dan latar belakang.

Apabila anda mengekalkan format, Bitinz tidak akan memulangkan fail yang lebih besar daripada fail yang anda muat naik. Bandingkan hasilnya dengan fail asal pada saiz penuh, terutamanya imej yang mengandungi teks halus atau gradien yang licin, kemudian muat turun imej yang memuaskan hati anda.

Imej yang dimampatkan dengan baik masih boleh melambatkan halaman jika dimuatkan pada masa yang salah atau dalam saiz yang salah. Beberapa atribut HTML sudah menyelesaikan sebahagian besar masalah ini:

• Tetapkan width dan height pada setiap imej, supaya pelayar boleh menempah ruang dan susun atur tidak melompat semasa imej dimuatkan.
• Tambah loading="lazy" pada imej di bahagian bawah halaman, supaya imej itu hanya dimuatkan apabila pelawat menatal berhampirannya.
• Jangan sekali-kali gunakan pemuatan tertunda (lazy loading) untuk imej utama di bahagian atas halaman. Sebaliknya, web.dev mengesyorkan fetchpriority="high" untuk imej itu, pada tidak lebih daripada satu atau dua imej.
• Gunakan srcset dan sizes untuk menawarkan beberapa lebar bagi imej yang sama, supaya telefon memuat turun fail yang lebih kecil berbanding skrin besar.
• Sajikan imej dengan tempoh cache yang panjang, melalui CDN jika anda ada, supaya pelawat yang kembali tidak perlu memuat turunnya semula.

Uji halaman dengan PageSpeed Insights atau panel Lighthouse dalam Chrome. Sejak Lighthouse 13, semakan imej dikumpulkan dalam satu cadangan (insight), “Improve image delivery”, yang menyenaraikan imej yang boleh dimampatkan lagi, disajikan dalam format moden atau dikecilkan. Imej yang akan menjimatkan kurang daripada 4 KiB tidak disenaraikan, jadi senarai yang pendek ialah petanda baik.

Kemudian lihat sendiri halaman itu pada telefon. Tepi yang tajam, teks di dalam imej dan warna kulit ialah bahagian yang paling awal menunjukkan masalah pemampatan.

Jika laman web anda menambah imej setiap hari, contohnya melalui sistem pengurusan kandungan atau kedai dalam talian, mampatkan imej semasa muat naik atau penerbitan dan bukannya secara manual. API pembangun Bitinz menerima imej melalui HTTP dan memulangkan pautan ke fail yang dimampatkan, jadi ia boleh dijalankan daripada skrip atau proses binaan. Setiap akaun mempunyai kuota bulanan percuma.

1. 01Ubah saiz setiap imej kepada kira-kira dua kali saiz paparannya.
2. 02Gunakan JPG atau WebP untuk foto, dan PNG atau WebP untuk grafik dan ketelusan.
3. 03Mampatkan pada tahap Seimbang, dan cuba Terbaik untuk imej yang paling besar.
4. 04Bandingkan hasilnya dengan fail asal sebelum menggantikannya.
5. 05Tetapkan width dan height, gunakan pemuatan tertunda untuk imej yang tidak kelihatan pada skrin pertama, dan jangan sekali-kali tangguhkan pemuatan imej utama.
6. 06Semak halaman sekali lagi dalam PageSpeed Insights.

Mahu memuat naik imej ke tempat selain laman web anda sendiri? Setiap platform mempunyai peraturannya sendiri: lihat keperluan saiz imej untuk e-mel dan kedai dalam talian.