Gambar & Media HTML
Menampilkan Gambar di Halaman Web
Gambar membuat halaman web lebih menarik dan informatif. Untuk menampilkan gambar di HTML, kita menggunakan tag <img>.
Tag <img> merupakan void element (tidak memiliki tag penutup).
1. Atribut Utama Tag <img>
Tag <img> memerlukan dua atribut wajib:
-
src(source): Jalur/path lokasi file gambar. -
alt(alternate text): Teks deskripsi alternatif jika gambar gagal dimuat atau dibaca oleh pembaca layar (screen reader).
<img src="pemandangan.jpg" alt="Pemandangan gunung saat matahari terbit">
2. Mengatur Ukuran Gambar
Ukuran gambar dapat diatur menggunakan atribut width (lebar) dan height (tinggi) dalam satuan piksel:
<img src="logo.png" alt="Logo Perusahaan" width="200" height="100">
Catatan: Sangat disarankan untuk mengatur ukuran gambar menggunakan CSS agar layout tidak bergeser (layout shift) saat halaman dimuat.
3. Format Gambar yang Didukung Web
| Format | Ekstensi | Kegunaan Terbaik |
|---|---|---|
| JPEG / JPG |
.jpg, .jpeg
|
Foto dengan banyak warna dan gradasi |
| PNG | .png |
Gambar dengan transparansi atau grafis bersih |
| WebP | .webp |
Format modern dengan kompresi tinggi & kualitas bagus |
| SVG | .svg |
Vektor berskala tanpa kehilangan kualitas (crisp) |
| GIF | .gif |
Animasi pendek atau grafis sederhana |
4. Elemen <figure> dan <figcaption>
HTML5 menyediakan pasangan elemen <figure> dan <figcaption> untuk menyajikan gambar beserta keterangan gambar (caption).
<figure>
<img src="kucing.jpg" alt="Kucing anggora putih" width="400">
<figcaption>Gambar 1.1: Kucing Anggora sedang bersantai di taman.</figcaption>
</figure>
