Apa yang harus dilakukan jika kita ingin menentukan sumber gambar dalam format WebP dan fallback ke format lain jika browser tidak mendukung?

Anda dapat menggunakan elemen HTML  <picture>  dan  <source>  untuk menentukan beberapa sumber gambar dalam format yang berbeda. Jika browser mendukung format WebP, maka gambar dalam format tersebut akan digunakan. Jika tidak, browser akan memilih sumber gambar lain yang didukungnya.
 
Berikut adalah contoh cara penerapannya:
 
 
<picture>
  <source srcset="gambar.webp" type="image/webp">
  <img src="gambar.jpg" alt="Deskripsi Gambar">
</picture>
 
 
Dalam contoh di atas, browser akan mencoba memuat  gambar.webp  terlebih dahulu. Jika browser tidak mendukung format WebP, maka akan fallback ke  gambar.jpg . Elemen  <img>  di sini berfungsi sebagai fallback dan juga sebagai tempat untuk menentukan atribut seperti  alt  yang akan digunakan oleh gambar, tidak peduli apakah sumber WebP atau JPEG yang dimuat.

Postingan populer dari blog ini

Kok bisa sampe begitu sih bang, matanya sampe

Kenapa Kenapa Kenapa

Tunduk Patuh Selagi Lagi

Bukannya Mainan

Gabolehk Kayahk Gituh

Nanti Lagi Aja