HTML Images Picture Srcset Alt Lazy

Ringkasan

Gambar ditampilkan lewat <img>. Untuk responsif & performa, pakai srcset, sizes, loading="lazy", dan <picture> untuk format/art-direction.

Konsep Dasar

• alt — teks alternatif (aksesibilitas & SEO); wajib, kosongkan hanya kalau dekoratif.
• srcset + sizes — browser pilih resolusi tepat.
• loading="lazy" — tunda load di luar viewport.
• <picture><source></picture> — pilih sumber berdasar media/format (webp/avif).

Cara Kerja / Struktur

html

<img src="hero.jpg" alt="Ilustrasi hero landing"
     srcset="hero-480.jpg 480w, hero-960.jpg 960w"
     sizes="(max-width:600px) 480px, 960px"
     loading