Elemen gambar

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

Sama seperti srcset yang dibangun berdasarkan atribut src, elemen picture dibangun berdasarkan elemen img. Elemen picture membungkus 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 jika atribut srcset memberikan saran kepada browser, elemen picture memberikan perintah. Hal ini memberi Anda kontrol.

source

Anda dapat menentukan beberapa elemen source di dalam elemen picture, yang masing-masing memiliki atribut srcset sendiri. Kemudian, browser akan menjalankan yang pertama yang dapat dijalankannya.

Format gambar

Dalam contoh ini, ada tiga gambar berbeda dalam tiga format 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">
</picture>

Elemen source pertama mengarah ke gambar dalam format AVIF baru. Jika browser dapat merender gambar AVIF, maka file gambar itulah yang dipilihnya. Jika tidak, elemen source berikutnya akan dipilih.

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

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 dengan versi sebelumnya.

Dalam contoh tersebut, atribut type memberi tahu browser jenis format gambar yang ditentukan.

Ukuran gambar

Selain beralih di antara format gambar, Anda dapat beralih di antara 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">
</picture>

Di sini, Anda memberi tahu browser bahwa jika lebar area tampilan lebih lebar dari 75em, browser 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 penggunaan atribut srcset dan sizes pada elemen img. Dalam hal ini, Anda memberikan saran kepada browser. Elemen source lebih seperti perintah daripada saran.

Anda juga dapat menggunakan deskriptor 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"
    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 sekarang browser memiliki opsi untuk memilih gambar yang paling sesuai untuk kepadatan piksel perangkat.

Memangkas

Jika Anda hanya perlu menayangkan versi gambar yang sama dengan ukuran berbeda, srcset adalah opsi terbaik. 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, di browser seluler, Anda mungkin ingin menayangkan hasil pangkasan yang sempit dan tinggi, sedangkan di browser desktop, Anda mungkin ingin menayangkan hasil pangkasan yang lebar dan pendek.

Berikut adalah contoh gambar utama 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" fetchpriority="high">
</picture>

Ingatlah 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 pada elemen img mencakup banyak kasus penggunaan. Namun, untuk situasi saat Anda memerlukan kontrol yang lebih terperinci, elemen picture adalah alat yang efektif.

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

Uji pemahaman Anda

Uji pengetahuan Anda tentang elemen gambar