Format Gambar Modern

Setelah gambar terkirim seukuran tampil, penghematan berikutnya datang dari pilihan format file. Gambar yang tampak identik bisa berukuran sangat berbeda bergantung formatnya: foto 600 piksel yang memakan 48 KB sebagai jpeg dapat turun ke sekitar 31 KB sebagai webp. Format modern seperti webp dan avif menawarkan kompresi jauh lebih baik daripada jpeg dan png, tetapi dukungan browsernya tidak sepenuhnya seragam. Chapter ini memetakan kapan setiap format layak dipakai, lalu menyusun fallback dengan elemen picture — mekanisme yang telah dibahas pada chapter Picture dan Source, kini kita nilai ulang dari sudut performa.

Peta Format dan Kegunaannya #

Tabel di atas merangkum halaman MDN Image types: webp menawarkan kompresi jauh lebih baik daripada png atau jpeg, sementara avif sedikit lebih hemat lagi namun dukungannya lebih sempit. Sebagai gambaran urutan besarnya, foto yang memerlukan 48 KB sebagai jpeg biasanya turun ke sekitar 31 KB sebagai webp dan 24 KB sebagai avif — angka ilustrasi untuk kualitas serupa. Untuk ikon dan grafis berbentuk sederhana, svg bahkan dapat lebih kecil daripada keduanya sekaligus tetap tajam.

picture sebagai Mekanisme Fallback Format #

Dukungan format yang tidak seragam bukan alasan menunda webp atau avif: elemen picture menyusun rantai kandidat sehingga browser modern menerima format terhemat dan browser lama tetap menerima file yang dapat ditampilkan. Mekanismenya hemat karena penilaian dilakukan sebelum unduhan: browser membaca atribut type pada source, memeriksa dukungan format dari nilai MIME type, dan melewati kandidat yang tidak didukung tanpa mengunduh satu byte pun. Karena itu, susun source dari format paling hemat di atas, lalu biarkan img pada posisi terakhir menjadi jalan keluar yang selalu berhasil.

Contoh: Rantai AVIF → WebP → JPEG #

File berikut memakai rantai fallback lengkap untuk satu foto produk; file produk.avif, produk.webp, dan produk.jpg bersifat hipotetis, sediakan versinya saat mencoba.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Produk Unggulan Toko Budi</title>
</head>
<body>
  <h1>Produk Unggulan</h1>
  <picture>
    <source type="image/avif" srcset="produk.avif">
    <source type="image/webp" srcset="produk.webp">
    <img src="produk.jpg" alt="Set panci tahan panas" width="600" height="400">
  </picture>
  <p>Set panci enam tingkat, Rp320.000.</p>
</body>
</html>

Output yang Dihasilkan:

Browser dengan dukungan avif -> mengunduh produk.avif (24 KB)
Browser dengan webp saja     -> melewati avif, mengunduh produk.webp (31 KB)
Browser tanpa keduanya       -> mengunduh produk.jpg (48 KB) dari img

Mari kita telaah peran setiap bagian:

1. Baris 10 (<picture>): wadah keputusan yang tidak menampilkan apa pun; seluruh kandidat gambar ditulis di dalamnya.
2. Baris 11 (source avif): kandidat pertama dan paling hemat; browser yang mendukung avif berhenti di sini.
3. Baris 12 (source webp): kandidat kedua; file-nya hanya diunduh bila avif tidak didukung.
4. Baris 13 (img): jalan keluar terakhir yang selalu berhasil; satu-satunya tempat src, alt, width, dan height melekat.
5. Baris 15 (p): teks penampil yang tidak berubah — pemilihan format berlangsung di belakang layar.

Dari sudut performa, pola ini memberi hasil terbaik dari dua arah sekaligus: pengunjung dengan browser modern membayar 24 KB, dan tidak ada pengunjung yang gagal melihat gambar.

SVG untuk Ikon dan Grafis #

Format modern di atas tetap bekerja pada piksel; svg bekerja pada bentuk, sehingga ukuran filenya bergantung pada kerumitan gambar, bukan dimensi. Ikon navigasi, logo, dan grafik batang yang digambar sebagai svg biasanya hanya menyerap ratusan byte, tetap tajam pada layar beresolusi tinggi, dan tidak memerlukan fallback karena dukungannya universal. Section SVG dan Graphics membahas pembuatannya secara menyeluruh; dari sudut performa, aturan praktisnya ringkas: pakai svg untuk bentuk dan garis, pakai webp atau avif untuk foto.

Dengan format yang tepat, byte per gambar turun tajam. Chapter berikutnya menangani sisi lainnya: menunda unduhan gambar yang belum terlihat melalui lazy loading.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Image types
• MDN Web Docs — Elemen picture
• MDN Web Docs — Elemen source
• WHATWG — HTML Living Standard: images

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Produk Unggulan Toko Budi</title>
</head>
<body>
  <h1>Produk Unggulan</h1>
  <picture>
    <source type="image/avif" srcset="produk.avif">
    <source type="image/webp" srcset="produk.webp">
    <img src="produk.jpg" alt="Set panci tahan panas" width="600" height="400">
  </picture>
  <p>Set panci enam tingkat, Rp320.000.</p>
</body>
</html>