srcset memilih antara beberapa ukuran file dari satu gambar yang sama. Ada saat ketika kebutuhan kita lebih dari itu: komposisi berbeda untuk layar berbeda (art direction), atau format file modern dengan jalan keluar ke format klasik. Elemen picture dirancang untuk kasus-kasus tersebut: ia membungkus beberapa kandidat source dan satu img sebagai pelaksana akhir. Pada Chapter ini kita menyusun picture, menulis atribut media dan type pada source, serta memahami urutan pemilihan yang dilakukan browser.

Struktur picture #

Elemen picture sendiri tidak menampilkan apa pun; ia hanyalah wadah keputusan. Di dalamnya boleh ada beberapa elemen source — void element yang tercantum pada daftar resmi di chapter Void Elements — dan tepat satu img di posisi terakhir. Browser yang merender adalah img tersebut; source hanyalah kandidat yang boleh menggantikan sumber gambar bila kondisinya cocok.

html 
<picture>
  <source media="(min-width: 700px)" srcset="banner-lebar.jpg">
  <img src="banner-persegi.jpg" alt="Diskon sarapan dua puluh persen" width="300" height="300">
</picture>

img tetap wajib membawa src dan alt: bila tidak ada satu pun source yang cocok, img-lah yang dirender. Atribut ukuran seperti width dan height juga diletakkan pada img, bukan pada source.

Output yang Dihasilkan:

text 
Viewport 900px  -> browser menampilkan banner-lebar.jpg (kondisi media cocok)
Viewport 400px  -> browser menampilkan banner-persegi.jpg dari img

Art Direction dengan Atribut media #

Atribut media pada source memuat kondisi layar dengan sintaks yang sama seperti CSS media query. Bila kondisi terpenuhi, file pada srcset milik source itu menggantikan sumber gambar. Pola ini disebut art direction: desainer menyiapkan dua versi komposisi — misalnya crop lebar untuk desktop dan persegi untuk ponsel — dan HTML yang memilihnya saat halaman dibuka. Kode pada bagian sebelumnya adalah contoh art direction sederhana: satu source dengan media, satu img sebagai keadaan normal.

Fallback Format dengan Atribut type #

Atribut type menuliskan MIME type kandidat, misalnya image/webp. Dari nilai type ini browser menilai dukungan format tanpa perlu mengunduh file; kandidat yang formatnya tidak didukung langsung dilewati. Di sinilah fallback format tersusun: format modern di atas, format klasik menunggu pada img.

html 
<picture>
  <source type="image/webp" srcset="poster-promo.webp">
  <img src="poster-promo.jpg" alt="Poster promo akhir tahun" width="400" height="200">
</picture>

Output yang Dihasilkan:

text 
Browser yang mendukung webp   -> menampilkan poster-promo.webp
Browser yang tidak mendukung  -> menampilkan poster-promo.jpg dari img

Urutan source: yang Cocok Dipilih Pertama #

Browser menelusuri source berurutan dari atas ke bawah dan memilih kandidat pertama yang cocok: kondisi media terpenuhi dan type didukung. Kandidat lain diabaikan, sekalipun juga cocok. Bila tidak ada satu pun yang cocok, img dengan src default-nya yang dirender. Karena itu, susun urutan dari yang paling spesifik — format terbaru atau kondisi layar paling sempit — menuju yang paling umum.

Contoh Lengkap dalam Satu File #

File berikut menggabungkan art direction dan fallback format dalam satu banner: dua kandidat untuk layar lebar (webp dan jpg) serta pasangan serupa untuk layar sempit. Keempat file gambarnya hipotetis; pembaca perlu menyiapkan filenya sendiri:

html contoh-picture.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Picture dan Source</title>
</head>
<body>
  <h1>Banner promo warung Siti</h1>
  <picture>
    <source media="(min-width: 700px)" srcset="banner-lebar.webp" type="image/webp">
    <source media="(min-width: 700px)" srcset="banner-lebar.jpg">
    <source srcset="banner-persegi.webp" type="image/webp">
    <img src="banner-persegi.jpg" alt="Diskon dua puluh persen untuk menu sarapan" width="300" height="300">
  </picture>
  <p>Promo berlaku hingga akhir bulan.</p>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Banner promo warung Siti"
  - Layar lebar + webp didukung  -> banner-lebar.webp
  - Layar lebar + tanpa webp     -> banner-lebar.jpg
  - Layar sempit + webp didukung -> banner-persegi.webp
  - Layar sempit + tanpa webp    -> banner-persegi.jpg dari img
  - Paragraf "Promo berlaku hingga akhir bulan."

Mari kita telaah urutan kandidat pada picture di atas:

  1. source pertama: layar 700 piksel ke atas dan format webp didukung — kombinasi terbaik, ditempatkan paling atas.
  2. source kedua: layar lebar tetapi webp tidak didukung; tanpa type, source ini menerima semua browser sehingga berfungsi sebagai pengganti format.
  3. source ketiga: tanpa media, artinya cocok untuk kondisi apa pun; kandidat webp untuk layar sempit hanya tercapai bila dua kandidat di atasnya gagal.
  4. img terakhir: pelaksana akhir sekaligus penyedia src, alt, width, dan height.
  5. Tidak ada srcset bertumpuk pada img: contoh ini memakai src tunggal; srcset pada img tetap boleh dipakai bersama picture.

Gambar kini tersaji sesuai layar dan kemampuan browser. Media tidak berhenti pada gambar: elemen audio menyematkan suara dengan player bawaan browser, dan itulah topik Chapter berikutnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-picture.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Picture dan Source</title>
</head>
<body>
  <h1>Banner promo warung Siti</h1>
  <picture>
    <source media="(min-width: 700px)" srcset="banner-lebar.webp" type="image/webp">
    <source media="(min-width: 700px)" srcset="banner-lebar.jpg">
    <source srcset="banner-persegi.webp" type="image/webp">
    <img src="banner-persegi.jpg" alt="Diskon dua puluh persen untuk menu sarapan" width="300" height="300">
  </picture>
  <p>Promo berlaku hingga akhir bulan.</p>
</body>
</html>