srcset mencantumkan file kandidat; ukuran memberi tahu browser lebar slot dalam piksel CSS sebelum tata letak selesai. Situs yang mengirimkan srcset tanpa ukuran yang jujur ​​membuat browser menebak-nebak, dan tebakannya adalah file terbesar.

<img
  src="photo-800.webp" alt="the workshop bench"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 700px) 92vw, 560px"
  width="800" height="533" fetchpriority="high" />

Matematika dua menit

  1. Buka devtools dan baca lebar gambar yang dirender pada setiap breakpoint yang Anda dukung. Itu adalah nilai ukuran Anda; tulis dalam px, bukan vw, yang slotnya sudah diperbaiki.
  2. Hasilkan file di kedua ujung rentang slot (kepadatan 1x dan 2x terbesar). Tiga kandidat sudah banyak.
  3. Jangan pernah mencampurkan deskriptor kepadatan (1x, 2x) dengan deskriptor lebar (w) dalam satu set src; satu sintaks menang dan itu adalah bentuk w untuk tata letak.

Bug yang diperbaiki panduan ini

  • Pahlawan desktop dikirimkan dalam byte desktop di ponsel: ukurannya lupa casing (lebar maksimal).
  • Foto buram berukuran 400 piksel terbentang di desktop: tidak ada kandidat yang lebih besar untuk ditingkatkan.
  • Pergeseran tata letak saat memuat: atribut lebar/tinggi tidak ada. Pasang kembali; mereka tidak memerlukan biaya apa pun.

Situs ini: satu foto pangkas 3:2 per artikel, pahlawan-bersemangat di halaman artikel, yang lainnya malas, Lighthouse 100 di setiap halaman diukur dalam repo ini. Sederhana, terukur, dan byte mengikuti area pandang.