Media Fallbacks

Satu halaman media menyimpan banyak titik kegagalan: path file salah ketik, format tidak didukung, jaringan terputus, atau browser terlalu tua untuk mengenal elemen media. Halaman yang baik menyusun rencana cadangan di setiap lapisan agar kegagalan satu bagian tidak menghilangkan makna halaman. Pada Chapter ini kita merangkum pola tersebut, menambahkan atribut onerror untuk img, dan menyusun tabel strategi yang siap dipakai ulang.

Konsep Fallback Berlapis #

Fallback adalah rencana cadangan yang browser jalankan otomatis bila pilihan utama gagal. Media modern menumpuk beberapa lapis sekaligus: format terbaru untuk browser terkini, format klasik untuk sisanya, teks pengganti untuk yang tak bisa memutar, dan alt untuk gambar. Tidak ada satu atribut tunggal yang mengurus semuanya; kita yang menyusun lapisannya, dari yang paling modern menuju yang paling aman.

Tabel Strategi Fallback #

Lima lapis berikut merangkum pola-pola tersebut:

Multiple source dengan type #

Elemen source menawarkan kandidat file, dan atribut type menuliskan MIME type tiap kandidat. Browser menelusuri daftar dari atas, menilai dukungan format dari type tanpa mengunduh file, lalu memakai kandidat pertama yang didukung. Pola ini berlaku seragam pada picture, audio, dan video, sehingga satu kebiasaan mencakup tiga elemen.

Teks Cadangan di dalam audio dan video #

Untuk browser yang tidak mengenal elemen media sama sekali, isi di antara tag pembuka dan penutup audio atau video menjadi satu-satunya yang tampil. Tulis kalimat bermakna: nama rekaman, alasan teks ini ada, dan link unduhan bila relevan. Browser modern mengabaikan teks tersebut, sehingga tidak ada kerugian tampilan.

onerror pada img #

img tidak punya mekanisme kandidat cadangan bawaan seperti picture, tetapi atribut onerror menutup celah itu. Atribut ini berisi kode kecil yang browser jalankan saat gambar gagal dimuat — JavaScript yang kita dalami pada section HTML dan JavaScript. Pola yang umum: menunjuk gambar cadangan, lalu mematikan onerror agar tidak berulang.

<img src="produk.webp"
     alt="Tas anyaman warna cokelat dengan tali kulit"
     width="240" height="180"
     onerror="this.onerror=null;this.src='gambar-cadangan.svg'">

alt sebagai Fallback Visual #

Bila tidak ada gambar cadangan pun, teks alt menjadi lapisan terakhir yang tetap menyampaikan makna. Browser menampilkan alt pada ruang gambar yang kosong, sehingga pengunjung paling tidak membaca deskripsinya. Rangkaiannya lengkap: format alternatif lewat picture, file cadangan lewat onerror, dan teks makna lewat alt.

Contoh Gabungan dalam Satu File #

File berikut menumpuk lapisan pada satu halaman katalog: picture dengan kandidat webp, img ber-onerror menuju svg cadangan, dan audio dua format dengan teks pengganti. File produk.webp, produk.jpg, dan kedua file audio bersifat hipotetis:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Media Fallbacks</title>
</head>
<body>
  <h1>Katalog produk toko Budi</h1>
  <picture>
    <source srcset="produk.webp" type="image/webp">
    <img src="produk.jpg"
         alt="Tas anyaman warna cokelat dengan tali kulit"
         width="240" height="180"
         onerror="this.onerror=null;this.src='gambar-cadangan.svg'">
  </picture>
  <p>Produk anyaman buatan tangan dari Siti.</p>
  <audio controls preload="none">
    <source src="penjelasan.mp3" type="audio/mpeg">
    <source src="penjelasan.ogg" type="audio/ogg">
    Browser ini tidak mendukung pemutaran audio; deskripsi produk tersedia dalam teks di bawah.
  </audio>
  <p>Tas ini dibuat dari serat bambu dan mampu menahan beban hingga lima kilogram.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Gambar produk: webp bila didukung, jpg bila tidak, dan svg
    cadangan bila kedua file gambar tidak ditemukan; bila semuanya
    gagal, teks alt tampil pada ruang gambar
  - Paragraf pengantar produk
  - Player audio dari penjelasan.mp3 atau penjelasan.ogg
  - Paragraf deskripsi produk yang berdiri sendiri tanpa audio

Mari kita telaah lapisan-lapisan pada file di atas:

1. Baris 10-16 (picture): wadah yang menampung seluruh kandidat gambar.
2. Baris 11 (source webp): kandidat paling modern; dilewati browser tanpa dukungan webp.
3. Baris 12-15 (img): kandidat jpg dengan alt deskriptif serta width dan height untuk reservasi ruang.
4. Atribut onerror: bila jpg gagal, sumber pindah ke gambar-cadangan.svg; penangan galat dimatikan lebih dulu agar tidak berulang.
5. Baris 18-23 (audio dan paragraf deskripsi): kandidat MP3 dan OGG dengan teks pengganti; makna produk tetap tersaji lewat teks biasa.

Seluruh chapter section Images dan Media kini tersusun: gambar dengan src dan alt, teks pengganti, sumber responsif, picture dan source, audio, video, teks pita, hingga fallback berlapis. Section berikutnya membawa kita ke Lists — struktur konten berbentuk daftar yang muncul di hampir setiap halaman web.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen img
• MDN Web Docs — Elemen source
• MDN Web Docs — Elemen picture
• WHATWG — HTML Living Standard: Media elements

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Media Fallbacks</title>
</head>
<body>
  <h1>Katalog produk toko Budi</h1>
  <picture>
    <source srcset="produk.webp" type="image/webp">
    <img src="produk.jpg"
         alt="Tas anyaman warna cokelat dengan tali kulit"
         width="240" height="180"
         onerror="this.onerror=null;this.src='gambar-cadangan.svg'">
  </picture>
  <p>Produk anyaman buatan tangan dari Siti.</p>
  <audio controls preload="none">
    <source src="penjelasan.mp3" type="audio/mpeg">
    <source src="penjelasan.ogg" type="audio/ogg">
    Browser ini tidak mendukung pemutaran audio; deskripsi produk tersedia dalam teks di bawah.
  </audio>
  <p>Tas ini dibuat dari serat bambu dan mampu menahan beban hingga lima kilogram.</p>
</body>
</html>