Materi
Atribut width dan height pada img tidak hanya menentukan ukuran tampil. MDN menjelaskan keduanya membuat peramban bisa menghitung rasio aspek gambar sebelum berkasnya tiba, sehingga ruangnya disisihkan dan teks di bawahnya tidak melompat. web.dev menambahkan bahwa peramban menurunkan aspect-ratio bawaan dari kedua atribut itu, jadi aturan CSS width: 100% dengan height: auto tetap aman: lebar mengikuti wadah dan tinggi dihitung dari rasionya. Rumus skor pergeseran sudah dibahas di kelas SEO untuk Halaman Web; di sini fokusnya mencegah pergeseran itu sejak HTML.
HTML Standard mendefinisikan atribut loading dengan dua keadaan: eager (bawaan, langsung diambil) dan lazy (ditunda sampai syarat tertentu terpenuhi). web.dev meminta loading="lazy" hanya untuk gambar di luar layar awal; gambar di layar pertama, terutama gambar LCP, dimuat seperti biasa. MDN menambahkan dimensi makin penting untuk gambar lazy, karena gambar yang belum dimuat berukuran 0×0.
Untuk format, web.dev menyebut WebP dan AVIF sering memberi kompresi lebih kecil daripada JPEG dan PNG. Elemen picture memberi beberapa sumber: peramban memakai source pertama yang formatnya didukung, dan img di dalamnya menjadi cadangan sekaligus pemilik alt, width, dan height.
<picture>
<source type="image/avif" srcset="/foto/teh.avif">
<source type="image/webp" srcset="/foto/teh.webp">
<img src="/foto/teh.jpg" alt="Pemetik teh di kebun" width="960" height="640">
</picture>
