Modul sebelumnya mendemonstrasikan bagaimana atribut srcset
memungkinkan Anda memberikan versi yang berbeda dari gambar yang sama. Selanjutnya browser dapat menentukan versi yang tepat untuk digunakan. Jika ingin mengubah gambar sepenuhnya, Anda memerlukan elemen picture
.
Dengan cara yang sama seperti srcset
di-build berdasarkan atribut src
, elemen picture
dibuat berdasarkan elemen img
. Elemen picture
menggabungkan elemen img
.
<picture>
<img src="image.jpg" alt="A description of the image.">
</picture>
Jika tidak ada elemen img
yang disarangkan di dalam elemen picture
, elemen picture
tidak akan berfungsi.
Seperti atribut srcset
, elemen picture
akan memperbarui nilai atribut src
dalam elemen img
tersebut. Perbedaannya adalah saat atribut srcset
memberikan saran ke browser, elemen picture
akan memberikan perintah. Hal ini memberi Anda kendali.
source
Anda dapat menentukan beberapa elemen source
di dalam elemen picture
, masing-masing dengan atribut srcset
-nya sendiri. Kemudian browser mengeksekusi perintah pertama yang dapat dilakukannya.
Format gambar
Dalam contoh ini, ada tiga gambar yang berbeda dalam tiga format yang berbeda:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
Elemen source
pertama mengarah ke gambar dalam format AVIF baru. Jika browser mampu merender gambar AVIF, maka itulah file gambar yang dipilihnya. Jika tidak, elemen akan berpindah ke elemen source
berikutnya.
Elemen source
kedua mengarah ke gambar dalam format WebP. Jika browser mampu merender gambar WebP, browser akan menggunakan file gambar tersebut.
Jika tidak, browser akan kembali ke file gambar dalam atribut src
dari elemen img
. Gambar tersebut adalah JPEG.
Artinya, Anda dapat mulai menggunakan format gambar baru tanpa mengorbankan kompatibilitas mundur.
Dalam contoh tersebut, atribut type
memberi tahu browser jenis format gambar yang ditentukan.
Ukuran gambar
Selain beralih antarformat gambar, Anda juga dapat mengganti ukuran gambar. Gunakan atribut media
untuk memberi tahu browser seberapa lebar gambar akan ditampilkan. Masukkan kueri media di dalam atribut media
.
<picture>
<source srcset="large.png" media="(min-width: 75em)">
<source srcset="medium.png" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
Dalam hal ini, Anda memberi tahu browser bahwa jika lebar area pandang lebih lebar dari 75em
, area pandang harus menggunakan gambar besar. Antara 40em
sampai 75em
browser harus menggunakan gambar sedang. Di bawah 40em
browser harus menggunakan gambar kecil.
Hal ini berbeda dengan menggunakan atribut srcset
dan sizes
pada elemen img
. Dalam hal ini, Anda akan memberikan saran ke browser. Elemen source
lebih mirip dengan perintah daripada saran.
Anda juga dapat menggunakan deskripsi kepadatan piksel di dalam atribut srcset
dari elemen source
.
<picture>
<source srcset="large.png 1x" media="(min-width: 75em)">
<source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>
Dalam contoh tersebut, Anda masih memberi tahu browser apa yang harus dilakukan pada titik henti sementara yang berbeda, namun sekarang browser memiliki opsi untuk memilih gambar yang paling sesuai untuk kepadatan piksel perangkat.
Pemangkasan
Jika Anda hanya perlu menayangkan versi dengan ukuran yang berbeda untuk gambar yang sama, srcset
adalah opsi terbaik. Namun, jika gambar terlihat tidak bagus dalam ukuran yang lebih kecil, Anda dapat mencoba membuat versi gambar yang dipangkas.
Gambar yang berbeda mungkin memiliki rasio lebar dan tinggi yang berbeda agar lebih sesuai dengan konteksnya. Misalnya, pada browser seluler, Anda mungkin ingin melakukan pemangkasan yang sempit dan tinggi, sedangkan pada browser desktop, Anda mungkin ingin melakukan pemangkasan yang lebar dan pendek.
Berikut ini contoh gambar utama yang mengubah kontennya dan bentuknya berdasarkan lebar area pandang. Tambahkan atribut width
dan height
ke setiap elemen source
.
<picture>
<source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
<source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
<img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>
Ingat bahwa Anda tidak dapat mengubah atribut alt
bergantung pada sumber gambarnya. Anda harus menulis atribut alt
yang mendeskripsikan gambar ukuran penuh dan gambar yang dipangkas.
Anda mungkin tidak perlu menggunakan elemen picture
untuk sebagian besar gambar responsif—atribut srcset
dan sizes
pada elemen img
mencakup banyak kasus penggunaan. Namun, untuk situasi tersebut saat Anda memerlukan kontrol yang lebih mendetail, elemen picture
adalah alat yang canggih.
Ada satu jenis gambar di mana Anda mungkin tidak membutuhkan salah satu solusi tersebut: ikon. Itulah langkah berikutnya.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang elemen gambar
Jika atribut srcset
memberikan ________ ke browser, elemen <picture>
memberikan ________.
Beberapa kemampuan elemen <picture>
adalah:
avif
atau webp
jika memungkinkan.