Format Gambar Modern
Format gambar modern seperti WebP dan AVIF menawarkan kompresi yang jauh lebih baik daripada JPEG dan PNG.
Perbandingan Format
| Format | Tipe | Kompresi vs JPEG | Browser Support |
|---|---|---|---|
| JPEG | Lossy | Baseline | Universal |
| PNG | Lossless | Lebih besar | Universal |
| WebP | Both | 25-35% lebih kecil | 95%+ (sejak 2023) |
| AVIF | Both | 50% lebih kecil | ~85% |
Perbandingan Ukuran Nyata
Foto landscape 1920×1080 (kualitas visual setara, ~95% SSIM):
Angka di atas adalah estimasi. Untuk foto yang sama, AVIF umumnya 2-3× lebih kecil dari JPEG di kualitas visual setara, sementara WebP ~1.5× lebih kecil.
Kapan Menggunakan Apa
- Foto/gambar kompleks → AVIF > WebP > JPEG
- Ilustrasi/grafik sederhana → SVG (vector, scalable, tiny)
- Transparansi → WebP/AVIF > PNG (jauh lebih kecil)
- Animasi → Video (MP4) > WebP animasi > GIF (GIF sangat besar!)
Fallback Cascade dengan <picture>
Browser akan memilih format pertama yang didukung, dari atas ke bawah:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero" width="1920" height="1080">
</picture>Chrome/Firefox modern dapat AVIF (45KB), browser sedikit lebih lama dapat WebP (90KB), Safari lama dapat JPEG fallback (150KB). Semua user dapat pengalaman terbaik yang browser mereka dukung.
Konversi Tools
squoosh.app— Google's image optimizer (browser-based)sharp— Node.js library untuk processing gambar di build pipeline@svgr/webpack— Convert SVG ke React component
