Dalam dunia web modern, tampilan gambar yang fleksibel itu wajib hukumnya! Nah, di sinilah elemen HTML <picture> berperan. Buat kamu yang mau website lebih kece dengan gambar yang responsif, yuk kita kupas tuntas tentang <picture> element dan kapan harus menggunakannya.
Apa Itu <picture> Element?
Elemen <picture> di HTML adalah cara pintar buat menampilkan gambar yang sesuai dengan kondisi tertentu, seperti ukuran layar atau format gambar yang didukung browser. Bisa dibilang, <picture> itu level up dari <img> biasa.
Struktur Dasar <picture>
Berikut contoh penggunaannya:
<picture>
<source srcset="gambar-kecil.jpg" media="(max-width: 600px)">
<source srcset="gambar-besar.jpg" media="(min-width: 601px)">
<img src="fallback.jpg" alt="Gambar responsif">
</picture>
<!DOCTYPE html>
<html>
<body>
<picture>
<source srcset="gambar-kecil.jpg" media="(max-width: 600px)">
<source srcset="gambar-besar.jpg" media="(min-width: 601px)">
<img src="fallback.jpg" alt="Gambar responsif">
</picture>
</body>
</html>
Hasilnya:
Penjelasan:
<source>: Menentukan gambar yang akan ditampilkan berdasarkan kondisi media query.srcset: Sumber gambar yang digunakan.media: Kondisi kapan gambar digunakan (misal, kalau lebar layar ≤ 600px pakai gambar-kecil.jpg).<img>: Gambar default kalau browser nggak support<picture>.
Kapan Harus Menggunakan <picture> Element?
Ada beberapa kondisi di mana <picture> lebih unggul dibanding <img> biasa:
1. Gambar Responsif (Mobile vs Desktop)
Mau website lebih ringan di HP tapi tetap HD di desktop? Pakai <picture>! Ini bakal nge-load gambar yang sesuai dengan ukuran layar, jadi performa website lebih optimal.
2. Support Format Gambar yang Berbeda
Beda browser, beda selera format gambar. Misalnya, WebP lebih ringan dari JPEG, tapi nggak semua browser support. Nah, <picture> bisa handle ini dengan mudah:
<picture>
<source srcset="gambar.webp" type="image/webp">
<source srcset="gambar.jpg" type="image/jpeg">
<img src="gambar-default.jpg" alt="Gambar fleksibel">
</picture>
Kalau browser support WebP, dia bakal pakai gambar WebP. Kalau nggak, otomatis fallback ke JPEG.
3. Mode Dark & Light Theme
Punya website dengan dark mode? <picture> bisa ganti gambar sesuai tema:
<picture>
<source srcset="gambar-dark.jpg" media="(prefers-color-scheme: dark)">
<source srcset="gambar-light.jpg" media="(prefers-color-scheme: light)">
<img src="gambar-default.jpg" alt="Gambar dark/light mode">
</picture>
Jadi, pengguna dark mode bakal lihat gambar dark, sementara yang pakai light mode lihat gambar yang lebih terang.
Kesimpulan
Kalau mau gambar di website lebih cerdas, fleksibel, dan ringan, pakai <picture>! Elemen ini bikin loading gambar lebih efisien, tampilan lebih adaptif, dan user experience makin ciamik.
Jadi, masih stuck pakai <img> doang? Saatnya upgrade ke <picture> biar website makin pro!
Gimana? Udah siap pake <picture> di website kamu? Drop pertanyaan atau pengalaman kamu di kolom komentar, ya!
Komentar