Gambar Lanjutan: figure, srcset

Analogi: Foto Koran dan Baju Berbagai Ukuran

Buka koran atau majalah. Setiap foto penting selalu ditemani caption, kalimat kecil di bawahnya yang menjelaskan konteks foto itu. Caption bukan sekadar tempelan, ia adalah bagian resmi dari foto: tanpanya pembaca menebak-nebak sendiri maksud foto itu. Itulah peran <figure> dan <figcaption> di HTML, membungkus gambar beserta keterangannya sebagai satu kesatuan konten.

Analogi kedua: toko baju. Penjual bijak tidak menjual satu ukuran untuk semua badan, ia menyediakan S, M, L, dan pembeli memilih yang pas. srcset melakukan hal yang sama untuk gambar: kamu menyediakan beberapa ukuran file, dan browser memilih yang paling pas untuk layar pengunjung. HP dengan layar kecil tidak perlu mengunduh foto raksasa 2000 piksel.

Kenapa Konsep Ini Ada

Dua masalah, dua solusi. Masalah pertama: banyak pemula menulis caption foto sebagai paragraf biasa di bawah <img>. Secara visual memang mirip, tapi bagi screen reader dan mesin pencari, gambar dan caption itu dua hal yang tidak berhubungan. <figure> memecahkan ini dengan menyatakan secara resmi: "gambar dan caption ini adalah satu paket." Screen reader membacakannya sebagai satu unit, dan Google memahami konteks fotonya dengan lebih baik.

Masalah kedua: boros kuota. Kalau satu file gambar 2 MB dipakai untuk semua perangkat, pengunjung HP dengan kuota pas-pasan harus mengunduh 2 MB hanya untuk melihat foto selebar 400 piksel di layarnya. Di negara dengan internet mahal, ini alasan nyata orang meninggalkan sebuah situs. srcset memecahkan ini dengan memberi browser beberapa pilihan ukuran file, lalu browser memilih file terkecil yang masih cukup tajam untuk layar itu. Bonusnya, atribut loading="lazy" menunda unduhan gambar sampai pengunjung hampir scroll ke posisinya, sehingga halaman terbuka jauh lebih cepat.

Contoh 1: Foto Artikel dengan Caption Resmi

<figure>
  <img src="kawah-putih.jpg"
       alt="Kawah putih diselimuti kabut tipis"
       width="800" height="500" />
  <figcaption>Kawah Putih pukul 7 pagi, difoto dari area parkir atas.</figcaption>
</figure>

<figcaption> harus selalu berada di dalam <figure>, boleh sebelum atau sesudah <img>. Bedakan dengan alt: alt menjelaskan isi gambar untuk yang tidak bisa melihatnya, sedangkan figcaption memberi konteks tambahan yang terlihat oleh semua orang (kapan, di mana, oleh siapa). Keduanya melengkapi, bukan menggantikan.

Contoh 2: Gambar Responsif yang Hemat Kuota

Contoh yang lebih realistis untuk situs yang diakses banyak lewat HP:

<img src="pantai-sedang.jpg"
     srcset="pantai-kecil.jpg 480w,
             pantai-sedang.jpg 800w,
             pantai-besar.jpg 1200w"
     sizes="(max-width: 600px) 480px, 800px"
     alt="Pantai berpasir putih saat senja"
     width="800" height="500"
     loading="lazy" />

Cara membacanya: srcset mendaftarkan tiga file beserta lebar asli masing-masing (480w artinya file itu selebar 480 piksel). sizes memberi tahu browser seberapa lebar gambar akan tampil: 480 piksel kalau layar sempit (di bawah 600 piksel), 800 piksel untuk sisanya. Berbekal dua info itu, browser menghitung sendiri file mana yang paling efisien. Di HP kecil ia mengambil pantai-kecil.jpg, di laptop ia mengambil pantai-sedang.jpg. Atribut src biasa tetap ditulis sebagai cadangan untuk browser sangat lawas, dan loading="lazy" memastikan gambar di bawah lipatan halaman tidak diunduh sebelum dibutuhkan.

Kesalahan Umum Pemula

1. Menaruh figcaption di luar <figure>.

Salah:

<figure>
  <img src="gunung.jpg" alt="Gunung" width="600" height="400" />
</figure>
<p>Gunung Tangkuban Perahu saat pagi hari.</p>

Benar:

<figure>
  <img src="gunung.jpg" alt="Gunung Tangkuban Perahu" width="600" height="400" />
  <figcaption>Gunung Tangkuban Perahu saat pagi hari.</figcaption>
</figure>

Caption di luar figure hanyalah paragraf biasa yang kebetulan terletak di bawah gambar. Hanya caption di dalam figure yang diakui browser dan screen reader sebagai pasangan resmi gambar itu.

2. Menulis srcset tanpa sizes lalu heran kenapa browser selalu mengambil file terbesar.

Salah:

<img src="kecil.jpg"
     srcset="kecil.jpg 480w, besar.jpg 1200w"
     alt="Pemandangan" />

Benar:

<img src="kecil.jpg"
     srcset="kecil.jpg 480w, besar.jpg 1200w"
     sizes="(max-width: 600px) 480px, 1200px"
     alt="Pemandangan" />

Tanpa sizes, browser tidak tahu seberapa lebar gambar akan tampil sehingga ia bermain aman dengan mengunduh file terbesar. Itu menghilangkan seluruh manfaat srcset. Selalu pasangkan keduanya.

3. Memberi loading="lazy" pada gambar hero di bagian paling atas halaman.

Salah:

<img src="hero.jpg" alt="Foto utama warkop" loading="lazy" />

Benar: biarkan gambar hero tanpa loading="lazy" (atau pakai fetchpriority="high"), dan pasang loading="lazy" hanya untuk gambar yang berada di bawah lipatan halaman.

Gambar hero langsung terlihat begitu halaman dibuka, jadi menunda muatnya justru membuat halaman terlihat kosong lebih lama. Lazy loading hanya menghemat untuk gambar yang memang belum perlu dilihat.

Catatan teknis: Kalau kamu butuh gambar yang benar-benar berbeda (bukan sekadar beda ukuran) untuk HP dan desktop, misalnya versi crop vertikal untuk HP, pakai elemen <picture> dengan beberapa <source media="...">. Itu disebut art direction, sedangkan srcset murni soal memilih resolusi yang efisien.