Format gambar adalah cara sebuah file menyimpan pikselnya. Foto yang sama bisa sekitar 180 KB sebagai JPEG dan sekitar 80 KB sebagai AVIF, dan mata hampir gak bisa membedakannya. Mirip melipat baju ke koper: dilipat biasa (JPEG), digulung rapat (WebP), atau dimasukkan vacuum bag (AVIF). Bajunya sama, tempatnya biasanya makin kecil. Tapi lemari tua (browser lama) cuma bisa membuka lipatan biasa, makanya kamu tetap menyiapkan versi biasa sebagai cadangan.
🧪 Tebakan cepat: logo tokomu punya latar transparan dan teks yang harus tajam. Simpan sebagai JPEG, PNG, atau SVG? Tebak dulu, jawabannya ada di bagian "Pilih format sesuai isinya".
Empat istilah dulu
- Raster: gambar yang tersusun dari kotak-kotak piksel, seperti foto. JPEG, PNG, WebP, dan AVIF semuanya raster.
- Vector: gambar yang disimpan sebagai rumus garis dan bentuk, jadi tetap tajam di ukuran berapa pun. Formatnya SVG.
- Lossy membuang detail yang hampir gak kelihatan supaya file kecil. Lossless menyimpan semua piksel persis sama.
- Transparansi (alpha channel) artinya ada bagian gambar yang tembus pandang, jadi latar halaman kelihatan di baliknya.
| Format | Kompresi | Transparan | Cocok untuk | Dukungan browser |
|---|---|---|---|---|
| JPEG | lossy | gak | foto | semua |
| PNG | lossless | ya | logo, ikon, screenshot, teks | semua |
| WebP | lossy dan lossless | ya | foto dan grafik | semua browser modern |
| AVIF | lossy dan lossless | ya | foto | browser modern, Safari sejak versi 16 |
| SVG | vector | ya | logo, ikon, ilustrasi sederhana | semua |
Berapa hematnya
Foto 1200 × 900 di Lab, dengan tampilan yang setara:
| Format | Ukuran | Dibanding JPEG |
|---|---|---|
| JPEG | sekitar 180 KB | patokan |
| WebP | sekitar 120 KB | sepertiga lebih kecil |
| AVIF | sekitar 80 KB | lebih dari setengah lebih kecil |
| PNG | sekitar 1,4 MB | hampir 8 kali lebih besar |
Patokan umumnya: WebP sekitar 25 sampai 35% lebih kecil dari JPEG di kualitas setara. AVIF sekitar setengahnya, dan untuk banyak foto bisa 2 sampai 3 kali lebih kecil (hemat sampai sekitar 70%). Jadi foto 1920 × 1080 yang 150 KB sebagai JPEG kira-kira jadi 100 KB sebagai WebP, dan bisa turun sampai sekitar 45 KB sebagai AVIF. PNG untuk foto justru salah pilih: lossless berarti semua detail kecil disimpan, jadi filenya membengkak.
Urutan cadangan dengan <picture>
Kamu sudah kenal <picture> dari pelajaran Responsive Images. Browser membaca <source> dari atas, melewati yang type-nya gak dia kenal, dan memakai yang pertama dia dukung:
<picture>
<!-- paling hemat dulu -->
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<!-- cadangan untuk semua browser, plus alt dan ukurannya -->
<img src="foto.jpg" width="1200" height="900" alt="Sawah di pagi hari">
</picture>
| Browser | AVIF? | WebP? | Yang diunduh |
|---|---|---|---|
| Chrome terbaru | ya | ya | foto.avif, sekitar 80 KB |
| Safari 15 | gak | ya | foto.webp, sekitar 120 KB |
| Browser sangat lama (IE 11) | gak | gak | foto.jpg, sekitar 180 KB |
- Tiap browser cuma mengunduh satu file. Source yang dilewati gak diunduh sama sekali.
typeitulah yang membuat browser bisa melewati format yang gak dia kenal tanpa mencobanya.- Urutan menentukan prioritas: format terkecil ditaruh paling atas.
Pilih format sesuai isinya
- Foto: AVIF, lalu WebP, dengan JPEG sebagai cadangan di
<img>. - Logo, ikon, ilustrasi sederhana: SVG kalau ada versi vector-nya. Ukurannya sering cuma beberapa KB dan tajam di layar mana pun.
- Logo atau screenshot raster dengan teks dan transparansi: PNG, atau WebP lossless yang biasanya sekitar seperempat lebih kecil. JPEG gak punya transparansi dan bikin tepi teks buram.
- Animasi: video, bukan GIF. GIF 2,5 MB sering jadi sekitar 250 KB sebagai MP4:
<video autoplay muted loop playsinline src="loading.mp4"></video>.
Jadi untuk logo transparan dengan teks tajam: SVG kalau logonya vector, PNG kalau cuma ada versi gambarnya. JPEG gak bisa. Itu jawaban tebakannya.
Untuk mengonversi, pakai squoosh.app di browser untuk satu-dua file, atau sharp di Node.js untuk banyak file sekaligus saat build.
⚠️ Jebakan yang sering ketemu
<source>tanpatype. Browser yang gak kenal AVIF tetap memilihnya, mengunduhnya, lalu gagal membukanya. Hasilnya gambar rusak, bukan cadangan JPEG.- Urutan terbalik. Kalau WebP di atas AVIF, Chrome yang bisa keduanya mengambil WebP, dan AVIF gak pernah terpakai.
- Foto disimpan sebagai PNG. Berkali-kali lebih besar tanpa terlihat lebih bagus.
- Konversi dari file yang sudah dikompres jelek. Kompresi lossy dua kali menumpuk cacatnya. Konversi dari file asli yang kualitasnya tinggi.
TL;DR: Untuk foto 1200 × 900: JPEG sekitar 180 KB, WebP sekitar 120 KB (umumnya 25 sampai 35% lebih kecil), AVIF sekitar 80 KB (sekitar setengahnya, bisa 2 sampai 3 kali lebih kecil). Sajikan lewat <picture>: <source> AVIF dengan type="image/avif", lalu <source> WebP dengan type="image/webp", lalu <img> JPEG sebagai cadangan; tiap browser mengunduh satu file pertama yang dia dukung. Logo dan ikon pakai SVG, gambar dengan teks atau transparansi pakai PNG (atau WebP lossless), animasi pakai video, dan jangan pernah simpan foto sebagai PNG.
