Pernah liat slot kosong di galeri foto sebelum gambarnya ke-load? Itu efek dari <img> yang udah ngambil tempat tapi belum nerima file gambarnya. Tag <img> itu kayak bingkai foto kosong di tembok — atribut src nentuin foto mana yang dipasang, alt kasih label tertulis buat yang gak bisa liat fotonya (browser pas ngeload lambat, atau user tunanetra pake screen reader).
🤔 Tahukah kamu? Gambar bisa makan 50%+ ukuran halaman web modern. Optimisasi gambar (format webp/avif,
loading="lazy", ukuran tepat) sering jadi cara paling gampang bikin web kamu lebih cepat.
Sintaks <img>
Tag self-closing — gak perlu tutup </img>. Wajib ada src:
<img src="https://link-gambarnya.com" />
Atribut Penting: width & height
Tambahin width dan height (dalam pixel) biar browser bisa siapin space sebelum gambar ke-load — anti layout-shift:
<img src="https://link-gambarnya.com" width="300" height="200" />
⚠️ URL
srcharus link langsung ke file gambar (bukan halaman yang berisi gambar). Cek: kalau dibuka di tab baru, harus muncul gambarnya saja.
🎭 Analogi sehari-hari
<img> = bingkai foto kosong di dinding. Atribut src = foto fisik yang dipasang. Atribut alt = label di samping bingkai (untuk yang tidak bisa lihat foto). width/height = ukuran bingkai (browser sediakan tempat sebelum foto datang).
⚠️ Jebakan yang sering ditemui
- Lupa
alt= inaccessible + SEO buruk. Untuk gambar dekoratif:alt=""(kosong). Untuk gambar bermakna: tulis deskripsi. - Lupa
width/height= layout shift (CLS) — konten lompat-lompat saat gambar load. Set dimensi atau pakaiaspect-ratioCSS. - Path relative vs absolute —
src="foto.jpg"cari di folder halaman./foto.jpgdari root.https://...external. - Gambar 5MB diserve full = lambat. Pakai format modern (webp/avif),
loading="lazy", atau<picture>responsive.
TL;DR: <img> = tag self-closing (gak butuh </img>). Wajib: src (URL gambar), alt (deskripsi untuk a11y + SEO). Optional tapi wajib di praktik: width/height (cegah layout shift CLS), loading="lazy" (hemat bandwidth gambar di bawah viewport). Format modern: webp/avif > jpg/png (50% smaller). Optimasi gambar = cara termudah bikin web cepat.
