Elemen picture

srcset menyerahkan keputusan resolusi kepada browser: semua kandidatnya adalah versi dari satu gambar yang sama. Kadang kita justru perlu memutuskan sendiri — versi potret untuk layar kecil dan versi lebar untuk desktop (pemotongan yang berbeda), atau format modern dengan cadangan klasik. Untuk keputusan semacam itu, HTML menyediakan elemen picture.

Struktur Elemen picture #

Aturannya: picture adalah pembungkus keputusan — berisi satu atau lebih elemen source yang masing-masing membawa syarat, ditutup satu elemen img di posisi terakhir. Elemen img itulah yang tetap membawa alt, src, dan ukuran, sementara source (void element) hanya membawa syarat dan daftar berkasnya. Browser memeriksa source dari atas ke bawah: syarat pertama yang terpenuhi menang; bila tidak satu pun terpenuhi, img yang dipakai.

Media Query: Pemotongan yang Berbeda #

Contoh hero dengan dua pemotongan — versi vertikal untuk ponsel, versi lebar untuk desktop:

<picture>
  <source
    media="(max-width: 600px)"
    srcset="assets/hero-vertikal.webp">
  <img
    src="assets/hero-lebar.webp"
    alt="Barista Kedai Kopi Siti menuangkan kopi susu gula aren">
</picture>

Mari kita telaah strukturnya:

1. source dengan media: viewport selebar maksimal 600 piksel memuat hero-vertikal.webp — versi potret yang pemotongannya dirancang khusus untuk layar kecil.
2. img di posisi terakhir: viewport yang lebih lebar tidak memenuhi syarat source, sehingga browser memakai img dengan hero-lebar.webp.
3. alt hanya ada di img: source tidak memiliki alt; satu-satunya pembawa makna tetap elemen img.
4. Tanpa width/height pada contoh ini: kedua versi berbeda rasio, sehingga ukuran tidak dipasang di img — bila semua kandidat berbagi rasio yang sama, pasang atributnya seperti biasa.

Coba sendiri pergantian sumbernya: sempitkan perlahan jendela browser-mu (lalu muat ulang halaman bila perlu) dan perhatikan gambar di bawah ini berganti label:

Pada demo, ketiga sumber diganti placeholder SVG berlabel dan berwarna berbeda agar sumber yang aktif terlihat; pada berkas sungguhan, keduanya versi foto dengan pemotongan berbeda. Pada lebar kolom artikel seperti saat ini, sumber min-width yang umumnya aktif; area demo yang menyempit membuat syarat source pertama yang dituju berganti, dan bila lebar berada di antara kedua syarat, img cadangan yang tampil.

Tipe Format: Format Modern dengan Cadangan #

Format gambar untuk web hari ini terbagi tiga kelompok: AVIF dan WebP sebagai format modern yang efisien, JPG dan PNG sebagai format klasik yang didukung semua browser, dan SVG untuk ikon serta logo. picture mengurutkannya dari yang paling efisien:

<picture>
  <source type="image/avif" srcset="assets/interior.avif">
  <source type="image/webp" srcset="assets/interior.webp">
  <img
    src="assets/interior.jpg"
    alt="Ruang duduk Kedai Kopi Siti dengan tanaman gantung"
    width="1200"
    height="800">
</picture>

Cara kerjanya: browser memeriksa dukungan formatnya sendiri untuk tiap source dari atas ke bawah, lalu memuat srcset dari source pertama yang didukungnya.

1. type="image/avif": browser yang mendukung AVIF berhenti di sini dan memuat interior.avif — berkas paling ringan.
2. type="image/webp": browser tanpa AVIF tetapi dengan WebP mengambil kandidat kedua.
3. img berformat JPG: cadangan klasik — browser lama yang tidak mengenali keduanya memuat berkas ini.
4. Tiga berkas berisi gambar yang sama: pilihan format tidak mengubah makna gambar, hanya efisiensinya — karena itu alt dan ukuran cukup ditulis satu kali di img.

picture vs srcset #

Ringkasan #

• picture = pembungkus keputusan: beberapa source bersyarat plus satu img cadangan terakhir.
• media memilih pemotongan berdasar kondisi viewport; type memilih format modern dengan cadangan klasik.
• alt, src, dan ukuran hanya dibawa img; source tidak memiliki alt.
• srcset untuk efisiensi piksel; picture untuk keputusan format dan pemotongan.

Ukuran berkas hanyalah separuh strategi pemuatan — separuh lagi adalah kapan gambar dimuat, pembahasan chapter berikutnya.