Image HTML: Cara Menampilkan Gambar dengan Tag <img>

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami anchor link <a>, saatnya kita belajar menampilkan gambar — elemen visual yang membuat halaman web lebih menarik.

Apa itu Tag <img>?

Tag <img> digunakan untuk menampilkan gambar di halaman web. Berbeda dengan tag lain, <img> adalah self-closing tag — tidak memiliki closing tag. Cukup tulis <img /> dengan attribute yang diperlukan.

<img src="gambar.jpg" alt="Deskripsi gambar" />

Tag ini sangat penting karena gambar memegang peran besar dalam desain web. Tanpa gambar, website akan terlihat membosankan dan kurang menarik.

Attribute src

Attribute src (source) berisi path atau URL gambar yang akan ditampilkan. Ini adalah attribute wajib pada tag <img>.

Path Relatif

<img src="images/photo.jpg" alt="Foto profil" />
<img src="../assets/logo.png" alt="Logo" />
<img src="banner-web.jpg" alt="Banner" />

URL Absolut

<img src="https://www.example.com/images/photo.jpg" alt="Foto dari internet" />

Pastikan path yang digunakan benar. Jika path salah, gambar tidak akan muncul dan hanya menampilkan icon broken image.

Attribute alt

Attribute alt (alternative text) berisi teks deskripsi gambar. Attribute ini sangat penting untuk beberapa alasan:

1. Aksesibilitas

Screen reader membaca teks alt kepada pengguna tunanetra. Tanpa alt, pengguna tidak akan tahu isi gambar.

<img src="chart-penjualan.png" alt="Grafik penjualan bulanan naik 20 persen" />

2. Gambar Gagal Dimuat

Jika gambar gagal dimuat (link rusak atau lambat), browser menampilkan teks alt sebagai pengganti.

<img src="broken-link.jpg" alt="Foto profil user" />

3. SEO (Search Engine Optimization)

Search engine menggunakan teks alt untuk memahami konten gambar. Gambar dengan alt yang baik bisa muncul di hasil pencarian gambar.

Best Practice Menulis alt

• Deskripsikan isi gambar, bukan hanya menyebutkan “gambar”
• Gunakan kata kunci yang relevan secara natural
• Singkat tapi informatif — cukup 1-2 kalimat

<!-- ❌ Tidak baik -->
<img src="foto.jpg" alt="gambar" />
<img src="foto.jpg" alt="" />

<!-- ✅ Baik -->
<img src="foto.jpg" alt="Pemandangan gunung saat sunset" />
<img src="logo.png" alt="Logo perusahaan XYZ" />

Mengatur Ukuran Gambar

Attribute width dan height

Kamu bisa mengatur ukuran gambar menggunakan attribute width (lebar) dan height (tinggi) dalam satuan piksel:

<img src="photo.jpg" alt="Foto profil" width="300" height="200" />

Mengatur Salah Satu Saja

Jika kamu hanya mengatur width, browser akan menghitung height secara otomatis untuk menjaga proporsi gambar:

<img src="photo.jpg" alt="Foto profil" width="500" />

Tips Pengaturan Ukuran

• Jangan paksa ukuran yang berbeda terlalu jauh — Gambar akan terlihat pecah atau meregang
• Gunakan CSS untuk styling lebih lanjut — Attribute HTML untuk ukuran dasar, CSS untuk kontrol lebih detail
• Pertimbangkan responsive — Gambar harus menyesuaikan ukuran layar

<!-- Gambar akan ditampilkan dengan lebar 100% container -->
<img src="banner.jpg" alt="Banner website" style="width: 100%; height: auto;" />

Format Gambar yang Umum Digunakan

1. JPG/JPEG

<img src="foto.jpg" alt="Foto" />

• Cocok untuk foto dan gambar dengan banyak warna
• Kompresi lossy (kualitas sedikit berkurang tapi ukuran kecil)
• Tidak mendukung transparansi
• Ukuran file relatif kecil

2. PNG

<img src="logo.png" alt="Logo" />

• Mendukung transparansi (background transparan)
• Kualitas lebih tinggi dari JPG
• Ukuran file lebih besar
• Cocok untuk logo, icon, dan grafis sederhana

3. GIF

<img src="animasi.gif" alt="Animasi" />

• Mendukung animasi (gambar bergerak)
• Mendukung transparansi
• Waktu terbatas untuk 256 warna
• Cocok untuk animasi sederhana dan meme

4. SVG

<img src="icon.svg" alt="Icon" />

• Format vektor (bisa di-scale tanpa pecah)
• Ukuran file sangat kecil untuk grafis sederhana
• Cocok untuk icon, logo, dan ilustrasi
• Bisa dimodifikasi dengan CSS dan JavaScript

5. WebP

<img src="foto.webp" alt="Foto" />

• Format modern dari Google
• Kualitas tinggi dengan ukuran file kecil
• Mendukung transparansi dan animasi
• Kompatibilitas luas di browser modern

Perbandingan Format

Gambar sebagai Link

Kamu bisa membungkus tag <img> dengan tag <a> agar gambar menjadi link yang bisa diklik:

<a href="https://www.example.com">
  <img src="banner.jpg" alt="Banner promosi" />
</a>

Sangat berguna untuk banner iklan, thumbnail artikel, atau produk toko online.

Gambar Responsive

Untuk membuat gambar menyesuaikan ukuran layar, gunakan CSS:

<img src="photo.jpg" alt="Foto responsif" style="max-width: 100%; height: auto;" />

• max-width: 100% — Gambar tidak akan lebih lebar dari container
• height: auto — Tinggi otomatis menyesuaikan proporsi

Lazy Loading

Lazy loading membuat gambar hanya dimuat saat scrolling mendekati posisi gambar. Ini mempercepat waktu load halaman:

<img src="photo.jpg" alt="Foto dengan lazy loading" loading="lazy" />

Attribute loading="lazy" didukung oleh browser modern dan sangat disarankan untuk halaman dengan banyak gambar.

Best Practice Gambar di HTML

1. Selalu Sertakan alt

<!-- ❌ Tidak baik -->
<img src="photo.jpg" />

<!-- ✅ Baik -->
<img src="photo.jpg" alt="Deskripsi gambar" />

2. Gunakan Format yang Tepat

• Foto → JPG atau WebP
• Logo/Icon → SVG atau PNG
• Animasi → GIF atau WebP

3. Kompres Gambar

Kompres gambar sebelum upload untuk mempercepat loading:

• Tool: TinyPNG, Squoosh, ImageOptim
• Target: kurang dari 100KB untuk gambar standar

4. Gunakan ukuran yang Sesuai

Jangan menampilkan gambar 4000px lalu mengecilkan dengan CSS. Upload gambar dengan ukuran yang sesuai kebutuhan.

Contoh Penggunaan Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Gambar di HTML</title>
  </head>
  <body>
    <h1>Galeri Foto</h1>

    <!-- Gambar standar dengan alt -->
    <img src="images/pemandangan.jpg" alt="Pemandangan gunung saat sunset" width="600" />

    <!-- Gambar sebagai link -->
    <a href="https://www.example.com">
      <img src="images/banner.jpg" alt="Banner promosi website" />
    </a>

    <!-- Gambar SVG -->
    <img src="images/icon-home.svg" alt="Icon beranda" width="24" height="24" />

    <!-- Gambar responsive -->
    <img src="images/produk.webp" alt="Produk terbaru" style="max-width: 100%; height: auto;" />

    <!-- Gambar dengan lazy loading -->
    <img src="images/gallery-1.jpg" alt="Galeri foto 1" loading="lazy" />
  </body>
</html>

Ringkasan

• Tag <img> adalah self-closing tag untuk menampilkan gambar
• Attribute src berisi path atau URL gambar (wajib)
• Attribute alt berisi deskripsi gambar untuk aksesibilitas dan SEO (wajib)
• Attribute width dan height mengatur ukuran dalam piksel
• Format umum: JPG (foto), PNG (transparan), GIF (animasi), SVG (vektor), WebP (modern)
• Gunakan loading="lazy" untuk mempercepat loading halaman
• Kompres gambar untuk performa yang lebih baik

Langkah Selanjutnya

Kamu sudah memahami cara menampilkan gambar menggunakan tag <img> di HTML. Di artikel selanjutnya, kita akan belajar tentang relative vs absolute path — perbedaan cara mengakses file di HTML.