Apakah amalan terbaik untuk imej yang digunakan sebagai bahagian utama?

Question

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.

Answer 1

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

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <source srcset="large.jpg">
  <img src="large.jpg" alt="Hero Image">
</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