Gambar & Alt Text

Gambar & Alt Text 🖼️

Gambar adalah salah satu elemen paling penting di halaman web — mempercantik tampilan, memperjelas konten, dan meningkatkan keterlibatan pengguna. Namun cara penggunaannya yang benar jauh lebih dalam dari sekadar <img src="...">.

Struktur Dasar

Tag untuk menampilkan gambar adalah <img> — merupakan self-closing tag yang tidak memiliki tag penutup:

<img src="foto.jpg" alt="Deskripsi foto">

Dua atribut yang wajib selalu ada:

• src — sumber / lokasi file gambar
• alt — teks alternatif yang mendeskripsikan gambar

Atribut src — Sumber Gambar

Nilai src bisa berupa URL relatif, URL absolut, atau bahkan data base64:

URL Relatif — file gambar di dalam proyek sendiri:

<!-- File di folder yang sama dengan HTML -->
<img src="foto.jpg" alt="Foto profil">

<!-- File di dalam subfolder -->
<img src="assets/images/banner.jpg" alt="Banner utama">

<!-- Naik satu level folder -->
<img src="../images/logo.png" alt="Logo perusahaan">

URL Absolut — gambar dari internet:

<img src="https://example.com/images/produk.jpg" alt="Foto produk">

Format yang didukung browser:

Atribut alt — Teks Alternatif

alt adalah atribut yang menampilkan teks pengganti ketika gambar gagal dimuat, dan dibacakan oleh screen reader kepada pengguna tunanetra.

<!-- Gambar berhasil dimuat — alt tidak terlihat -->
<img src="kucing.jpg" alt="Kucing oranye sedang tidur di sofa">

<!-- Gambar gagal dimuat — alt ditampilkan sebagai teks -->
<img src="kucing-rusak.jpg" alt="Kucing oranye sedang tidur di sofa">

Saat gambar gagal dimuat, browser menampilkan:

[🖼️ Kucing oranye sedang tidur di sofa]

Cara Menulis Alt Text yang Baik

Gambar informatif — deskripsikan isi gambar secara spesifik:

<!-- KURANG BAIK — terlalu umum -->
<img src="presiden.jpg" alt="foto">
<img src="presiden.jpg" alt="gambar">
<img src="presiden.jpg" alt="orang">

<!-- BAIK — deskriptif dan spesifik -->
<img src="presiden.jpg" alt="Presiden Joko Widodo sedang berpidato di podium">

Gambar dekoratif — gunakan alt kosong:

Jika gambar hanya dekorasi dan tidak menambah informasi, berikan alt="" (kosong) — screen reader akan melewatinya:

<!-- Gambar dekoratif — alt dikosongkan -->
<img src="garis-pembatas.png" alt="">
<img src="background-pattern.png" alt="">

Gambar produk — sebutkan nama dan detail penting:

<img src="sepatu-nike.jpg" alt="Sepatu Nike Air Max 270 warna putih, tampak samping kiri">

Gambar grafik / infografis — jelaskan informasi yang disampaikan:

<img src="grafik-penjualan.png" alt="Grafik batang penjualan Q1 2025 menunjukkan peningkatan 35% dibanding Q4 2024">

Gambar tombol / ikon — jelaskan fungsinya:

<img src="ikon-cari.svg" alt="Cari">
<img src="ikon-keranjang.svg" alt="Keranjang belanja">

Atribut width dan height

Selalu cantumkan dimensi gambar agar browser bisa mereservasi ruang sebelum gambar selesai dimuat — mencegah layout shift yang mengganggu:

<img 
  src="banner.jpg" 
  alt="Banner promosi akhir tahun" 
  width="800" 
  height="400"
>

Nilai width dan height dalam satuan pixel. Jika hanya satu yang dicantumkan, browser akan menyesuaikan dimensi lainnya secara proporsional:

<!-- Lebar 300px, tinggi menyesuaikan otomatis -->
<img src="foto.jpg" alt="Foto" width="300">

Atribut loading — Lazy Loading

Atribut loading="lazy" membuat gambar hanya dimuat saat mendekati viewport — sangat meningkatkan performa halaman dengan banyak gambar:

<!-- Gambar di atas fold — muat segera -->
<img src="hero.jpg" alt="Hero banner" loading="eager">

<!-- Gambar di bawah fold — muat saat mendekati layar -->
<img src="produk-1.jpg" alt="Produk 1" loading="lazy">
<img src="produk-2.jpg" alt="Produk 2" loading="lazy">
<img src="produk-3.jpg" alt="Produk 3" loading="lazy">

Atribut title — Tooltip Gambar

Menampilkan teks kecil saat mouse diarahkan ke gambar:

<img 
  src="peta.jpg" 
  alt="Peta lokasi kantor kami di Semarang"
  title="Klik untuk memperbesar peta"
>

title berbeda dengan alt — alt untuk aksesibilitas dan fallback, title hanya tooltip tambahan.

Gambar sebagai Link

Menggabungkan <img> di dalam <a> untuk gambar yang bisa diklik:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <img src="banner-promo.jpg" alt="Promo akhir tahun — diskon hingga 70%">
</a>

Gambar Responsif dengan CSS

Membuat gambar menyesuaikan lebar container secara otomatis:

<style>
  img {
    max-width: 100%;    /* tidak melebihi lebar container */
    height: auto;       /* tinggi proporsional */
    display: block;     /* hilangkan gap bawah default inline */
  }
</style>

<img src="foto-besar.jpg" alt="Foto landscape panorama gunung">

Atribut srcset — Gambar Responsif Tingkat Lanjut

srcset memungkinkan browser memilih gambar yang paling sesuai dengan ukuran layar dan resolusi perangkat — gambar kecil untuk mobile, gambar besar untuk desktop:

<img 
  src="foto-800.jpg"
  srcset="
    foto-400.jpg 400w,
    foto-800.jpg 800w,
    foto-1200.jpg 1200w
  "
  sizes="
    (max-width: 480px) 400px,
    (max-width: 900px) 800px,
    1200px
  "
  alt="Pemandangan pantai Bali saat matahari terbenam"
>

• srcset — daftar gambar dengan lebar masing-masing (w = width descriptor)
• sizes — kondisi media query dan ukuran gambar yang sesuai
• src — fallback untuk browser yang tidak mendukung srcset

Tag <figure> dan <figcaption>

Untuk gambar yang membutuhkan keterangan/caption, gunakan <figure> dan <figcaption>:

<figure>
  <img 
    src="batik-solo.jpg" 
    alt="Pengrajin batik tulis di Solo sedang membatik dengan canting"
    width="600"
  >
  <figcaption>
    Pengrajin batik tulis di Kampung Batik Laweyan, Solo. 
    Proses membatik dengan canting membutuhkan ketelitian dan kesabaran tinggi.
  </figcaption>
</figure>

Hasilnya:

┌─────────────────────────────────────┐
│                                     │
│           [foto batik]              │
│                                     │
└─────────────────────────────────────┘
  Pengrajin batik tulis di Kampung 
  Batik Laweyan, Solo. Proses membatik
  dengan canting membutuhkan...

<figcaption> bisa diletakkan sebelum atau sesudah <img> di dalam <figure>.

Styling Gambar dengan CSS

<style>
  /* Gambar bulat */
  .foto-profil {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;      /* crop gambar agar proporsional */
    border: 3px solid #4a9eed;
  }

  /* Gambar dengan shadow */
  .foto-produk {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s;
  }

  .foto-produk:hover {
    transform: scale(1.03);   /* sedikit membesar saat hover */
  }

  /* Caption styling */
  figcaption {
    text-align: center;
    font-size: 14px;
    color: #757575;
    margin-top: 8px;
    font-style: italic;
  }
</style>

<!-- Foto profil bulat -->
<img src="avatar.jpg" alt="Foto profil Budi Santoso" class="foto-profil">

<!-- Gambar produk dengan hover effect -->
<figure>
  <img src="produk.jpg" alt="Sepatu Nike Air Max" class="foto-produk">
  <figcaption>Nike Air Max 270 — Rp 1.850.000</figcaption>
</figure>

object-fit — Mengatur Cara Gambar Mengisi Container

Properti CSS object-fit sangat berguna saat gambar harus memenuhi container berukuran tetap:

<style>
  .card-img {
    width: 300px;
    height: 200px;
  }

  .cover   { object-fit: cover; }    /* crop — memenuhi container, mungkin terpotong */
  .contain { object-fit: contain; }  /* seluruh gambar terlihat, mungkin ada ruang kosong */
  .fill    { object-fit: fill; }     /* gambar diregangkan memenuhi container */
  .none    { object-fit: none; }     /* ukuran asli gambar */
</style>

Checklist Gambar yang Baik ✅

✓ Selalu sertakan atribut alt yang deskriptif
✓ Gambar dekoratif gunakan alt="" (kosong)
✓ Cantumkan width dan height untuk mencegah layout shift
✓ Gunakan loading="lazy" untuk gambar di bawah fold
✓ Kompres gambar sebelum upload (gunakan TinyPNG atau Squoosh)
✓ Pilih format yang tepat — WebP untuk foto, SVG untuk ikon
✓ Gunakan figure + figcaption untuk gambar dengan keterangan
✓ Pastikan gambar responsif dengan max-width: 100%

Ringkasan Atribut <img>

💡 Tips: Alt text yang baik adalah investasi jangka panjang — membantu SEO karena mesin pencari membaca alt text untuk memahami gambar, membantu aksesibilitas bagi pengguna tunanetra, dan menjadi fallback saat gambar gagal dimuat. Luangkan waktu untuk menulis alt text yang benar-benar deskriptif di setiap gambar. 🎯