Browser menampilkan teks hampir seketika, tetapi gambar datang belakangan — ingat, setiap gambar dimuat lewat request terpisah setelah HTML dibaca. Tanpa informasi ukuran, browser tidak tahu berapa ruang yang harus disiapkan untuk gambar yang belum tiba, sehingga konten di bawahnya menempel dulu ke atas, lalu melompat turun begitu gambar muncul. Lompatan konten saat pemuatan itu punya nama: layout shift.

Ukuran Intrinsik #

Setiap berkas gambar memiliki ukuran aslinya sendiri — misalnya foto dari kamera ponsel berukuran 4000×3000 piksel. Ukuran asli berkas ini disebut ukuran intrinsik (intrinsic size). Browser bisa membacanya setelah berkas termuat; persoalannya, tata letak halaman sudah disusun sebelum berkas itu tiba. Dua atribut sederhana menutup jarak waktunya.

Atribut width dan height #

Aturannya: atribut width dan height pada img memberi tahu ukuran tersebut sejak awal. Nilainya bilangan piksel polos tanpa satuan — width="800", bukan width="800px".

Mekanismenya: dari kedua angka itu browser menghitung rasio-aspek (misalnya 1200:800 = 3:2) sejak membaca HTML, lalu menyiapkan kotak berlebar dan bertinggi proporsional pada posisi gambar. Saat berkas tiba, gambar mengisi kotak yang sudah disiapkan — tidak ada lompatan. Indikator pengalaman bernama CLS (Cumulative Layout Shift) mengukur seberapa banyak konten bergeser saat halaman dimuat, dan pasangan atribut ini adalah penangan utamanya.

Bandingkan penulisan tanpa dan dengan ukuran:

html 
<img src="assets/hero.webp" alt="Barista Kedai Kopi Siti menuangkan kopi susu gula aren">
html 
<img
  src="assets/hero.webp"
  alt="Barista Kedai Kopi Siti menuangkan kopi susu gula aren"
  width="1200"
  height="800">

Hasil render kedua versi justru berbeda sebelum gambar tiba: versi pertama membuat paragraf di bawahnya menempel ke atas dulu, lalu melompat turun saat gambar termuat; versi kedua menyiapkan ruang 1200×800 sejak awal sehingga tidak satu pun elemen bergeser.

Mari kita telaah versi kedua:

  1. width="1200": lebar gambar dalam piksel — bilangan polos tanpa satuan.
  2. height="800": tinggi gambar dalam piksel — browser memakai keduanya untuk menghitung rasio 3:2.
  3. Tanpa CSS apa pun: gambar ditampilkan tepat berukuran 1200×800; ukuran lain diatur lewat CSS.
  4. Kotak tercadang sejak parsing: paragraf di bawah gambar langsung berada di posisi finalnya.

Bandingkan kedua versi itu secara langsung — perhatikan bahwa gambar pertama tampil mengikuti ukuran intrinsik berkasnya, sedangkan gambar kedua tampil pada ukuran atributnya meskipun berkasnya jauh lebih besar:

Pada demo, hero.webp diganti dua placeholder SVG dengan ukuran intrinsik berbeda agar perbandingannya terlihat. Manfaat kedua atribut yang tidak terlihat di sini — ruang yang tercadang sejak parsing — baru terasa pada berkas besar lewat koneksi lambat: placeholder termuat seketika, sedangkan foto sungguhan datang belakangan; tanpa width/height, konten di bawahnya melompat saat berkas tiba.

html 
<img src="assets/hero.webp" alt="Barista menuangkan kopi" width="50%">

Ringkasan #

  • Ukuran intrinsik adalah ukuran asli berkas gambar; browser mengetahuinya hanya setelah berkas termuat.
  • Atribut width/height menerima bilangan piksel tanpa satuan dan dipakai untuk menghitung rasio-aspek sejak parsing.
  • Kotak yang tercadang lebih awal mencegah layout shift — salah satu penangan utama CLS.
  • CSS tetap boleh mengubah ukuran; satuan persen hanya berlaku di CSS.

Dengan gambar, teks pengganti, dan ruang tampilnya beres, chapter berikutnya mengurus keterangan yang melekat pada gambar.