Elemen gambar

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