Gambar Dasar: img, src, alt

Analogi: Mading Sekolah dan Keterangan Foto

Bayangkan mading sekolah. Setiap foto yang ditempel punya dua hal: foto itu sendiri, dan secarik kertas kecil di bawahnya yang menjelaskan "ini foto siapa, kapan, sedang apa". Kertas kecil itu penting, karena kalau fotonya copot atau ada teman tunanetra yang tidak bisa melihatnya, keterangan itulah satu-satunya cara mereka tahu isi fotonya.

Tag <img> bekerja dengan logika yang sama. Atribut src adalah "fotonya" (alamat file gambar), sedangkan atribut alt adalah "kertas keterangannya" (teks pengganti). Bedanya, di web, kertas keterangan ini dibaca oleh teknologi pembaca layar untuk pengguna tunanetra, ditampilkan saat gambar gagal dimuat, dan dibaca oleh Google untuk memahami isi gambarmu.

Kenapa Konsep Ini Ada

Web pada awalnya hanya berisi teks. Begitu gambar bisa ditampilkan, web langsung berubah menjadi media visual seperti yang kamu kenal sekarang. Tapi gambar membawa tiga masalah yang tidak dimiliki teks.

Pertama, gambar adalah file eksternal yang bisa gagal dimuat: koneksi putus, nama file salah ketik, server gambar mati. Kalau itu terjadi dan tidak ada alt, pengunjung hanya melihat ikon gambar rusak tanpa tahu apa yang seharusnya tampil di sana.

Kedua, tidak semua orang bisa melihat gambar. Pengguna tunanetra memakai screen reader, software yang membacakan isi halaman dengan suara. Tanpa alt yang bermakna, software itu hanya bisa berkata "gambar", yang sama sekali tidak membantu.

Ketiga, gambar butuh waktu untuk diunduh. Selama gambar belum tiba, browser tidak tahu seberapa besar ruang yang harus disiapkan, sehingga teks di bawahnya tiba-tiba "loncat" ke bawah saat gambar muncul. Fenomena menjengkelkan ini bernama layout shift, dan atribut width serta height adalah obatnya.

Contoh 1: Gambar Paling Sederhana

<img src="kucing.jpg" alt="Kucing oranye sedang tidur di atas sofa" />

Hanya dua atribut, tapi keduanya wajib. src menunjuk ke file gambar (bisa alamat relatif seperti kucing.jpg atau alamat lengkap seperti https://contoh.com/kucing.jpg). alt menjelaskan isi gambar dengan kalimat yang bermakna. Perhatikan tag ini tidak punya tag penutup: ia adalah void element, cukup diakhiri />.

Contoh 2: Galeri Kecil yang Lebih Realistis

Sekarang contoh yang lebih mirip dunia nyata: tiga gambar dengan peran berbeda, termasuk satu gambar dekorasi murni.

<h2>Menu Favorit</h2>

<img src="kopi-tubruk.jpg"
     alt="Segelas kopi tubruk panas dengan uap mengepul"
     width="600" height="400" />

<img src="pisang-goreng.jpg"
     alt="Piring pisang goreng coklat keju"
     width="600" height="400" />

<img src="garis-hiasan.png" alt="" width="600" height="40" />

Dua gambar pertama punya alt deskriptif karena mereka adalah konten: pengunjung perlu tahu apa yang ada di foto. Gambar ketiga adalah garis hiasan pemisah, murni dekorasi, sehingga alt-nya dikosongkan (alt=""). Itu sinyal resmi untuk screen reader: "lewati saja gambar ini, tidak ada informasi di sini." Semua gambar mencantumkan width dan height sesuai dimensi asli file, supaya browser mencadangkan ruangnya sebelum gambar selesai diunduh dan halaman tidak loncat-loncat.

Kesalahan Umum Pemula

1. Mengisi alt dengan kata generik yang tidak menjelaskan apa-apa.

Salah:

<img src="kopi.jpg" alt="gambar" />
<img src="kopi.jpg" alt="foto kopi.jpg" />

Benar:

<img src="kopi.jpg" alt="Segelas kopi susu gula aren di meja kayu" />

Kata "gambar" atau "foto" tidak memberi informasi apa pun, screen reader pun sudah mengumumkan bahwa itu gambar. Jangan juga menulis nama file di alt. Tanya pada dirimu: kalau gambarnya tidak tampil, kalimat apa yang membuat orang tetap paham? Itulah isi alt yang benar.

2. Tidak menulis width dan height sehingga halaman loncat saat gambar muncul.

Salah:

<img src="banner.jpg" alt="Banner promo warkop" />
<p>Promo berlaku sampai akhir bulan!</p>

Benar:

<img src="banner.jpg" alt="Banner promo warkop" width="1200" height="400" />
<p>Promo berlaku sampai akhir bulan!</p>

Tanpa dimensi, paragraf promo akan terdorong ke bawah secara tiba-tiba begitu banner selesai dimuat, dan pengunjung yang sedang membaca bisa kehilangan baris bacaannya. Nilai width/height adalah dimensi asli file gambar dalam piksel, bukan ukuran tampil. Ukuran tampil nantinya diatur lewat CSS, tapi browser memakai rasio kedua angka ini untuk mencadangkan ruang yang pas.

3. Salah menulis alamat file di src karena tidak paham path relatif.

Salah (file sebenarnya ada di dalam folder img/):

<img src="kopi.jpg" alt="Kopi" />

Benar:

<img src="img/kopi.jpg" alt="Kopi" />

Browser mencari file persis di alamat yang kamu tulis, relatif terhadap posisi file HTML. Kalau gambarmu tersimpan di folder img tapi kamu menulis kopi.jpg saja, browser mencari di folder yang salah dan gambar rusak. Saat gambar tidak tampil, hal pertama yang dicek selalu: apakah path-nya benar dan apakah nama file sama persis termasuk huruf besar-kecilnya.

Catatan teknis: Untuk web modern, simpan gambarmu dalam format yang efisien seperti WebP atau AVIF karena ukurannya bisa separuh dari JPG dengan kualitas setara, dan jangan mengandalkan width/height untuk mengecilkan foto raksasa 5000 piksel menjadi thumbnail, karena browser tetap mengunduh file raksasanya secara utuh.