Gambar: Tag img yang Benar

Menampilkan Gambar

Tag <img> menampilkan gambar. Dia void element, jadi tidak punya tag penutup:

<img src="kucing.jpg" alt="Kucing oren sedang tidur">

Dua atribut ini wajib hukumnya:

• src: lokasi file gambar (bisa relatif atau URL penuh).
• alt: teks alternatif yang tampil kalau gambar gagal dimuat, dan dibacakan screen reader.

Atribut alt Itu Serius

Jangan kosongkan alt atau isi asal-asalan. Tulis deskripsi singkat tentang isi gambar, bukan "gambar" atau "foto":

<!-- Kurang baik -->
<img src="kucing.jpg" alt="gambar">

<!-- Baik -->
<img src="kucing.jpg" alt="Kucing oren tidur meringkuk di atas sofa">

Pengecualiannya: kalau gambar murni dekorasi yang tidak menambah informasi, baru boleh alt="" (kosong). Ini memberi tahu screen reader untuk melewatinya.

Mengatur Ukuran

Atribut width dan height mengatur ukuran dalam piksel:

<img src="kucing.jpg" alt="Kucing oren" width="300" height="200">

Catatan teknis: Selalu cantumkan width dan height asli gambar. Browser jadi bisa menyiapkan ruang sebelum gambar selesai diunduh, sehingga layout tidak "melompat" saat gambar muncul. Fenomena layout melompat ini disebut layout shift dan bikin pengalaman pengguna buruk.

Gambar yang Bisa Diklik

Bungkus <img> dengan <a> supaya gambar berfungsi sebagai link:

<a href="galeri.html">
  <img src="kucing.jpg" alt="Lihat galeri kucing">
</a>

Perhatikan alt-nya menjelaskan aksi ("Lihat galeri kucing"), bukan isi gambar. Karena dalam konteks ini gambar berperan sebagai tombol.

Format File Gambar

Tiga format yang paling sering dipakai di web:

• JPG: foto dan gambar kompleks. Ukuran kecil, tapi tidak mendukung transparansi.
• PNG: butuh transparansi atau teks tajam (logo, screenshot). Ukuran lebih besar.
• SVG: ikon dan ilustrasi vektor. Tajam di semua ukuran, ukuran file kecil.

Untuk foto pakai JPG, untuk logo dan ikon pakai SVG atau PNG.

Path Gambar

Sama seperti link, src bisa relatif atau absolut:

<img src="images/kucing.jpg" alt="...">
<img src="../foto/kucing.jpg" alt="...">
<img src="https://contoh.com/kucing.jpg" alt="...">

Pola ../ artinya "naik satu level folder". Pastikan struktur foldermu rapi dari awal supaya path tidak membingungkan.