Imej selebar 1920 piksel pada halaman turut dimuat turun sepenuhnya oleh pengguna telefon, kemudian dikecilkan kepada 390 piksel pada skrin — lima kali ganda jalur lebar dan pemuatan lebih perlahan tanpa faedah. srcset membolehkan pelayar memilih versi yang sesuai dengan skrin, dengan syarat anda sudah menghasilkan versi-versi itu.
Mengapa satu imej tidak mencukupi
Angka LCP dalam Core Web Vitals biasanya datang daripada imej besar di bahagian atas halaman. Hantar fail selebar 1920 dan 400KB kepada telefon, dan LCP jarang mencapai 2.5 saat; versi selebar 480 dan 40KB pada sambungan yang sama lebih pantas sepuluh kali ganda. Isyarat pengalaman halaman Google membaca angka itu secara terus.
Sebaliknya, imej selebar 768 pada desktop besar kelihatan kabur. Justeru perlu beberapa saiz, dipilih oleh pelayar.
Jadual titik henti yang praktikal
Titik henti mengikut lebar imej yang dipaparkan pada halaman, bukan viewport. Untuk dua kes biasa, imej lebar penuh dan imej dalam artikel:
- Imej lebar penuh (hero, sepanduk): 480, 768, 1200, 1920. Telefon, tablet, komputer riba, paparan besar.
- Imej dalam artikel (lajur kandungan hingga kira-kira 800): 400, 800, 1200; 1200 melayani skrin 1.5x–2x.
- Gambar kecil dan kad (dipaparkan sekitar 300): 300 dan 600.
Lebih banyak peringkat tidak bermakna lebih baik. Setiap peringkat bermaksud satu eksport lagi dan satu fail lagi untuk disimpan, dan pelayar boleh bertolak ansur dengan ketidakpadanan, jadi jarak 1.5–2x antara peringkat ialah titik terbaik. Empat peringkat meliputi lebih sembilan daripada sepuluh gabungan peranti.
Perlukah versi 2x?
Skrin Retina dan kebanyakan telefon berketumpatan 2x–3x; imej yang dipaparkan selebar 400 memerlukan 800 piksel untuk kelihatan tajam di sana. Peringkat yang lebih besar dalam jadual sudah bertindak sebagai versi 2x bagi yang lebih kecil — 768 ialah 2x untuk telefon selebar 390, 1200 ialah 2x untuk lajur selebar 600.
Jadi tiada keperluan set “@2x” yang berasingan. Kekalkan jarak kira-kira 2x antara peringkat dan pelayar akan memilih yang lebih tinggi mengikut ketumpatan.
Format: WebP dahulu, JPG sebagai sandaran
Pada kualiti setara, WebP 25–35 peratus lebih kecil daripada JPG dan semua pelayar moden menyokongnya. Eksport WebP pada setiap saiz dan simpan JPG sandaran melalui elemen picture untuk pelayar lama; jika pelayar sebelum 2020 tidak lagi penting bagi khalayak anda, WebP sahaja sudah memadai.
AVIF lebih kecil lagi tetapi pengekodannya dalam pelayar jauh lebih perlahan, yang merugikan pada kelompok besar. AVIF vs WebP vs JPEG membincangkan kompromi ini dengan terperinci.
Mengeksport seluruh set secara kelompok
Letakkan imej sumber ke dalam Pemprosesan Imej Kelompok dan jalankan sekali bagi setiap peringkat, menukar lebar dan akhiran setiap kali:
- Saiz: lebar 480, Benarkan pembesaran dimatikan, output WebP 80 peratus, akhiran -480.
- Tetapan sama pada 768 dengan akhiran -768; kemudian 1200; kemudian 1920.
- Untuk JPG sandaran, tukar output kepada JPG, kekalkan akhiran, jalankan semula.
Setiap larian mengambil beberapa saat dan ZIP sudah mengandungi hero-480.webp, hero-768.webp dan seterusnya, sedia untuk folder imej. Biarkan Benarkan pembesaran dimatikan supaya imej asal 1000 piksel tidak pernah diregangkan ke 1920.
Untuk melihat perbezaan saiz setiap peringkat pada satu imej, cuba Pengubah Saiz Imej pada satu fail.
Menulis HTML-nya
Untuk imej lebar penuh:
<img src="hero-1200.jpg"
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1200.webp 1200w, hero-1920.webp 1920w"
sizes="100vw" width="1920" height="1080" alt="...">Untuk imej dalam artikel, tetapkan sizes kepada lebar sebenar, contohnya sizes="(max-width: 840px) 100vw, 800px". Sentiasa sertakan width dan height supaya pelayar menempah ruang dan halaman tidak melompat.
Setelah itu, tambahkan nasihat pemuatan malas dan pemampatan dalam cara menjadikan imej dimuatkan lebih pantas, dan bahagian imej dalam skor prestasi anda hampir maksimum.