Di kebanyakan laman web, imej ialah benda paling berat di halaman, selalunya lebih besar daripada gabungan HTML, CSS, dan JavaScript. Kalau halaman terasa perlahan, imej ialah tempat pertama untuk disemak, dan pembetulannya biasanya cepat.
Tiga teknik menyelesaikan hampir semua kerja: ubah saiz imej kepada saiz yang sebenarnya dipaparkan, mampatkannya, dan sajikan dalam format moden. Digunakan bersama, ia lazimnya mengurangkan berat imej sebanyak 70% atau lebih.
Ubah saiz kepada saiz yang anda benar-benar paparkan
Inilah kesilapan paling biasa dan paling membazir. Foto terus dari kamera mungkin lebar 6000 piksel, tetapi artikel anda memaparkannya dalam lajur selebar 800 piksel. Pelayar memuat turun kesemua enam ribu piksel itu, kemudian membuang kebanyakannya bila mengecilkan imej supaya muat.
Menyajikan imej 6000 piksel dalam slot 800 piksel boleh bermakna memuat turun lima hingga sepuluh kali ganda lebih banyak data daripada yang perlu. Pembetulannya mudah: ubah saiz fail kepada lebih kurang lebar yang akan ditempatinya, tambah sedikit ruang untuk skrin ketumpatan tinggi.
Peraturan praktikal:
- Imej hero selebar penuh: 1600–2000 px lebar sudah memadai.
- Imej dalam artikel: 1000–1400 px.
- Lakaran kecil: 300–500 px.
Gunakan Pengubah Saiz Imej untuk mengecilkan setiap imej sebelum ia sampai ke halaman anda. Ia mengunci nisbah aspek supaya tiada yang meregang.
Mampatkan untuk membuang pembaziran
Sebaik dimensi betul, pemampatan membuang perincian yang mata tak nampak. Untuk foto, kualiti sekitar 75–85% ialah titik manis: fail jatuh mendadak sementara gambar nampak sama. Untuk grafik rata dan tangkapan skrin yang disimpan sebagai PNG, pengurangan bilangan warna (mengkuantum kepada 256 warna) boleh mengecilkan fail kepada sepecahan kecil saiz asalnya.
Pemampat Imej mengendalikan kedua-duanya. Ia mengekod semula JPEG dan WebP mengikut kualiti, mengkuantum PNG, dan menjamin ia takkan sekali-kali menghasilkan fail lebih besar daripada yang anda mulakan. Kalau anda ada segaleri penuh, jalankan sebagai kelompok dan muat turun ZIP.
Bertukar ke format moden
Pilihan format semata-mata boleh mengurangkan saiz fail separuh. Berikut perbandingan pilihan biasa untuk foto.
| Format | Saiz biasa berbanding JPEG | Terbaik untuk |
|---|---|---|
| JPEG | Garis dasar | Sandaran sejagat; foto |
| WebP | ~25–35% lebih kecil | Foto dan grafik; sokongan pelayar luas |
| AVIF | ~50% lebih kecil | Foto yang mementingkan saiz terkecil |
| PNG | Jauh lebih besar untuk foto | Logo, ikon, grafik rata, ketelusan |
WebP ialah pilihan lalai yang selamat pada 2026 — setiap pelayar semasa membacanya dan ia mengatasi JPEG dengan selesa. AVIF lebih kecil lagi tetapi lebih lama untuk dikod dan sokongannya sedikit lebih sempit. Penukar Imej membolehkan anda menyasarkan AVIF dan diam-diam berundur ke WebP bila AVIF bukan padanan yang betul, jadi anda dapat hasil terbaik yang tersedia tanpa meneka.
Satu amaran: jangan guna PNG untuk foto. PNG cemerlang untuk logo, ikon, dan apa-apa yang perlukan ketelusan, tetapi untuk foto ia boleh beberapa kali lebih besar daripada WebP pada kualiti yang sama.
Satukan semuanya
Talian paip yang boleh diharap untuk mana-mana imej yang menuju ke web:
- Ubah saiz kepada lebar paparan (tambah ruang untuk skrin retina).
- Tukar ke WebP, atau AVIF kalau anda mahukan fail sekecil mungkin.
- Mampatkan pada kualiti 75–85% untuk membuang sisa pembaziran terakhir.
Buat begitu dan foto kamera 5 MB boleh menjadi WebP 120 KB yang nampak serupa dalam lajur artikel. Darabkan merentasi satu halaman dan perbezaan masa muat amat ketara.
Semuanya berjalan dalam pelayar anda menggunakan Canvas dan WebAssembly, jadi tiada apa-apa dimuat naik dan alat terus berfungsi luar talian selepas lawatan pertama. Ini bermakna anda boleh menyediakan sefolder imej untuk laman anda tanpa menyerahkannya kepada mana-mana pelayan.
Melangkaui fail
Dua lagi tabiat membantu, dan ia tak menelan kos:
- Muat malas imej di bawah lipatan dengan
loading="lazy"supaya pelayar hanya mengambilnya bila pembaca menskrol berhampiran. - Tetapkan atribut lebar dan tinggi supaya susun atur tak melompat sewaktu imej dimuatkan, yang turut membantu skor Core Web Vitals anda.
Mahu tahu tepat imej mana yang menyeret halaman ke bawah? Panduan SEO imej kami merangkumi pengauditan, dan semakan kelajuan halaman akan menyenaraikan aset terberat supaya anda tahu ke mana perlu ditujukan dahulu.