picture untuk responsive image
<picture> membiarkan browser memilih berkas gambar yang paling sesuai — versi kecil untuk layar HP, atau format modern seperti WebP bila didukung. Browser membaca setiap <source> dari atas ke bawah dan memakai yang pertama cocok dengan kondisinya. <img> di dalamnya wajib ada karena dialah yang sebenarnya ditampilkan; source hanya menawarkan alternatif. Manfaatnya besar di Indonesia, tempat banyak pengguna mengakses lewat jaringan seluler dengan kuota terbatas.
👀 Contoh dulu
<picture> <source srcset="foto-lebar.jpg" media="(min-width: 1200px)"> <img src="foto-kecil.jpg" alt="Foto produk"> </picture>
Hasilnya: Di layar sangat lebar browser memakai foto-lebar.jpg; di layar lain memakai foto-kecil.jpg.
💡 img di dalam picture WAJIB ada — dialah yang benar-benar ditampilkan, source hanya memberi alternatif.
📝 Sekarang giliranmu
Buat <picture> dengan satu <source> (srcset = besar.jpg, media = (min-width: 800px)) dan <img> fallback (src = kecil.jpg, alt = Banner).