Gambar menentukan persepsi kualitas sebuah halaman lebih cepat daripada teks mana pun. Dalam hitungan detik pengunjung sudah menilai: foto yang tajam dan termuat cepat menandakan halaman yang dirawat, sementara satu ikon gambar gagal termuat di sudut layar cukup untuk membuat seluruh halaman terasa belum selesai. Karena itulah img — elemen yang tampak paling sederhana di HTML — justru menjadi elemen dengan paling banyak detail: alamat berkas, teks pengganti, ukuran cadangan, format, hingga strategi pemuatannya.

Section ini menyusun detail tersebut bertahap. Kita mulai dari anatomi elemen img dan atribut src, lalu membahas alt dari dua sisi: aturan penulisannya dan teknik menyusun isinya. Setelah itu width/height untuk mencegah layout shift, figure-figcaption untuk keterangan yang melekat pada gambarnya, dan pilihan antara gambar lokal serta eksternal. Tiga chapter berikutnya membahas teknik modern: srcset dan sizes untuk gambar responsif, elemen picture untuk keputusan format dan pemotongan, serta loading="lazy" untuk menunda gambar di luar layar. Chapter penutup merangkum kesalahan yang paling sering muncul di halaman nyata.

# Elemen img

Pelajari elemen img untuk menyematkan gambar pada halaman.

Buka → # Atribut src

Pelajari atribut src dan cara browser memuat berkas gambar.

Buka → # Atribut alt

Pelajari atribut alt sebagai teks pengganti ketika gambar tidak termuat.

Buka → # Alternative Text

Latih menulis alt text yang bermakna untuk berbagai jenis gambar.

Buka → # Intrinsic Width dan Height

Pelajari atribut width dan height untuk mencegah layout shift.

Buka → # Figure dan Figcaption

Pelajari figure untuk konten mandiri dan figcaption sebagai keterangannya.

Buka → # Gambar Lokal dan Eksternal

Bedakan referensi gambar lokal di folder proyek dan eksternal lewat URL.

Buka → # Responsive Images dengan srcset

Pelajari srcset dan sizes agar browser memilih gambar sesuai ukuran layar.

Buka → # Elemen picture

Pelajari elemen picture untuk memilih sumber gambar berdasar kondisi.

Buka → # Lazy Loading Images

Pelajari atribut loading lazy untuk menunda pemuatan gambar di luar layar.

Buka → # Kesalahan Penggunaan Gambar

Kenali kesalahan umum: alt kosong, ukuran tanpa rasio, dan gambar berat.

Buka →