Selamat datang kembali di seri Belajar HTML! Setelah sebelumnya kita fokus pada teks dan formulir, kini saatnya kita membuat halaman web menjadi lebih hidup dan menarik secara visual. Elemen paling fundamental untuk mencapai ini adalah gambar.

Sebuah gambar dapat menyampaikan seribu kata, dan dalam dunia web, gambar adalah kunci untuk menarik perhatian, menjelaskan konsep, dan memberikan estetika pada desain Anda. Pada tutorial #14 ini, kita akan fokus pada cara menampilkan gambar menggunakan HTML.

Memperkenalkan Tag <img>

Untuk menampilkan gambar di HTML, kita menggunakan tag <img>. Satu hal yang sangat penting untuk diingat adalah tag <img> merupakan void element atau empty tag. Artinya, ia tidak memiliki tag penutup seperti </img>. Semua informasinya dimuat di dalam atributnya.

Struktur dasarnya seperti ini: <img src="sumber_gambar.jpg" alt="teks alternatif">

Mari kita bedah atribut-atributnya.

Atribut Wajib: src dan alt

Dua atribut ini adalah yang paling krusial dan wajib ada pada setiap tag <img> untuk standar pengembangan web yang baik.

1. Atribut src (Source)

Atribut src menentukan sumber atau lokasi dari file gambar yang ingin ditampilkan. Tanpa atribut ini, browser tidak akan tahu gambar mana yang harus dimuat. Ada dua cara untuk menentukan lokasi gambar:

• URL Relatif (Relative URL) Ini adalah cara paling umum, di mana Anda menautkan ke file gambar yang berada dalam folder proyek Anda sendiri. Path-nya bersifat relatif terhadap lokasi file HTML Anda.

  Struktur Proyek yang Disarankan:

  /proyek-saya/
  ├── index.html
  └── /images/
      └── kucing-lucu.jpg
  

  Dalam struktur di atas, untuk menampilkan kucing-lucu.jpg dari file index.html, kodenya adalah:

  HTML

  <img src="images/kucing-lucu.jpg" alt="Seekor kucing oranye sedang tidur di atas bantal">
  

• URL Absolut (Absolute URL) Anda juga bisa menampilkan gambar dari situs web lain dengan menempelkan URL lengkap gambar tersebut.
  HTML

  <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="Logo resmi HTML5">
  

  Perhatian: Saat menggunakan gambar dari sumber eksternal, pastikan Anda memiliki izin untuk menggunakannya dan sadar bahwa jika gambar tersebut dihapus oleh pemiliknya, gambar di situs Anda juga akan hilang.

2. Atribut alt (Alternative Text)

Atribut alt menyediakan teks alternatif untuk sebuah gambar. Teks ini sangat penting karena dua alasan utama:

1. Aksesibilitas: Screen reader (pembaca layar) yang digunakan oleh penyandang tunanetra akan membacakan teks ini, sehingga mereka mengerti konteks gambar tersebut.
2. Fallback: Jika gambar gagal dimuat (misalnya karena salah ketik URL atau koneksi lambat), browser akan menampilkan teks alt ini sebagai gantinya.

<img src="images/grafik-penjualan-2025.png" alt="Grafik batang menunjukkan peningkatan penjualan sebesar 20% pada kuartal kedua 2025">

<img src="images/grafik.png" alt="gambar grafik">

Mengontrol Ukuran: width dan height

Anda bisa mengontrol ukuran gambar secara langsung dari HTML menggunakan atribut width (lebar) dan height (tinggi). Nilainya ditulis dalam satuan piksel.

<img src="images/kucing-lucu.jpg" alt="Kucing oranye" width="300" height="200">

Tips Profesional:

• Untuk menjaga rasio aspek (agar gambar tidak gepeng), cukup atur salah satu atribut saja (width atau height). Browser akan secara otomatis menyesuaikan sisi lainnya.
• Praktik terbaik saat ini adalah mengatur ukuran gambar menggunakan CSS untuk memisahkan antara struktur (HTML) dan presentasi (CSS), namun mengetahui atribut ini tetap penting.

Gambar sebagai Link

Sangat umum untuk membuat sebuah gambar dapat diklik dan mengarah ke halaman lain. Caranya sangat mudah, cukup bungkus tag <img> dengan tag <a> (anchor).

<a href="https://google.com">
    <img src="images/logo-google.png" alt="Link menuju halaman utama Google">
</a>

Praktik Terbaik & Konsep Modern

<figure> dan <figcaption> untuk Konteks

Saat Anda ingin memberikan caption atau keterangan resmi pada sebuah gambar, praktik semantik terbaik adalah dengan membungkus <img> Anda dengan tag <figure> dan menambahkan keterangannya di dalam tag <figcaption>.

<figure>
    <img src="images/candi-borobudur.jpg" alt="Pemandangan Candi Borobudur saat matahari terbit">
    <figcaption>Gambar 1.1 - Candi Borobudur, salah satu keajaiban dunia di Jawa Tengah, Indonesia.</figcaption>
</figure>

Optimasi Performa dengan loading="lazy"

Untuk halaman yang memiliki banyak gambar, memuat semuanya sekaligus bisa membuat situs menjadi lambat. HTML modern memiliki solusi cerdas dengan atribut loading. Dengan menyetel nilainya ke lazy, gambar hanya akan dimuat saat pengguna menggulir halaman mendekati posisi gambar tersebut.

<img src="images/gambar-di-bagian-bawah.jpg" alt="Gambar pemandangan" loading="lazy">

Contoh Kode Lengkap

Mari kita satukan semua yang telah kita pelajari dalam satu halaman.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Galeri Gambar Sederhana</title>
</head>
<body>

    <h1>Galeri Gambar Saya</h1>
    <p>Berikut adalah koleksi beberapa gambar menarik.</p>

    <hr>

    <h2>Gambar dari Folder Lokal</h2>
    <p>Ini adalah gambar kucing yang diambil dari folder `images` di proyek ini.</p>
    <img src="images/kucing-lucu.jpg" alt="Seekor kucing oranye sedang tidur" width="400" loading="lazy">

    <hr>

    <h2>Gambar dengan Keterangan (Caption)</h2>
    <p>Menggunakan tag &lt;figure&gt; dan &lt;figcaption&gt; untuk deskripsi yang semantik.</p>
    <figure>
        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="Logo resmi HTML5 berwarna oranye">
        <figcaption>Logo HTML5 - Standar modern untuk pengembangan web.</figcaption>
    </figure>

    <hr>
    
    <h2>Gambar sebagai Link</h2>
    <p>Klik logo di bawah ini untuk mengunjungi situs W3C.</p>
    <a href="https://www.w3.org/">
        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="Link menuju situs W3C" width="128">
    </a>

</body>
</html>

Kesimpulan

Menambahkan gambar adalah salah satu langkah pertama untuk membuat situs web Anda dari sekadar dokumen menjadi sebuah pengalaman visual. Selalu ingat untuk menggunakan src yang benar dan selalu sertakan atribut alt yang deskriptif. Dengan menguasai tag <img> beserta atribut-atributnya, Anda kini memiliki kekuatan untuk membuat halaman yang jauh lebih kaya dan menarik.

Pada tutorial selanjutnya, kita akan melanjutkan eksplorasi media dengan mempelajari cara menyisipkan audio dan video ke dalam halaman HTML Anda. Sampai jumpa!