Cara Menyisipkan Gambar di HTML: Tag img, Atribut src, alt, width, dan height

Gambar adalah salah satu elemen visual paling mendasar dalam sebuah halaman web. Hampir tidak ada situs modern yang tidak menampilkan setidaknya satu gambar, baik berupa logo, foto artikel, ilustrasi produk, maupun ikon navigasi. Sebagai seseorang yang sudah mengenal cara membuat tautan dan menampilkan teks di HTML, Anda telah memiliki fondasi yang cukup kuat untuk melangkah ke tahap berikutnya, yaitu menyisipkan gambar menggunakan elemen <img>. Elemen ini merupakan bagian dari kategori HTML Media, yakni sekumpulan elemen yang memungkinkan browser menampilkan konten berupa gambar, audio, video, dan media tertanam lainnya. Memahami cara kerja <img> bukan sekadar mengetahui cara menuliskan satu baris kode, melainkan memahami hubungan antara tag, atribut, lokasi file, dan bagaimana browser menginterpretasikan semuanya menjadi tampilan visual yang dapat dilihat pengguna. Tutorial ini akan memandu Anda secara bertahap dari konsep dasar hingga praktik nyata yang langsung bisa dicoba di komputer Anda.

Sebelum mulai menulis kode, penting untuk memahami bahwa elemen <img> di HTML memiliki sejumlah atribut utama yang masing-masing memiliki peran spesifik. Atribut src memberi tahu browser di mana file gambar berada. Atribut alt menyediakan teks alternatif yang ditampilkan ketika gambar tidak berhasil dimuat, sekaligus membantu pembaca layar bagi pengguna dengan keterbatasan penglihatan. Atribut width dan height menentukan dimensi tampilan gambar dalam piksel. Keempat atribut ini bekerja bersama-sama dan memiliki konsekuensi nyata jika salah satu dihilangkan atau diisi dengan nilai yang tidak tepat. Tutorial ini menggunakan editor teks biasa seperti Notepad, VS Code, atau Notepad++ serta browser modern seperti Google Chrome atau Firefox. Tidak diperlukan server lokal maupun instalasi tambahan karena semua contoh dalam panduan ini dapat dijalankan langsung dengan membuka file HTML di browser.

Landasan Sains dan Prinsip Kerja Metode

Elemen <img> dalam HTML adalah apa yang disebut sebagai void element atau elemen kosong, artinya elemen ini tidak memiliki tag penutup dan tidak memuat konten teks di antara tag pembuka dan penutup seperti elemen <p> atau <a>. Ketika browser membaca dokumen HTML dan menemukan elemen <img>, browser mengirimkan permintaan HTTP terpisah ke server atau membaca file dari sistem lokal berdasarkan nilai atribut src. File gambar tersebut kemudian diunduh secara terpisah dan ditampilkan di posisi di mana elemen <img> berada di dalam aliran dokumen. Inilah mengapa gambar dan file HTML adalah dua entitas berbeda: HTML hanyalah instruksi yang memberitahu browser di mana menemukan gambar dan bagaimana menampilkannya, sedangkan file gambar adalah sumber daya terpisah yang dimuat secara independen. Pemahaman ini sangat penting karena menjadi dasar mengapa atribut src harus menunjuk ke lokasi file yang benar-benar ada.

Atribut src menerima nilai berupa URL, yang bisa berupa URL absolut maupun URL relatif. URL absolut adalah alamat lengkap yang menyertakan protokol, seperti https://example.com/gambar/foto.jpg, dan biasanya digunakan untuk memuat gambar dari server eksternal. URL relatif adalah alamat yang dihitung berdasarkan lokasi file HTML saat ini, seperti gambar/foto.jpg yang berarti file foto.jpg berada di dalam folder gambar yang ada di direktori yang sama dengan file HTML. Untuk pemula, URL relatif adalah pendekatan yang lebih sering digunakan karena proyek web pada umumnya menyimpan semua asetnya secara lokal sebelum diunggah ke server. Kesalahan paling umum adalah menulis path yang tidak sesuai dengan struktur folder sebenarnya, sehingga browser tidak dapat menemukan file gambar dan menampilkan ikon gambar rusak sebagai gantinya.

Atribut alt memiliki peran yang lebih dari sekadar teks pengganti ketika gambar gagal dimuat. Dari perspektif aksesibilitas web, atribut alt adalah jembatan antara konten visual dan pengguna yang tidak dapat melihat gambar tersebut, baik karena menggunakan pembaca layar, karena koneksi internet lambat, maupun karena menonaktifkan pemuatan gambar di browser mereka. Mesin pencari seperti Google juga menggunakan nilai alt untuk memahami konteks gambar, yang berkontribusi pada peringkat halaman web di hasil pencarian. Atribut width dan height berperan dalam stabilitas tata letak halaman: ketika browser mengetahui ukuran gambar sebelum gambar selesai dimuat, browser dapat mengalokasikan ruang yang tepat di halaman sehingga konten di sekitar gambar tidak berpindah posisi secara tiba-tiba ketika gambar akhirnya tampil. Fenomena pergeseran tata letak mendadak ini dikenal sebagai layout shift dan dapat mengganggu pengalaman pengguna secara signifikan.

Formula, Komposisi Bahan, atau Spesifikasi Parameter

Elemen <img> memiliki sejumlah atribut yang perlu Anda pahami sebelum menulis kode. Tabel berikut merangkum atribut-atribut utama beserta spesifikasi nilainya dan fungsi teknisnya dalam konteks menampilkan gambar di HTML. Memahami setiap atribut secara terpisah akan membantu Anda membuat keputusan yang tepat saat menulis kode dan melakukan debugging ketika gambar tidak muncul seperti yang diharapkan.

Panduan Langkah Kerja Bertahap

belajar-gambar-html/
├── index.html
└── images/
    └── pemandangan.jpg

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Belajar Menyisipkan Gambar di HTML</title>
</head>
<body>
  <h1>Latihan Menyisipkan Gambar</h1>
  <p>Gambar akan muncul di bawah paragraf ini.</p>

  <!-- Elemen img akan ditambahkan di sini pada langkah berikutnya -->

</body>
</html>

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Belajar Menyisipkan Gambar di HTML</title>
</head>
<body>
  <h1>Latihan Menyisipkan Gambar</h1>
  <p>Gambar akan muncul di bawah paragraf ini.</p>

  <img src="images/pemandangan.jpg" alt="Foto pemandangan alam dengan langit biru dan pegunungan hijau">

</body>
</html>

<img
  src="images/pemandangan.jpg"
  alt="Foto pemandangan alam dengan langit biru dan pegunungan hijau"
  width="600"
  height="400"
>

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Belajar Menyisipkan Gambar di HTML</title>
</head>
<body>
  <h1>Latihan Menyisipkan Gambar</h1>
  <p>Gambar lokal dari folder images:</p>
  <img
    src="images/pemandangan.jpg"
    alt="Foto pemandangan alam dengan langit biru dan pegunungan hijau"
    width="600"
    height="400"
  >

  <p>Gambar dari URL absolut (placeholder):</p>
  <img
    src="https://via.placeholder.com/400x250"
    alt="Gambar placeholder berukuran 400 kali 250 piksel"
    width="400"
    height="250"
  >
</body>
</html>

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Belajar Menyisipkan Gambar di HTML</title>
</head>
<body>
  <h1>Latihan Menyisipkan Gambar</h1>

  <p>Gambar lokal dari folder images:</p>
  <img
    src="images/pemandangan.jpg"
    alt="Foto pemandangan alam dengan langit biru dan pegunungan hijau"
    width="600"
    height="400"
  >

  <p>Gambar dari URL absolut (placeholder):</p>
  <img
    src="https://via.placeholder.com/400x250"
    alt="Gambar placeholder berukuran 400 kali 250 piksel"
    width="400"
    height="250"
  >

  <p>Gambar yang dapat diklik sebagai tautan:</p>
  <a href="https://www.wikipedia.org" target="_blank">
    <img
      src="images/pemandangan.jpg"
      alt="Klik gambar ini untuk membuka Wikipedia di tab baru"
      width="300"
      height="200"
    >
  </a>
</body>
</html>

Verifikasi Akhir dan Parameter Kelayakan

Setelah menyelesaikan semua langkah, gunakan tabel berikut untuk memverifikasi bahwa setiap aspek implementasi gambar dalam file index.html Anda sudah benar. Periksa setiap parameter secara berurutan. Jika ada parameter yang masih menunjukkan kondisi "sebelum", kembali ke langkah yang relevan dan perbaiki kodenya sebelum melanjutkan ke topik HTML berikutnya. Cara paling cepat untuk memverifikasi adalah dengan membuka DevTools browser (tekan F12 di Chrome atau Firefox), lalu pilih tab Elements atau Inspector untuk memeriksa markup HTML secara langsung dan tab Network untuk melihat apakah semua file gambar berhasil dimuat dengan status HTTP 200.

Solusi Masalah di Lapangan (FAQ Teknis)

1. Gambar tidak muncul dan saya melihat ikon gambar rusak atau kotak dengan tanda X. Apa yang salah?
Gejala ini hampir selalu disebabkan oleh nilai atribut src yang tidak mengarah ke lokasi file gambar yang sebenarnya. Ada beberapa penyebab umum: pertama, nama file pada src tidak sama persis dengan nama file di komputer, termasuk perbedaan huruf besar dan kecil (misalnya Pemandangan.jpg di folder tetapi pemandangan.jpg di kode); kedua, ekstensi file berbeda dari yang Anda tulis (misalnya file aslinya .jpeg tetapi Anda menulis .jpg); ketiga, path folder tidak sesuai (misalnya file ada di images/pemandangan.jpg tetapi Anda menulis hanya pemandangan.jpg). Cara memverifikasinya: buka DevTools browser, pilih tab Network, muat ulang halaman, dan cari nama file gambar. Jika statusnya 404, berarti path pada src salah. Bandingkan path di kode dengan lokasi file sebenarnya di File Explorer atau Finder.

2. Gambar muncul tetapi terlihat terdistorsi, terlalu gepeng, atau terlalu memanjang. Bagaimana cara memperbaikinya?
Distorsi gambar terjadi ketika nilai width dan height yang Anda tentukan di HTML tidak proporsional dengan dimensi asli file gambar. Misalnya, gambar asli berukuran 800 x 600 piksel (rasio 4:3), tetapi Anda menulis width="600" height="600" (rasio 1:1). Browser akan meregangkan gambar untuk memenuhi dimensi yang ditentukan sehingga gambar tampak terdistorsi. Solusinya adalah mencari tahu ukuran asli gambar terlebih dahulu (klik kanan file gambar, pilih Properties/Get Info), lalu hitung dimensi tampilan yang Anda inginkan dengan mempertahankan rasio yang sama. Alternatif lain, gunakan hanya salah satu atribut saja, misalnya hanya width="600" tanpa height, dan biarkan browser menghitung tinggi secara proporsional. Namun perlu diketahui bahwa tanpa height, browser tidak dapat mencadangkan ruang vertikal sebelum gambar dimuat, yang bisa menyebabkan layout shift.

3. Saya ingin menggunakan gambar dari internet tetapi khawatir gambar tersebut tiba-tiba menghilang. Apa rekomendasi terbaiknya?
Kekhawatiran Anda sangat beralasan. Ketika Anda menggunakan URL absolut yang mengarah ke server pihak ketiga, Anda tidak memiliki kendali atas ketersediaan file tersebut. Pemilik server dapat menghapus, memindahkan, atau membatasi akses gambar kapan saja, yang menyebabkan gambar di halaman Anda tidak lagi tampil. Solusi yang paling andal adalah mengunduh file gambar ke komputer Anda, menempatkannya di dalam folder proyek (misalnya di dalam folder images), lalu menggunakan URL relatif pada atribut src. Dengan cara ini, gambar selalu tersedia selama file proyek Anda utuh. Jika memang harus menggunakan gambar eksternal, pastikan Anda memiliki izin penggunaan dari pemilik gambar dan perhatikan ketentuan lisensinya. Selain itu, selalu sediakan teks alt yang informatif sebagai jaring pengaman ketika gambar tidak dapat dimuat.

4. Saya sudah menulis atribut alt tetapi pembimbing saya bilang penulisan saya kurang tepat. Bagaimana cara menulis nilai alt yang benar?
Nilai alt yang baik harus menggambarkan isi dan konteks gambar secara ringkas, sebagaimana Anda akan mendeskripsikannya kepada seseorang yang tidak dapat melihatnya. Hindari mengawali dengan "Gambar dari..." atau "Foto tentang..." karena pembaca layar sudah mengumumkan bahwa elemen tersebut adalah gambar. Sebagai contoh, untuk foto pemandangan gunung saat matahari terbit, nilai yang kurang tepat adalah alt="gambar" atau alt="foto bagus". Nilai yang lebih baik adalah alt="Puncak Gunung Bromo dengan lautan awan saat matahari terbit". Untuk gambar yang berfungsi sebagai tombol atau tautan, nilai alt harus menjelaskan tujuan tindakan, bukan visual gambarnya. Contoh: alt="Buka halaman beranda" untuk logo yang berfungsi sebagai tautan ke halaman utama. Untuk gambar dekoratif yang tidak membawa informasi, gunakan alt="" agar pembaca layar melewatinya.

Kesimpulan dan Rencana Aksi

Anda telah mempelajari cara kerja elemen <img> secara menyeluruh, mulai dari cara browser memuat file gambar secara terpisah dari dokumen HTML, cara menulis atribut src dengan URL relatif maupun absolut, pentingnya atribut alt untuk aksesibilitas dan SEO, hingga cara mengontrol dimensi tampilan gambar dengan atribut width dan height. Anda juga telah mempraktikkan teknik menggabungkan elemen <img> dengan elemen <a> untuk menciptakan gambar yang dapat diklik sebagai tautan, sebuah pola yang sangat umum ditemukan di hampir setiap situs web. Pemahaman mendalam tentang atribut-atribut ini, khususnya tentang URL relatif dan konsekuensi dari setiap atribut yang dihilangkan, adalah bekal yang akan terus relevan bahkan ketika Anda nantinya bekerja dengan framework atau sistem manajemen konten yang lebih kompleks.

Sebagai rencana aksi, ada beberapa hal yang dapat Anda lakukan untuk memperdalam pemahaman ini. Pertama, coba ganti nilai width dan height secara eksperimental dan amati bagaimana perubahan tersebut memengaruhi tampilan di browser, termasuk saat Anda hanya mengisi salah satunya. Kedua, coba sengaja salah menuliskan path pada src dan amati apa yang terjadi, termasuk pesan apa yang muncul di tab Network pada DevTools. Ketiga, tambahkan beberapa gambar dengan format berbeda seperti PNG dan GIF ke dalam folder proyek Anda dan sisipkan semuanya ke dalam halaman yang sama untuk memahami perbedaan hasilnya. Langkah-langkah berikutnya dalam perjalanan belajar HTML Anda adalah mempelajari cara menampilkan audio dan video menggunakan elemen <audio> dan <video>, serta cara menggunakan CSS untuk mengontrol tampilan gambar dengan lebih fleksibel, termasuk membuat gambar responsif yang menyesuaikan ukurannya dengan lebar layar perangkat pengguna.

Ditulis dan diedit oleh Ahmad Ismail Al Malik