HTML 04C: Gambar Responsif dengan srcset dan picture

Satu file gambar besar untuk semua perangkat memang mudah, tetapi pengguna ponsel dapat mengunduh data yang tidak diperlukan. HTML menyediakan cara agar browser memilih gambar paling sesuai.

1. Memilih Ukuran dengan srcset

Angka 320w, 480w, 640w, dan 800w menyatakan lebar asli setiap file. sizes menjelaskan perkiraan lebar gambar pada layout. Browser kemudian mempertimbangkan ukuran layar dan kepadatan piksel.

2. Mengubah Komposisi dengan picture

Pada viewport maksimal 600px, browser memakai gambar portrait yang lebih dekat pada subjek. Pada layar lebih lebar, browser memakai gambar landscape dari elemen img.

Teknik ini disebut art direction. Elemen img tetap wajib karena membawa alt, ukuran, dan gambar fallback. Gunakan teknik ini hanya jika gambar lebar tidak terbaca dengan baik pada layar kecil.

3. Sumber Aset Contoh

Semua URL contoh berasal dari MDN Learning Area yang menggunakan lisensi CC0 1.0. Karena setiap file benar-benar tersedia dalam ukuran berbeda, Anda dapat langsung mencoba pemilihan gambar melalui Network panel DevTools.

Kesalahan Umum

• Menggunakan srcset tetapi semua file sebenarnya berukuran sama.
• Menghapus src fallback.
• Menaruh alt pada source; alt harus berada pada img.
• Menebak sizes tanpa memahami lebar gambar pada layout.

Latihan

Siapkan satu gambar dalam tiga ukuran. Terapkan srcset, kecilkan jendela browser, lalu periksa file yang dipilih melalui Network panel DevTools.

Rangkuman

srcset membantu memilih ukuran, sedangkan picture membantu memilih komposisi. Keduanya dapat menghemat data tanpa mengorbankan kualitas gambar.