Saya mempunyai bahagian yang menggunakan imej sebagai bahagian utama. Masalahnya ialah imej itu terlalu besar untuk telefon bimbit, tablet dan desktop, 1MB. Saya bimbang imej itu terlalu besar.
Saya ingin mengetahui amalan terbaik apabila menggunakan imej sebagai latar belakang untuk bahagian utama.
Terima kasih atas cadangan dan komen anda yang baik.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Sebenarnya, imej sepanduk wira bersaiz 1MB terlalu besar. Bahagian wira halaman web biasanya merupakan elemen visual pertama yang dilihat oleh pengguna. Imej yang besar akan menyebabkan pengguna menunggu lama tanpa melihat kandungan tapak web anda, dan mereka akan keluar dengan cepat.
Jadi, mengoptimumkan imej ini adalah penting untuk prestasi dan estetika. Imej wira anda hendaklah kurang daripada 100KB.
TinyPNG ialah alat yang hebat. https://tinypng.com
Anda juga boleh menggunakan imej responsif untuk menyesuaikan diri dengan nisbah bidang yang berbeza. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Jika anda menggunakan Next.js, anda boleh menggunakan komponen Imej https://nextjs.org/docs/pages/api-reference/components/image.
Akhir sekali, anda boleh menggunakan Lighthouse untuk menguji prestasi halaman web anda. https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk