Elemen <img> digunakan untuk menampilkan gambar di halaman web.
Tag ini adalah void element, artinya tidak punya tag penutup.
🔹 Struktur Dasar
<img src="gambar.jpg" alt="Deskripsi gambar">
Penjelasan:
src: sumber atau lokasi file gambaralt: teks alternatif yang akan muncul jika gambar gagal dimuat (juga penting untuk aksesibilitas dan SEO)
🔸 Contoh Penggunaan
<img src="https://via.placeholder.com/150" alt="Gambar Placeholder">
🧩 Atribut Umum pada <img>
| Atribut | Fungsi |
|---|---|
src | Alamat gambar (bisa URL atau path lokal) |
alt | Deskripsi alternatif gambar |
width | Lebar gambar (px atau %) |
height | Tinggi gambar (px atau %) |
title | Tooltip saat kursor diarahkan ke gambar |
loading | Mengatur pemuatan gambar (lazy, eager) |
Contoh:
<img src="profil.jpg" alt="Foto Profil" width="200" height="200" title="Ini aku!">
🖼️ Format Gambar yang Umum Digunakan
.jpg/.jpeg: ukuran kecil, cocok untuk foto.png: dukung transparansi.gif: gambar animasi.svg: gambar vektor (tajam di semua ukuran).webp: modern, ukuran kecil & kualitas bagus
🧼 Best Practice
- Selalu isi
alt→ untuk SEO & pengguna screen reader - Gunakan ukuran gambar sesuai kebutuhan → jangan terlalu besar
- Gunakan format yang sesuai dengan jenis gambar
- Gunakan atribut
loading="lazy"untuk mempercepat loading halaman - Hindari gambar dari sumber tidak aman (http)
🧠 Tips Tambahan
Responsive Image (CSS)
Gunakan CSS agar gambar menyesuaikan ukuran layar:
<img src="gambar.jpg" alt="..." style="max-width: 100%; height: auto;">
Responsive Image (HTML)
Gunakan elemen <picture> untuk kondisi berbeda:
<picture>
<source srcset="gambar.webp" type="image/webp">
<img src="gambar.jpg" alt="Gambar fallback">
</picture>
🎯 Kesimpulan
- Elemen
<img>sangat penting untuk mempercantik dan memperjelas isi halaman web. - Pastikan menggunakan gambar yang optimal, deskriptif, dan sesuai konteks.
- Jangan lupa: gambar bisa mendukung komunikasi visual secara efektif!
Gambar bisa menyampaikan ribuan kata, tapi
<img>hanya butuh satu baris kode 😉🖼️