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="lazy" width="960" height="540">
<picture>
  <source srcset="logo.avif" type="image/avif">
  <img src="logo.png" alt="Logo">
</picture>

Catatan Implementasi

• Selalu set width/height (atau aspect-ratio CSS) untuk hindari layout shift.
• alt deskriptif singkat; jangan "image1.jpg".

Kesalahan Umum

• alt dikosongkan untuk gambar informatif (seharusnya punya alt).
• Gambar besar tanpa loading="lazy" di bawah lipatan.

Glosarium

• srcset: daftar sumber dengan descriptor lebar.
• Art direction: gambar berbeda per ukuran layar.

Referensi

• HTML Links, Images, Lists, Metadata