HTML 04: Menampilkan Gambar yang Cepat dan Aksesibel

Gambar membantu menjelaskan informasi, tetapi gambar yang salah konfigurasi dapat memperlambat halaman dan menyulitkan pengguna pembaca layar.

Tujuan Belajar

• Menampilkan gambar dengan img.
• Menulis alt yang berguna.
• Mencegah layout bergeser dengan ukuran gambar.
• Menggunakan figure untuk gambar yang memiliki keterangan.

1. Elemen img

img tidak memiliki tag penutup. Atribut pentingnya:

• src menunjukkan lokasi file;
• alt menjelaskan isi atau fungsi gambar;
• width dan height memberi tahu browser perbandingan ukuran sejak awal.

Ukuran di HTML tidak berarti gambar harus selalu tampil sebesar itu. Internal CSS pada contoh membuatnya mengecil di layar sempit melalui max-width: 100% dan mempertahankan proporsi melalui height: auto.

2. Menulis alt yang Tepat

Teks alternatif dibaca ketika gambar gagal dimuat dan oleh teknologi pembaca layar.

• Buruk: alt="gambar"
• Lebih baik: alt="Diagram empat lapisan CSS Box Model"

Jika gambar hanya dekorasi dan tidak membawa informasi, gunakan alt="". Jangan menghapus atribut alt, karena pembaca layar dapat membacakan nama file yang tidak berguna.

Untuk gambar yang berfungsi sebagai link, jelaskan tujuannya:

3. Path Gambar

Huruf besar-kecil nama file dapat berpengaruh di server. Foto.jpg dan foto.jpg bisa dianggap berbeda.

Ketiga path di atas sengaja hanya menggambarkan struktur folder project. Contoh yang dapat dijalankan pada bagian lain memakai URL aset CC0 dari MDN agar gambarnya langsung tampil di sandbox.

4. Gambar dengan Keterangan

Gunakan figure ketika gambar dan keterangannya merupakan satu kesatuan. Tidak semua gambar harus dibungkus figure.

Gambar daring pada contoh berasal dari MDN Learning Area yang menggunakan lisensi CC0 1.0.

Kesalahan Umum

• Menggunakan gambar berukuran beberapa megabyte untuk thumbnail kecil.
• Mengandalkan nama file sebagai alt.
• Menulis path dari komputer sendiri.
• Mengubah width tanpa menjaga height: auto, sehingga gambar terlihat gepeng.

Latihan

Buat galeri berisi tiga gambar. Berikan alt yang berbeda dan bermakna, ukuran asli, serta satu figure dengan figcaption.

Rangkuman

Gunakan src yang benar, alt yang menjelaskan fungsi, dan ukuran gambar untuk menjaga kestabilan layout. Optimasi gambar responsif akan dibahas pada modul HTML 04C.