Cara menjadikan imej dimuatkan lebih pantas di laman web
Lima perubahan yang mengurangkan berat imej di mana-mana laman web, mengikut susunan kesannya.
Di kebanyakan laman web, imej merupakan sebahagian besar daripada apa yang dimuat turun oleh pelawat. Satu foto daripada telefon yang tidak dioptimumkan boleh lebih berat daripada keseluruhan halaman yang lain digabungkan. Membaiki imej biasanya merupakan peningkatan kelajuan yang paling besar dan paling murah, dan halaman yang lebih pantas mendapat kedudukan lebih baik, mengekalkan pelawat lebih lama dan menghasilkan lebih banyak jualan.
1. Muat naik imej mengikut saiz paparannya
Foto terus daripada telefon selebar 4000 piksel atau lebih. Lajur kandungan di laman web jarang melebihi 1200 piksel, dan kad atau imej kecil jauh lebih kecil. Setiap piksel tambahan dimuat turun dan kemudian dibuang oleh pelayar. Ubah saiz sebelum memuat naik: kira-kira 2000 piksel lebar untuk sepanduk lebar penuh (supaya kekal tajam pada skrin berketumpatan tinggi), 1200 hingga 1600 untuk imej kandungan, dan 600 hingga 800 untuk kad. Alat ubah saiz memproses satu folder penuh sekali gus.
2. Mampatkan
Pada dimensi yang betul, pemampatan melakukan selebihnya. Foto yang disimpan pada kualiti 80 kelihatan sama seperti foto pada kualiti 100 di halaman web dan selalunya hanya sepertiga saiznya. Pemampat imej mengendalikan kelompok fail dan menunjukkan penjimatan bagi setiap fail.
3. Gunakan WebP
WebP disokong oleh setiap pelayar semasa dan biasanya 25 hingga 35% lebih kecil daripada JPG pada kualiti visual yang sama, dengan sokongan ketelusan yang menjadikannya pengganti bagi banyak PNG juga. Tukar dengan JPG ke WebP atau PNG ke WebP. AVIF lebih kecil lagi tetapi lebih perlahan untuk dikodkan dan kurang disokong secara meluas oleh sistem muat naik, jadi WebP ialah pilihan lalai yang praktikal.
4. Pilih format yang betul untuk kandungan
| Kandungan | Format terbaik |
|---|---|
| Foto | WebP, atau JPG jika WebP tidak diterima |
| Logo dan ikon | SVG jika ada, jika tidak PNG atau WebP |
| Tangkapan skrin dengan teks | PNG atau WebP tanpa kehilangan |
| Animasi ringkas | Video pendek sebagai ganti GIF |
5. Bantu pelayar memuatkannya dengan bijak
- Pemuatan malas (lazy loading). Imej di bawah skrin pertama sepatutnya dimuatkan hanya apabila pelawat menatal berhampirannya. Kebanyakan platform melakukannya secara automatik; dalam HTML biasa, tambah loading="lazy" pada teg img yang tidak kelihatan pada mulanya.
- Dimensi. Berikan setiap imej lebar dan tinggi supaya halaman tidak melompat-lompat apabila imej tiba. Anjakan susun atur ialah salah satu Core Web Vitals Google.
- Imej utama dahulu. Imej besar di bahagian atas halaman, biasanya yang dikira sebagai Largest Contentful Paint, tidak sepatutnya dimuatkan secara malas. Ia perlu dimuatkan seawal mungkin.
Sejauh mana perbezaannya
Halaman biasa dengan sepuluh foto terus daripada telefon mungkin seberat 30 MB. Selepas diubah saiz kepada lebar yang munasabah dan dimampatkan, halaman yang sama biasanya sekitar 2 MB. Selepas ditukar kepada WebP, hampir 1.4 MB. Pada sambungan mudah alih, itulah perbezaan antara halaman yang muncul dalam sesaat dan halaman yang ditinggalkan oleh ramai pelawat.
Menyemak hasil anda
PageSpeed Insights oleh Google dan panel Lighthouse dalam alat pembangun Chrome kedua-duanya menyenaraikan imej yang terlalu besar, imej yang sepatutnya dalam format WebP, dan elemen Largest Contentful Paint. Jalankan kedua-duanya sebelum dan selepas, dan utamakan halaman yang menerima paling banyak trafik terlebih dahulu.