Gambar responsif artinya browser mengunduh versi gambar yang pas dengan layar pengunjung: file kecil buat HP, file besar buat laptop. Pengunjung HP gak buang kuota buat gambar raksasa, dan pengunjung laptop tetap dapat gambar yang tajam. HTML punya dua cara buat ini: tag <picture> dan atribut srcset.
🧪 Tebakan cepat: ada tiga versi gambar di kode. Browser di HP mengunduh ketiganya lalu memilih, atau cuma satu? Tebak dulu, jawabannya ada di bagian "Gambar beda buat layar beda".
<picture>: gambar beda buat layar beda
<picture>
<source media="(min-width: 1024px)" srcset="besar.jpg">
<source media="(min-width: 600px)" srcset="sedang.jpg">
<img src="kecil.jpg" alt="Pantai saat matahari terbenam">
</picture>
Bagian per bagian:
<picture>membungkus beberapa versi dari satu gambar.<source>adalah satu versi.media="(min-width: 1024px)"adalah syaratnya, artinya "layar minimal 1024px", dan tanda kurungnya ikut ditulis.srcset="besar.jpg"adalah file yang dipakai kalau syaratnya cocok.<source>gak punya tag penutup.- Browser membaca
<source>dari atas ke bawah dan memakai yang pertama cocok. <img>di paling bawah adalah cadangan: dipakai kalau gak ada<source>yang cocok.<img>ini wajib ada, karena dialah yang benar-benar menampilkan gambarnya, danaltditulis di sini.
Hasilnya: laptop 1280px dapat besar.jpg, tablet 768px dapat sedang.jpg, HP 360px dapat kecil.jpg. Browser cuma mengunduh satu file, bukan ketiganya. Tiap versi boleh beda potongan, misalnya foto melebar di laptop dan foto tegak di HP. Di <picture>, kamu yang menentukan gambar mana buat layar mana.
srcset dan sizes: satu gambar, beberapa ukuran file
<img src="besar.jpg" alt="Foto"
srcset="kecil.jpg 480w, besar.jpg 1024w"
sizes="(max-width: 600px) 480px, 1024px">
srcsetmendaftar file yang tersedia beserta lebar aslinya.kecil.jpg 480wartinya file kecil.jpg lebarnya 480 piksel (wdari width). Tiap pasangan dipisah koma.sizesmemberi tahu browser seberapa lebar gambar ini akan tampil: "kalau layar maksimal 600px, gambarnya tampil 480px, selain itu 1024px". Browser memilih file sebelum CSS selesai dibaca, jadi tanpasizesdia menganggap gambarnya selebar layar dan sering mengunduh yang terlalu besar.srctetap ditulis sebagai cadangan buat browser lama, danalttetap ada.
Bedanya dengan <picture>: di sini gambarnya sama, cuma ukuran filenya beda, dan browser sendiri yang memilih file mana yang cukup.
⚠️ Jebakan yang sering ketemu
<picture>tanpa<img>. Gak ada gambar yang tampil sama sekali.<img>selalu jadi isi terakhir<picture>.<picture>tanpa<source>. Gak rusak, tapi gak ada gunanya: hasilnya sama dengan<img>biasa.altditaruh di<source>.<source>gak punyaalt. Teks alternatif selalu di<img>.- Lupa huruf
w.kecil.jpg 480tanpawgak dimengerti browser, jadi kandidat itu dilewati. mediatanpa tanda kurung.media="min-width: 768px"gak pernah cocok. Tulismedia="(min-width: 768px)".
TL;DR: <picture> berisi beberapa <source media="..." srcset="..."> dan satu <img> cadangan di paling bawah. Browser memakai <source> pertama yang cocok, kalau gak ada yang cocok dia pakai <img>. Buat gambar yang sama dengan beberapa ukuran file, cukup <img> dengan srcset (file dan lebarnya, pakai w) dan sizes (lebar tampilnya). src dan alt selalu ditulis di <img>.
