Elemen gambar

Modul sebelumnya mendemonstrasikan bagaimana atribut srcset memungkinkan Anda menyediakan gambar yang sama dalam ukuran berbeda. Kemudian, browser dapat memutuskan versi yang tepat untuk digunakan. Jika ingin mengubah gambar sepenuhnya, Anda memerlukan elemen picture.

Dengan cara yang sama seperti srcset yang dibuat 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 disusun bertingkat 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 memberikan perintah. Hal ini memberi Anda kontrol.

source

Anda dapat menentukan beberapa elemen source di dalam elemen picture, masing-masing dengan atribut srcset-nya sendiri. Kemudian, browser menjalankan fungsi pertama yang dapat dilakukan.

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 file tersebut adalah file gambar yang dipilih. Jika tidak, item akan berpindah ke elemen source berikutnya.

Elemen source kedua mengarah ke gambar dalam format WebP. Jika browser dapat merender gambar WebP, file gambar tersebut akan digunakan.

Jika tidak, browser akan kembali ke file gambar dalam atribut src 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 tentang 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>

Di sini, Anda memberi tahu browser bahwa jika lebar area pandang lebih lebar dari 75em, maka harus menggunakan gambar besar. Antara 40em dan 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 memberikan saran ke browser. Elemen source lebih mirip 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, tetapi kini browser memiliki opsi untuk memilih gambar yang paling sesuai dengan kepadatan piksel perangkat.

Memangkas

Jika Anda hanya perlu menayangkan versi gambar yang sama dengan ukuran berbeda, srcset adalah opsi terbaik Anda. Namun, jika gambar tidak terlihat 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 menyajikan pemangkasan yang sempit dan tinggi, sedangkan pada browser desktop, Anda mungkin ingin menyajikan pemangkasan yang lebar dan pendek.

Berikut adalah contoh {i>hero image<i} yang mengubah konten 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>

Perlu diingat bahwa Anda tidak dapat mengubah atribut alt bergantung pada sumber gambar. Anda harus menulis atribut alt yang menjelaskan gambar ukuran penuh dan gambar yang dipangkas.

Anda mungkin tidak perlu menggunakan elemen picture untuk sebagian besar gambar responsif—atribut srcset dan sizes di elemen img mencakup banyak kasus penggunaan. Namun, untuk situasi saat Anda memerlukan kontrol yang lebih mendetail, elemen picture merupakan alat yang canggih.

Ada satu jenis gambar yang mungkin tidak memerlukan solusi keduanya: ikon. Itulah selanjutnya.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang elemen gambar