adydetra_
4 Jul 2025

Gambar di HTML

Di bagian sebelumnya, kita sudah bahas tentang cara membuat tautan dan navigasi di HTML. Sekarang, mari kita lanjut ke materi yang nggak kalah penting, yaitu menampilkan gambar di halaman web.

Menampilkan gambar itu simpel, tapi ada beberapa hal yang perlu diperhatikan supaya tampilannya optimal di semua perangkat.

Struktur Dasar HTML untuk Gambar

Seperti biasa, kita mulai dengan contoh dasar struktur HTML-nya dulu:

index.html
<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    <!-- Contoh gambar taruh di sini -->
  </body>
</html>

Menampilkan Gambar dengan <img>

Cara paling sederhana menampilkan gambar pakai tag <img> seperti ini:

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

Penjelasannya:

  • src: Lokasi atau path gambar.
  • alt: Teks alternatif yang muncul kalau gambarnya gagal dimuat.

Contoh menggunakan gambar dari URL eksternal:

<img src="https://www.contoh.com/gambar.jpg" alt="Contoh gambar dari URL">

Mengatur Ukuran Gambar

Biasanya gambar perlu disesuaikan ukurannya biar nggak terlalu besar atau kecil di layar. Kamu bisa atur dengan atribut width dan height.

<img src="gambar.jpg" alt="Deskripsi gambar" width="300" height="200">

Tips:
Kalau cuma set satu atribut (misal width saja), ukuran akan otomatis menyesuaikan proporsi gambar.

<img src="gambar.jpg" alt="Deskripsi gambar" width="300">

Membuat Gambar Responsif

Supaya gambar fleksibel dan menyesuaikan ukuran layar, biasanya kita pakai CSS sederhana seperti ini:

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

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

Dengan begitu, gambar otomatis menyesuaikan ukuran layar perangkat apa pun, termasuk smartphone atau tablet.

Terkadang gambar juga bisa jadi tombol atau link ke halaman lain:

<a href="https://www.adydetra.my.id">
  <img src="logo.png" alt="Logo Website" width="150">
</a>

Gambar dengan Figure dan Caption

Untuk gambar yang butuh penjelasan atau caption, gunakan elemen <figure> dan <figcaption>.

<figure>
  <img src="gambar.jpg" alt="Gunung Bromo" width="400">
  <figcaption>Gunung Bromo saat matahari terbit.</figcaption>
</figure>

Format Gambar yang Umum Digunakan

Saat mau pakai gambar, biasanya kita pilih dari beberapa format yang umum dipakai di web:

  • JPG/JPEG: Bagus untuk foto dan gambar dengan banyak warna.
  • PNG: Cocok untuk gambar transparan atau gambar dengan kualitas tinggi.
  • GIF: Untuk gambar animasi sederhana.
  • SVG: Ideal untuk ikon atau grafik vektor yang ukurannya bisa disesuaikan tanpa pecah.

Tips Optimasi Gambar untuk Web

  • Ukuran file kecil: Kompres dulu sebelum upload, pakai tools seperti TinyPNG atau Compressor.io.
  • Gunakan nama file yang deskriptif: Contoh: gunung-bromo.jpg lebih baik daripada img001.jpg.
  • Teks alternatif (alt) wajib diisi: Penting buat SEO dan aksesibilitas web.

Kesimpulan

Menggunakan gambar secara tepat membuat konten di halaman web kamu makin menarik. Ingat juga untuk mengoptimasi ukuran gambar supaya loading halaman nggak lambat.

Di bagian selanjutnya, kita akan lanjut belajar daftar (list) di HTML.