Markup gambar responsif dapat dibagi menjadi dua skenario: situasi saat tujuannya adalah gambar yang paling efisien, dan situasi saat Anda memerlukan kontrol eksplisit atas sumber gambar yang dipilih browser. Anda dapat menganggapnya sebagai sintaksis deskriptif dan preskriptif.
Dalam modul ini, Anda akan mempelajari kedua pendekatan tersebut. Pertama, kita akan membahas srcset dan sizes, serta cara membantu browser membuat pilihan
terbaik berdasarkan hal yang diketahuinya tentang pengguna, perangkat, dan situasi penjelajahan mereka. Kemudian, Anda akan menemukan elemen <picture>,
yang memungkinkan kontrol eksplisit atas pemilihan sumber berdasarkan faktor seperti ukuran area pandang dan dukungan browser untuk format gambar.
{i>Syntax<i} deskriptif
Sintaksis deskriptif memberikan informasi kepada browser tentang sumber gambar dan cara penggunaannya, tetapi pada akhirnya, pengambilan keputusan ada di tangan browser. Sejauh ini, skenario yang lebih umum adalah, untuk sebagian besar gambar, Anda tidak menginginkan kontrol terperinci atas perilaku browser. Browser memiliki lebih banyak informasi yang dapat dimanfaatkan oleh developer web, dan dapat membuat keputusan yang kompleks berdasarkan informasi ini. Anda tidak dapat memprediksi konteks penjelajahan pengguna secara akurat karena ada terlalu banyak hal tentang hardware, preferensi, dan kecepatan koneksi mereka yang tidak dapat Anda ketahui. Anda sebaiknya dapat membuat perkiraan yang matang, tetapi Anda tidak dapat mengetahui secara pasti bagaimana pengalaman setiap pengguna di web. Kasus penggunaan pusat untuk gambar responsif benar-benar berorientasi pada tujuan, dari perspektif developer: memungkinkan browser membuat permintaan gambar yang paling efisien, berdasarkan informasi yang dimiliki browser.
Agar browser dapat menentukan pilihan ini, srcset memungkinkan Anda memberi browser daftar sumber potensial untuk mengisi satu
<img>, sementara sizes memungkinkan Anda memberikan informasi kepada browser tentang cara <img> tersebut akan dirender. Anda akan mempelajari cara menggunakannya
dalam modul berikutnya.
{i>Syntax<i} preskriptif
Dengan sintaks preskriptif, Anda memberi tahu browser apa yang harus dilakukan—sumber apa yang harus dipilih, berdasarkan kriteria tertentu yang telah Anda tetapkan. Meskipun kasus penggunaan ini tidak umum seperti "cukup muat aset yang paling efisien untuk merender gambar ini", hal ini memungkinkan kami memberikan petunjuk penggunaan ke browser untuk memperhitungkan informasi yang tidak dimiliki sebelum transfer aset, seperti konten sumber atau formatnya.
Meskipun srcset dan sizes memberi Anda sintaksis untuk meneruskan informasi ke browser pengguna dan memungkinkannya membuat keputusan tentang
sumber gambar, ada kalanya Anda memerlukan kontrol eksplisit atas file sumber mana yang ditampilkan dan kapan. Misalnya, Anda mungkin
ingin menampilkan versi konten gambar yang sama dengan rasio aspek berbeda, berdasarkan perlakuan desain yang berbeda di seluruh titik henti sementara tata letak,
atau pastikan hanya browser dengan dukungan untuk encoding tertentu yang menerima sumber tertentu.
Dalam kasus ini, Anda menginginkan kontrol eksplisit atas sumber yang ditampilkan, dan kapan. Ini adalah jaminan yang tidak dapat diberikan oleh srcset dan sizes,
berdasarkan desain. Untuk mendapatkan kontrol tersebut, kita harus menggunakan elemen <picture>.