Menampilkan Gambar

Katalog produk, foto profil, dan banner promo memperkaya halaman web di luar teks. HTML menyediakan elemen img untuk menampilkan gambar-gambar tersebut. Pada Chapter ini kita membahas atribut wajib src dan alt, format gambar yang umum, sifat img sebagai void element, serta ukuran intrinsik dan jebakan layout yang menyertainya. Contoh di akhir chapter memakai gambar SVG nyata dari bundle.

Elemen img dan Atribut src #

Elemen img — singkatan dari image — menampilkan satu file gambar di dalam halaman. Atribut src (source) membawa alamat file gambar, dan nilainya berupa path relatif terhadap file HTML, sama seperti href pada link di section Links dan Navigasi. Tanpa src, img tidak menampilkan apa pun karena browser tidak tahu file mana yang harus diambil.

<img src="foto-produk.jpg" alt="Tas anyaman warna cokelat">

Output yang Dihasilkan:

Browser mengambil file foto-produk.jpg di folder yang sama dengan file HTML,
lalu menampilkan gambarnya pada halaman.

Atribut alt yang Wajib #

Atribut alt (alternative text) membawa teks pengganti yang tampil bila gambar gagal dimuat dan dibacakan screen reader. Kedua peran itu menjadikan alt dan src pasangan atribut utama pada setiap img. Aturan penulisannya kita bedah pada Chapter berikutnya; untuk sekarang, biasakan selalu menuliskannya.

Format Gambar yang Umum #

Pilihan format memengaruhi ukuran file dan ketajaman hasil:

File svg menarik karena berupa teks XML: kita menulis dan menyimpannya seperti file HTML biasa, dan format inilah yang kita pakai pada contoh akhir chapter.

img Adalah Void Element #

Chapter Void Elements menempatkan img pada daftar resmi elemen tanpa closing tag. Menulis </img> merupakan galat parser: img tidak punya konten di antara tag karena seluruh datanya dibawa atribut. Garis miring self-closing seperti <img ... /> sah tetapi tidak berpengaruh.

Ukuran Intrinsik dan Jebakan Layout #

Setiap file gambar membawa ukuran intrinsik, yaitu lebar dan tinggi asli file dalam piksel. Tanpa instruksi lain, browser merender gambar sesuai ukuran tersebut. Masalah muncul saat file berukuran besar: teks dirender lebih dulu, lalu saat unduhan selesai, konten di bawahnya terdorong turun. Pergeseran ini disebut layout shift dan membuat pengunjung kehilangan posisi bacaan.

Atribut width dan height memberi tahu browser rasio gambar sebelum file selesai diunduh, sehingga ruangnya dapat disiapkan lebih awal. Nilainya berupa bilangan tanpa satuan dan mencerminkan ukuran intrinsik file. Pengaturan ukuran tampil berada di tangan CSS pada section HTML dan CSS.

<img src="foto-produk.jpg" alt="Tas anyaman warna cokelat" width="640" height="480">

Contoh Lengkap dalam Satu File #

File berikut menampilkan banner toko dan foto produk. Banner berupa file svg nyata dalam bundle; foto produk berupa file hipotetis yang perlu pembaca sediakan sendiri. Simpan kedua file di folder yang sama, lalu buka file HTML di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menampilkan Gambar</title>
</head>
<body>
  <h1>Toko Budi</h1>
  <img src="banner-toko.svg" alt="Banner tulisan Toko Budi" width="320" height="80">
  <p>Selamat datang di toko serba ada milik Budi. Berikut produk unggulan kami.</p>
  <img src="foto-produk.jpg" alt="Tas anyaman warna cokelat dengan tali kulit" width="640" height="480">
</body>
</html>

Berikut isi banner-toko.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="80" viewBox="0 0 320 80" role="img" aria-label="Banner tulisan Toko Budi">
  <rect width="320" height="80" rx="12" fill="#2563eb"/>
  <text x="160" y="50" font-family="Arial, sans-serif" font-size="30" font-weight="bold" fill="#ffffff" text-anchor="middle">Toko Budi</text>
</svg>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Toko Budi"
  - Banner biru bertuliskan "Toko Budi" dari banner-toko.svg
  - Paragraf sambutan
  - Ruang gambar 640x480; gambar tampil bila foto-produk.jpg ada,
    atau teks alt-nya bila file tidak ditemukan

Mari kita telaah peran tiap baris penting pada file di atas:

1. Baris 9 (h1): judul halaman yang berdiri sebelum gambar apa pun.
2. Baris 10 (img banner): membawa src menuju file svg sefolder, alt sebagai teks pengganti, serta width dan height setara ukuran intrinsiknya.
3. Baris 11 (p): paragraf sambutan yang dirender lebih dulu.
4. Baris 12 (img produk): alamat file hipotetis; width="640" dan height="480" mereservasi ruang agar konten di bawahnya tidak bergeser.
5. Atribut alt pada kedua img: wajib ditulis walau manfaatnya belum terasa; chapter berikutnya menjelaskan alasannya.

Dengan src, alt, width, dan height, gambar pertama kita telah tampil dengan ukuran yang aman bagi layout. Teks pengganti pada alt menyimpan ketelitian penulisan dan layak dibahas sendiri — Chapter berikutnya, Atribut alt, mengupasnya. Untuk mengelompokkan gambar dengan keterangan panjang, pasangan figure dan figcaption menanti pada section Semantic HTML.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen img
• MDN Web Docs — Images in HTML
• MDN Web Docs — Image file type and format guide

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menampilkan Gambar</title>
</head>
<body>
  <h1>Toko Budi</h1>
  <img src="banner-toko.svg" alt="Banner tulisan Toko Budi" width="320" height="80">
  <p>Selamat datang di toko serba ada milik Budi. Berikut produk unggulan kami.</p>
  <img src="foto-produk.jpg" alt="Tas anyaman warna cokelat dengan tali kulit" width="640" height="480">
</body>
</html>