AVIF

TL;DR: AVIF adalah format gambar generasi terbaru berbasis codec AV1 yang menghasilkan file lebih kecil daripada WebP dan JPEG pada kualitas setara, sering 30-50% lebih ringan dari JPEG. Cocok untuk foto detail, tapi dukungan browser belum seluas WebP sehingga butuh fallback.

Saat mengejar skor performa di atas 90 untuk sebuah website client, satu perubahan yang dampaknya paling terasa adalah memindahkan hero image dari JPEG ke AVIF. Ukuran turun hampir setengah, dan halaman terasa lebih ringan dibuka di perangkat mobile.

Apa itu AVIF?

AVIF (AV1 Image File Format) adalah format gambar yang dibangun di atas codec video AV1. Dirilis sebagai standar pada 2019, AVIF menawarkan kompresi yang lebih efisien daripada WebP maupun JPEG, dengan dukungan transparansi, HDR, dan rentang warna lebar. Hasilnya: kualitas visual tinggi pada ukuran file yang sangat kecil, yang membantu memperbaiki Largest Contentful Paint.

AVIF vs WebP

AVIF unggul pada rasio kompresi, tapi proses encode lebih lambat dan dukungan browser belum seluas WebP. Pendekatan aman: sajikan AVIF lebih dulu, lalu WebP, lalu JPEG sebagai fallback.

Kenapa Penting?

Bagi pemilik website bisnis yang ingin halaman cepat tanpa mengorbankan kualitas visual, AVIF memberi ruang efisiensi tambahan setelah WebP. Praktik yang saya terapkan adalah memakai AVIF untuk gambar besar seperti hero dan banner, dikombinasikan dengan lazy loading untuk gambar di bawah lipatan. Spesifikasi format dapat dirujuk di dokumentasi MDN tentang AVIF.

Pertanyaan Umum

Apakah AVIF selalu lebih baik daripada WebP?

Untuk efisiensi ukuran, umumnya ya. Namun encode lebih lambat dan dukungan browser belum universal, jadi WebP tetap relevan sebagai fallback.

Kapan sebaiknya pakai AVIF?

Untuk gambar besar dan penting secara visual seperti hero image, di mana penghematan ukuran paling terasa pada pengalaman pengguna.