Gambar Bikin Web Lebih Hidup dan Menarik!

Coba bayangin, website berita tanpa foto kejadian, toko online tanpa gambar produk, atau blog resep tanpa foto masakan yang menggiurkan. Pasti kurang menarik banget, kan? Gambar adalah salah satu elemen visual paling penting yang bisa bikin halaman web-mu jadi lebih hidup, informatif, dan enak dilihat.

Untungnya, nampilin gambar di HTML itu gampang banget. Kita cuma butuh satu tag utama, yaitu <img>.

Tag <img>: Jagoan Buat Nampilin Gambar

Tag <img> (singkatan dari image) adalah tag yang kita pakai buat nyisipin gambar ke dalam halaman web. Ada beberapa hal penting yang perlu kamu tau soal tag <img>:

1. Elemen Kosong (Empty Element): Tag <img> ini termasuk elemen kosong. Artinya, dia gak punya tag penutup </img>. Cukup ditulis <img ... > atau <img ... /> (gaya self-closing).
2. Atribut Wajib: Ada dua atribut yang wajib ada di setiap tag <img>:
   • src (Source)
   • alt (Alternative Text)

Mari kita bedah atribut-atribut penting ini.

Atribut src (Source): Di Mana Lokasi Gambarmu?

Atribut src ini nunjukin sumber atau lokasi file gambar yang mau kamu tampilin. Nilainya bisa berupa:

1. URL Relatif: Mirip kayak di link, ini adalah path ke file gambar yang ada di website-mu sendiri.

   • Gambar di folder yang sama dengan file HTML:

     <img src="kucing-lucu.jpg" alt="Seekor kucing oranye sedang bermain">

   • Gambar di sub-folder (misal, folder images):

     <img src="images/logo-perusahaan.png" alt="Logo Perusahaan Kami">

   • Gambar di folder induk (naik satu level):

     <img src="../assets/banner-promo.gif" alt="Banner promosi diskon besar">

2. URL Absolut: Ini adalah alamat lengkap ke file gambar yang ada di website lain (eksternal) atau di server CDN (Content Delivery Network).

   <img src="https://images.unsplash.com/photo-1746704946700-7a81d00aedc8?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Pemandangan gunung berkabut">

   Perhatian saat pakai gambar eksternal:

   • Pastikan kamu punya izin buat nampilin gambar dari website lain (isu hak cipta).
   • Kalau gambar di server eksternal itu dihapus atau diubah, gambarmu di website juga bakal ilang atau berubah.
   • Kecepatan loading gambar bisa tergantung server eksternal tersebut.

Atribut alt (Alternative Text): Teks Alternatif yang Super Penting!

Atribut alt ini WAJIB BANGET ada di setiap tag <img>. Fungsinya adalah nyediain teks alternatif buat gambar. Teks ini bakal:

1. Ditampilkan jika gambar gagal loading: Kalau karena satu dan lain hal (koneksi lambat, path salah, gambar dihapus) gambar gak bisa muncul, teks alt ini yang bakal tampil sebagai gantinya. Jadi, pengguna tetep dapet konteks soal gambar apa yang seharusnya ada di situ.
2. Dibacakan oleh Screen Reader: Ini krusial buat aksesibilitas. Pengguna tunanetra yang pake screen reader (pembaca layar) bakal dengerin teks alt ini buat ngerti isi gambarnya. Tanpa alt yang deskriptif, mereka bakal kehilangan informasi penting.
3. Membantu SEO: Mesin pencari juga "baca" teks alt buat ngerti konten gambarmu, yang bisa bantu gambar itu muncul di hasil pencarian gambar.

Gimana nulis teks alt yang baik?

• Deskriptif tapi singkat: Jelaskan isi gambar secara ringkas tapi jelas. Bayangin kamu lagi ngejelasin gambar itu ke orang yang gak bisa liat.
• Konteks itu penting: Sesuaikan deskripsi dengan konteks gambar di halaman tersebut.
• Hindari "gambar dari...", "foto...", "image of...": Screen reader udah tau itu gambar. Langsung aja ke deskripsi isinya.
• Kalau gambar itu murni dekoratif dan gak nambah informasi penting: Kamu bisa kasih alt="" (atribut alt kosong). Ini ngasih tau screen reader buat ngabaikan gambar itu. Tapi, pastikan bener-bener dekoratif ya!
• Kalau gambar itu juga berfungsi sebagai link: Teks alt-nya harus ngejelasin tujuan link-nya, bukan cuma deskripsi gambarnya.

Contoh penggunaan alt:

<!-- Bagus -->
<img src="kucing-tidur.jpg" alt="Seekor kucing belang tiga sedang tidur pulas di atas bantal empuk">
 
<!-- Kurang bagus -->
<img src="kucing-tidur.jpg" alt="kucing"> 
 
<!-- Untuk gambar dekoratif (misal, garis pemisah berbentuk gambar) -->
<img src="garis-hias.png" alt=""> 
 
<!-- Gambar sebagai link -->
<a href="produk-kopi.html">
    <img src="logo-kopi.png" alt="Lihat semua produk kopi kami">
</a>

Jangan pernah skip atribut alt! Ini bukan cuma soal teknis, tapi juga soal inklusivitas.

Atribut width dan height: Ngatur Ukuran Gambar

Kamu bisa nentuin ukuran lebar (width) dan tinggi (height) gambar langsung di HTML pake atribut ini. Nilainya biasanya dalam pixel (tapi gak perlu ditulis px-nya).

<img src="foto-profil.jpg" alt="Foto profil Budi" width="150" height="150">
<img src="banner-iklan.png" alt="Iklan diskon spesial" width="728" height="90">

Beberapa poin penting soal width dan height di HTML:

1. Menjaga Layout: Kalau kamu nentuin width dan height, browser bisa "nyiapin tempat" buat gambar itu sebelum gambarnya selesai di-load. Ini mencegah layout halaman "loncat-loncat" pas gambar muncul, jadi pengalaman pengguna lebih enak.
2. Rasio Aspek: Hati-hati! Kalau kamu nentuin width dan height yang gak sesuai sama rasio aspek asli gambarnya, gambarnya bisa jadi gepeng atau memanjang (distorsi).
   • Tips: Kalau cuma mau ngatur salah satu (misal, width aja), browser biasanya bakal otomatis ngitung dimensi satunya biar rasio aspeknya terjaga. Tapi ini gak selalu konsisten di semua browser atau kondisi.
3. Styling vs HTML: Untuk kontrol styling yang lebih fleksibel dan responsif (gambar yang ukurannya bisa nyesuaiin layar), lebih disarankan buat ngatur width dan height gambar pake CSS. Misalnya, pake max-width: 100%; height: auto; di CSS biar gambar gak lebih lebar dari kontainernya dan tingginya nyesuaiin.
   • Meskipun begitu, nyantumin width dan height di HTML (sesuai ukuran asli gambar) tetep bagus buat "booking" tempat dan mencegah layout shifting, nanti CSS bisa nge-override ukurannya.

Format Gambar yang Umum di Web

Ada beberapa format file gambar yang umum dipake di web, masing-masing punya kelebihan dan kekurangan:

• JPEG (Joint Photographic Experts Group) - .jpg atau .jpeg:

  • Cocok untuk: Foto, gambar dengan banyak warna dan gradasi.
  • Kelebihan: Ukuran file bisa kecil dengan kompresi yang bagus (tapi lossy compression, artinya ada sedikit penurunan kualitas).
  • Kekurangan: Gak support transparansi.

• PNG (Portable Network Graphics) - .png:

  • Cocok untuk: Logo, ikon, ilustrasi, gambar dengan area transparan, gambar dengan teks atau garis tegas.
  • Kelebihan: Lossless compression (kualitas gak berkurang), support transparansi (alpha channel).
  • Kekurangan: Ukuran file bisa lebih besar dari JPEG untuk foto kompleks.

• GIF (Graphics Interchange Format) - .gif:

  • Cocok untuk: Animasi sederhana, gambar dengan palet warna terbatas.
  • Kelebihan: Support animasi, ukuran file kecil untuk animasi simpel.
  • Kekurangan: Palet warna terbatas (maksimal 256 warna), jadi kurang bagus buat foto. Kualitasnya juga bisa menurun.

• SVG (Scalable Vector Graphics) - .svg:

  • Cocok untuk: Logo, ikon, ilustrasi berbasis vektor.
  • Kelebihan: Berbasis XML (teks), jadi bisa di-scale (diperbesar/diperkecil) tanpa pecah atau blur. Ukuran file biasanya kecil. Bisa dimanipulasi pake CSS dan JavaScript.
  • Kekurangan: Kurang cocok buat foto kompleks.

• WebP - .webp:

  • Format modern yang dikembangin Google.
  • Kelebihan: Bisa ngasih kompresi yang lebih baik (lossy dan lossless) dibanding JPEG dan PNG dengan kualitas visual yang sebanding atau lebih baik. Support transparansi dan animasi.
  • Kekurangan: Dukungan browser udah bagus, tapi mungkin masih ada browser super jadul yang gak support.
    • Kamu bisa pake elemen <picture> buat nyediain fallback ke format lain (misal, JPEG/PNG) kalau WebP gak didukung. (Ini topik yang lebih advanced).

Pilih format yang paling sesuai dengan jenis gambarmu dan kebutuhanmu (kualitas vs ukuran file).

Gambar Sebagai Bagian dari Konten Semantik: <figure> dan <figcaption>

Kadang, gambar itu bukan cuma hiasan, tapi bagian penting dari konten yang punya keterangan atau caption tersendiri. Misalnya, diagram dengan penjelasan, foto di artikel berita dengan caption, atau contoh kode sebagai gambar dengan judul.

Untuk kasus kayak gini, HTML5 nyediain elemen <figure> dan <figcaption>:

• <figure>: Elemen ini ngebungkus konten mandiri yang jadi satu kesatuan, biasanya gambar, ilustrasi, diagram, potongan kode, dll., yang dirujuk dari teks utama.
• <figcaption>: Elemen ini nyediain caption atau legenda buat konten di dalam <figure>. Idealnya cuma ada satu <figcaption> per <figure>, dan bisa ditaruh di awal atau akhir <figure>.

Contoh Penggunaan <figure> dan <figcaption>:

<figure>
    <img src="diagram-aliran-data.png" alt="Diagram alir yang menunjukkan proses input, proses, dan output data.">
    <figcaption>Gambar 1: Diagram Aliran Data Sistem Informasi Penjualan.</figcaption>
</figure>
 
<p>Seperti yang terlihat pada Gambar 1, data penjualan akan diproses...</p>
 
<figure>
    <pre><code>
function sapa(nama) {
  return "Halo, " + nama;
}
    </code></pre>
    <figcaption>Contoh kode JavaScript untuk fungsi sapa.</figcaption>
</figure>

Menggunakan <figure> dan <figcaption> ini lebih semantik (lebih bermakna) daripada cuma naruh gambar dan paragraf biasa di bawahnya. Ini bagus buat struktur dokumen dan aksesibilitas.

Nah, sekarang kamu udah punya bekal buat nambahin gambar ke halaman web-mu! Inget, gambar itu kuat banget buat narik perhatian dan nyampein informasi, tapi gunain dengan bijak ya. Perhatiin ukuran file biar web-mu gak lemot, dan yang paling penting, selalu sertakan atribut alt yang deskriptif!

Di materi berikutnya, kita bakal belajar cara nyajiin data tabular pake Tabel HTML. Siap-siap berurusan sama baris dan kolom!