Memilih Format Gambar: JPG, PNG, SVG, WebP

Memilih Wadah yang Tepat untuk Bekal

Bayangkan kamu membawa bekal makan siang. Nasi dan lauk berkuah paling pas di kotak makan kedap udara, sedangkan kerupuk paling pas di plastik klip agar tetap renyah. Memakai wadah yang salah, misalnya kerupuk di kotak berkuah, hasilnya bencana. Memilih format gambar persis seperti itu: setiap format adalah "wadah" dengan keunggulan berbeda, dan memakai yang salah membuat halamanmu lambat atau gambarnya jelek.

Kenapa ini penting? Gambar biasanya adalah bagian terberat dari sebuah halaman web, sering 50 persen lebih dari total ukuran halaman. Format yang tepat bisa memangkas ukuran file sampai 70 persen tanpa perbedaan visual yang terlihat. Di negara dengan koneksi seluler yang fluktuatif, itu perbedaan antara pengunjung yang bertahan dan pengunjung yang pergi.

Kenalan dengan Empat Formatnya

JPG (atau JPEG): rajanya foto. Menggunakan kompresi lossy, artinya ia membuang sebagian detail yang mata manusia sulit lihat demi ukuran file kecil. Cocok untuk foto dan gambar kompleks bergradasi warna. Tidak mendukung transparansi.

<img src="pantai-sunset.jpg" alt="Matahari terbenam di Pantai Kuta" />

PNG: rajanya grafis tajam dan transparan. Menggunakan kompresi lossless, detail 100 persen terjaga, dan mendukung transparansi (latar tembus pandang). Harganya: ukuran file besar untuk foto. Cocok untuk logo, ikon, screenshot, dan gambar yang butuh transparansi.

<img src="logo-warkop.png" alt="Logo Warkop Doa Ambu" />

SVG: gambar vektor yang tak pernah pecah. Bukan kumpulan piksel, melainkan instruksi menggambar (garis, kurva, bentuk) dalam format teks. Bisa diperbesar sejauh apa pun tanpa pecah, dan ukurannya kecil untuk grafis sederhana. Cocok untuk logo, ikon, ilustrasi sederhana, dan diagram. Tidak cocok untuk foto.

<img src="ikon-keranjang.svg" alt="Ikon keranjang belanja" />

WebP: penantang modern serba bisa. Format buatan Google yang menggabungkan keunggulan JPG (kecil untuk foto) dan PNG (transparansi), dengan ukuran 25 sampai 35 persen lebih kecil dari keduanya pada kualitas setara. Didukung semua browser modern. Cocok sebagai format default untuk foto dan grafis di web masa kini.

<img src="kopi-susu.webp" alt="Segelas kopi susu gula aren" />

Contoh 1: Keputusan Cepat

Tabel keputusan yang bisa kamu hafal:

<!-- FOTO produk, suasana, dokumentasi -> JPG atau WebP -->
<img src="interior-warkop.webp" alt="Suasana interior warkop" />

<!-- LOGO dengan latar transparan -> PNG atau SVG -->
<img src="logo.svg" alt="Logo Warkop Doa Ambu" />

<!-- IKON kecil (keranjang, telepon, bintang) -> SVG -->
<img src="ikon-telepon.svg" alt="Ikon telepon" />

<!-- SCREENSHOT aplikasi dengan teks tajam -> PNG -->
<img src="aplikasi-kasir.png" alt="Tampilan aplikasi kasir" />

Aturan jempolnya: foto pakai JPG/WebP, grafis sederhana dan ikon pakai SVG, butuh transparansi pada grafis kompleks pakai PNG, teks harus tajam pakai PNG atau SVG.

Contoh 2: Kasus Nyata dengan Fallback

Kasus nyata: halaman menu warkop memuat 20 foto makanan. Memakai PNG untuk semuanya membuat halaman 15 MB dan butuh 30 detik dimuat di koneksi 3G. Solusinya: WebP sebagai format utama, dengan JPG sebagai cadangan untuk browser sangat tua, memakai elemen picture.

<picture>
  <source srcset="nasi-goreng.webp" type="image/webp" />
  <source srcset="nasi-goreng.jpg" type="image/jpeg" />
  <img src="nasi-goreng.jpg" alt="Sepiring nasi goreng spesial" />
</picture>

Cara kerja picture: browser membaca source dari atas ke bawah dan memakai yang pertama ia dukung. Browser modern mengambil WebP yang ringan; browser jadul mundur ke JPG. Elemen img terakhir adalah cadangan wajib sekaligus tempat menaruh alt.

Contoh kedua: logo website. Versi SVG hanya 4 KB dan tajam di layar retina mana pun, sedangkan versi PNG butuh 120 KB agar tajam di layar besar:

<!-- 4 KB, tajam di semua ukuran -->
<img src="logo.svg" alt="Logo Warkop Doa Ambu" width="160" height="48" />

Kesalahan Umum Pemula

Salah: memakai PNG untuk foto.

<!-- SALAH: foto 2 MB padahal bisa 200 KB -->
<img src="foto-pantai.png" alt="Pantai" />

<!-- BENAR -->
<img src="foto-pantai.webp" alt="Pantai" />

PNG menyimpan setiap piksel foto dengan sempurna, padahal mata tidak bisa membedakan hasilnya dari JPG berkualitas 80 persen. Ini pemborosan terbesar yang sering terjadi.

Salah: memakai JPG untuk logo atau teks.

<!-- SALAH: tepi logo bergerigi dan kotor -->
<img src="logo.jpg" alt="Logo" />

<!-- BENAR: tajam sempurna, ukuran kecil -->
<img src="logo.svg" alt="Logo" />

Kompresi lossy JPG menciptakan artefak di sekitar garis tegas dan teks. Logo dan ikon selalu lebih baik sebagai SVG atau PNG.

Salah: memakai SVG untuk foto. SVG untuk foto berarti menanam ribuan bentuk vektor, hasilnya file raksasa yang lambat dirender. Foto selalu format piksel (JPG/WebP), bukan vektor.

Salah: mengandalkan WebP tanpa fallback di proyek yang harus mendukung browser lama. Untuk audiens umum modern ini jarang masalah, tetapi pola picture di atas gratis dan aman, jadi tidak ada alasan melewatkannya.

Catatan teknis: Selain memilih format, selalu cantumkan atribut width dan height pada img. Tanpa itu, browser tidak tahu ruang yang dipesan sebelum gambar selesai dimuat, sehingga teks melompat-lompat saat gambar muncul (disebut layout shift, dan Google menilainya sebagai pengalaman buruk). Format yang tepat membuat file kecil; dimensi yang eksplisit membuat halaman stabil.