Bayangin user kamu pake HP 4G di kampung dengan kuota terbatas, buka website yang loading gambar 5MB hi-res yang aslinya buat layar 4K. Kuota habis, halaman lambat, user kabur. Solusinya: kasih versi gambar yang sesuai sama device user. <picture> tag bikin browser pintar pilih versi gambar yang paling pas — kecil buat HP, besar buat desktop, format webp/avif kalau didukung, jpg sebagai fallback. Penghematan bandwidth signifikan, UX jauh lebih cepat.

💡 Dua skenario beda. srcset di <img> = sama gambar, beda RESOLUSI (buat retina display). <picture> + <source> = gambar BERBEDA (art direction — landscape di desktop, portrait di mobile). Pilih sesuai use case.

Sintaks <picture> + <source>

<picture>
  <source media="(min-width: 768px)" srcset="gambar-besar.jpg">
  <source media="(min-width: 480px)" srcset="gambar-sedang.jpg">
  <img src="gambar-kecil.jpg" alt="Deskripsi gambar">
</picture>

• <source> menentukan gambar alternatif dengan kondisi media query
• <img> di dalam <picture> adalah fallback jika tidak ada <source> yang cocok
• Browser memilih <source> pertama yang cocok, dari atas ke bawah

Alternatif Sederhana: srcset di <img>

<img srcset="kecil.jpg 480w, besar.jpg 1024w"
     sizes="(max-width: 600px) 480px, 1024px"
     src="besar.jpg" alt="Gambar responsif">

Ini membantu menghemat bandwidth — pengguna mobile tidak perlu mengunduh gambar berukuran besar.

🎭 Analogi sehari-hari

<picture> itu kayak cetak foto di studio sesuai pesanan. Mau buat dompet? Cetak ukuran 2R kecil. Mau dipajang di ruang tamu? Cetak ukuran 10R besar. Foto sumbernya sama, tapi yang dikirim disesuaikan kebutuhan. Browser ngecek HP atau laptop kamu, terus kasih versi yang paling pas — pengguna HP gak boros kuota download foto raksasa, pengguna laptop dapet versi tajam yang gak buram pas di-zoom.

⚠️ Jebakan yang sering ditemui

• Urutan <source> matters — browser pakai PERTAMA yang cocok. Salah urutan = wrong image. Mobile-first: smallest media query dulu? Atau largest first? Tergantung approach.
• srcset vs <picture> use case beda — srcset untuk resolusi (sama gambar, ukuran beda untuk retina). <picture> untuk art direction (gambar BERBEDA untuk layout berbeda — landscape di desktop, portrait di mobile).
• Lupa <img> fallback di dalam <picture> = tidak ada yang ditampilkan. Selalu kasih.
• Format vendor (webp/avif) butuh <source type="image/webp"> chain, dengan <img> jpg fallback.
• sizes attribute wajib bersama srcset resolusi — tanpa itu, browser tidak tahu lebar slot.
• CDN image service (Cloudinary, Imgix) sering generate srcset otomatis — leverage itu.

🎯 srcset vs <picture> — pilih yang mana?

• Sama gambar, beda RESOLUSI (1x retina vs 2x retina vs 3x) → srcset di <img> saja
• Sama gambar, beda UKURAN (responsive scaling 480w/1024w/1920w) → srcset + sizes
• GAMBAR BERBEDA per breakpoint (landscape banner di desktop, portrait crop di mobile) → <picture> + <source media>
• FORMAT BERBEDA (avif > webp > jpg fallback) → <picture> + <source type> chain
• Semua tiga gabung → <picture> (paling fleksibel, tapi paling kompleks)

Aturan: srcset = "browser, kasih versi terbaik untuk layar/resolusi user". <picture> = "kasih ART DIRECTION berbeda berdasar kondisi device". Pilih yang lebih spesifik kebutuhan kamu.

TL;DR: Responsive images = kasih versi gambar yang sesuai device user, hemat bandwidth + cepat load. Pakai srcset + sizes di <img> untuk auto-pilih resolusi/ukuran. Pakai <picture> + <source> untuk art direction (gambar beda per breakpoint) atau format chain (avif → webp → jpg). Selalu kasih <img> fallback di dalam <picture>.