Apakah saiz fail yang baik untuk imej web?

Kebanyakan imej seharusnya kurang daripada 200 KB. Imej hero boleh sehingga 300 KB, manakala thumbnail seharusnya di bawah 50 KB.

Format manakah yang terbaik untuk laman web?

WebP adalah pilihan terbaik untuk kebanyakan kes. Gunakan JPG untuk gambar foto jika sokongan pelayar lama diperlukan, dan PNG hanya untuk imej yang memerlukan ketelusan.

Adakah pengoptimuman menjejaskan kualiti imej?

Dengan tetapan yang betul (kualiti 80–85%), perbezaan visual hampir tidak dapat dilihat oleh mata kasar, tetapi saiz fail boleh dikurangkan sehingga 70%.

Apakah itu Core Web Vitals dan bagaimana ia berkaitan dengan imej?

Core Web Vitals adalah metrik prestasi Google yang termasuk LCP (kelajuan imej utama dipaparkan), CLS (kestabilan susun atur), dan FID. Imej yang besar dan lambat menjejaskan semua metrik ini.

Cara Mengoptimumkan Imej untuk Web

Pelajari cara mengoptimumkan imej untuk laman web anda bagi meningkatkan kelajuan muat turun, SEO, dan pengalaman pengguna dengan teknik terbaik.

Cuba alat percuma kami

Tiada pendaftaran, pemprosesan 100% setempat.

Gunakan Optimiser image

Pengoptimuman imej adalah antara langkah paling berkesan untuk meningkatkan prestasi laman web. Imej yang besar dan tidak dioptimumkan boleh melambatkan masa muat turun secara drastik dan menjejaskan pengalaman pengguna.

Imej yang dioptimumkan dengan baik bukan sahaja memuat dengan lebih cepat, malah membantu meningkatkan kedudukan SEO, mengurangkan kos lebar jalur, dan memastikan pelawat kekal lebih lama di laman anda.

Dalam panduan ini, anda akan mempelajari teknik-teknik praktikal untuk mengoptimumkan imej tanpa mengorbankan kualiti visual yang penting.

Isi kandungan

Mengapa Pengoptimuman Imej Penting?

Laman web yang memuat dengan perlahan kehilangan pelawat — kajian menunjukkan bahawa 53% pengguna mudah alih akan meninggalkan laman yang mengambil masa lebih tiga saat untuk dimuatkan. Imej yang berat adalah punca utama masalah ini.

Google mengambil kira kelajuan halaman sebagai faktor penarafan dalam algoritma carian mereka. Core Web Vitals, termasuk Largest Contentful Paint (LCP), sangat dipengaruhi oleh saiz dan format imej yang anda gunakan.

Dengan mengoptimumkan imej, anda bukan sahaja meningkatkan prestasi teknikal, tetapi juga meningkatkan kadar penukaran, mengurangkan kadar lantunan, dan memberikan pengalaman yang lebih baik kepada semua pengguna.

Teknik Pengoptimuman Utama

Saiz semula imej kepada dimensi paparan sebenar adalah langkah pertama yang paling mudah. Jangan muatkan imej 4000px apabila ia hanya akan dipaparkan pada lebar 800px — ini adalah pembaziran lebar jalur yang ketara.

Pilih format fail yang sesuai bergantung pada jenis imej: WebP untuk kebanyakan kes, JPG untuk gambar foto, PNG untuk imej dengan ketelusan. Format AVIF menawarkan pemampatan yang lebih baik tetapi sokongan pelayar masih terhad.

Gunakan alat pemampatan untuk mengurangkan saiz fail tanpa kehilangan kualiti yang ketara. Tetapan kualiti antara 75–85% biasanya memberikan keseimbangan terbaik antara kualiti dan saiz fail.

Saiz Fail Sasaran

Imej hero atau banner: sasarkan antara 100–300 KB. Imej ini terletak di bahagian atas halaman dan sangat mempengaruhi LCP, jadi pengoptimuman adalah kritikal.

Gambar kecil (thumbnail): 10–50 KB sudah mencukupi. Gambar produk e-dagang: 50–150 KB untuk keseimbangan kualiti dan kelajuan.

Jumlah keseluruhan imej pada satu halaman sebaiknya tidak melebihi 1–2 MB. Pantau jumlah ini menggunakan alat seperti Google PageSpeed Insights atau WebPageTest.

Format Moden: WebP dan AVIF

WebP adalah format yang dibangunkan oleh Google dan menawarkan saiz fail 25–35% lebih kecil berbanding JPG pada kualiti yang sama. Hampir semua pelayar moden menyokong WebP, menjadikannya pilihan terbaik untuk kebanyakan laman web.

AVIF adalah format generasi terbaru yang mampu menghasilkan fail 50% lebih kecil daripada JPG. Walaupun sokongannya semakin meluas, pastikan anda menyediakan fallback kepada JPG atau WebP untuk pelayar lama.

Gunakan elemen HTML picture dengan source yang berbeza untuk melayani format terbaik kepada setiap pelayar secara automatik.

Lazy Loading untuk Prestasi Lebih Baik

Lazy loading membolehkan imej dimuatkan hanya apabila ia hampir masuk ke dalam viewport pengguna, bukannya semua sekaligus ketika halaman pertama kali dibuka. Ini mengurangkan masa muat turun awal dengan ketara.

Pelayar moden menyokong lazy loading secara natif menggunakan atribut loading="lazy" pada elemen img. Ini adalah penyelesaian yang mudah dan berkesan tanpa memerlukan JavaScript tambahan.

Jangan gunakan lazy loading untuk imej yang berada di atas lipatan (visible area awal) kerana ini boleh menjejaskan LCP. Gunakan hanya untuk imej yang berada jauh di bawah halaman.

Alat yang disyorkan

Optimumkan imej dalam talian percuma

Optimumkan imej anda untuk web dalam talian secara percuma. Kurangkan saiz fail ...

Kompres imej dalam Tukar imej dalam

Cara melakukannya dalam 3 langkah

Saiz semula imej kepada dimensi paparan sebenar sebelum memuat naik.

Tukar format kepada WebP menggunakan Convertly Picture untuk hasil terbaik.

Mampat imej dengan tetapan kualiti 75–85% untuk keseimbangan optimum.

Tambah atribut loading="lazy" pada semua imej di bawah lipatan halaman.

Uji prestasi menggunakan Google PageSpeed Insights dan perbaiki jika perlu.

Petua pro

Simpan versi asal.
Cuba beberapa tahap kualiti.
Gunakan WebP jika boleh.
Pilih nama fail deskriptif.

Kesalahan umum yang perlu dielakkan

✗Memuat naik gambar kamera dalam resolusi penuh tanpa pensaizanan semula terlebih dahulu.
✗Menggunakan format PNG untuk gambar foto — ini menghasilkan fail yang jauh lebih besar berbanding JPG atau WebP.
✗Melangkau pengoptimuman untuk imej hero kerana ia adalah imej yang paling kritikal dari segi prestasi.

Soalan lazim

Sedia untuk mencuba?

Alat kami percuma, tanpa pendaftaran dan menghormati privasi anda.