Cara Meningkatkan Kecepatan Situs dengan AVIF dan WebP: Panduan Lengkap

TL;DR – Mengganti JPEG/PNG dengan AVIF (atau WebP bila AVIF tidak didukung) dapat memotong 30‑80 % ukuran gambar, mengurangi LCP hingga 0,5 s, dan meningkatkan SEO tanpa mengorbankan visual. Fallback <picture> sederhana atau aturan header Accept dapat mencapainya dalam hitungan menit, dan sebagian besar CDN dapat menangani prosesnya secara otomatis.

Mengapa format gambar “generasi berikutnya” penting saat ini

Setiap milidetik penting di web. Studi dari Akamai dan Google menunjukkan bahwa 100 ms yang dihemat dapat meningkatkan pendapatan sebesar 1‑2 % untuk situs e‑commerce. Gambar adalah penyebab utama pada halaman tipikal – > 60 % dari total byte (HTTP Archive, 2024).

Masuklah AVIF dan WebP. Kedua format ini menjanjikan 30‑80 % file yang lebih kecil dibanding JPEG/PNG lama sambil menjaga kualitas visual yang tidak dapat dibedakan oleh mata manusia. Manfaatnya langsung terasa:

• Bandwidth lebih rendah → paket data lebih murah untuk pengguna seluler.
• Waktu muat lebih cepat → Core Web Vitals lebih baik, peringkat Google lebih tinggi.
• Beban server berkurang → jejak cache lebih kecil, tagihan CDN lebih murah.

Jika Anda sudah mengoptimalkan CSS/JS, kompresi gambar adalah “low‑hanging fruit” yang memberikan ROI terbesar.

AVIF vs. WebP – perbandingan singkat

Intinya: AVIF unggul dalam kompresi mentah dan dukungan HDR, sementara WebP memiliki cakupan legacy terluas dan ekosistem animasi yang matang. Pendekatan praktis adalah menyajikan AVIF terlebih dahulu, fallback ke WebP, lalu ke JPEG/PNG untuk kasus yang sangat sedikit.

Dukungan browser & strategi fallback yang dapat Anda salin‑tempel

1. Pola <picture> (negosiasi sisi klien)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image of a sunrise over the city" loading="lazy" width="1200" height="800">
</picture>

Browser akan memilih format pertama yang dipahaminya; browser lama cukup mengabaikan tag <source> dan memuat fallback JPEG.

2. Negosiasi header Accept sisi server (untuk satu URL)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Jika klien mengiklankan image/avif, Nginx akan menyajikan hero.avif; jika tidak, fallback ke WebP atau JPEG.

3. Biarkan CDN melakukan pekerjaan berat

Sebagian besar penyedia edge (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) memiliki toggle yang secara otomatis mengonversi JPEG/PNG yang di‑upload menjadi AVIF/WebP berdasarkan header Accept. Aktifkan, bersihkan cache, dan selesai.

Alat & alur kerja – masukkan AVIF/WebP ke pipeline build Anda

One‑liner untuk kebanyakan pipeline CI

# Convert setiap PNG di assets/ menjadi AVIF dengan kualitas 45 %
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Tip: Simpan sumber beresolusi tinggi di repositori; hasilkan AVIF/WebP secara dinamis saat proses build. Dengan begitu Anda dapat menjalankan kembali dengan kualitas berbeda tanpa mengunggah ulang aset.

Dampak dunia nyata – angka yang penting

Sumber: Audit WebPageTest + Lighthouse (2024‑2025) pada situs ritel yang melakukan uji A/B selama 4 minggu. Varian AVIF memberikan LCP lebih cepat 0,4 s dan kenaikan konversi seluler 12 %.

Studi kasus yang dapat Anda kutip

• Pedagang Shopify (2025) – AVIF untuk thumbnail produk mengurangi berat halaman sebesar 38 % dan memotong LCP 0,3 s pada jaringan 3G.
• The New York Times – Mengganti gambar artikel inline ke AVIF, menghemat 45 % bandwidth dan melihat peningkatan keterlibatan seluler sebesar 12 %.
• Airbnb – Foto profil host disajikan sebagai AVIF pada browser yang mendukung, menghasilkan first paint 0,4 s lebih cepat pada jaringan lambat.

Apa yang harus dilakukan selanjutnya – checklist cepat

1. Audit payload gambar Anda saat ini – Lighthouse “Serve images in next‑gen formats”.
2. Tambahkan langkah build yang menghasilkan AVIF (dan WebP sebagai fallback) menggunakan sharp atau avifenc.
3. Perbarui HTML dengan blok <picture> atau aktifkan negosiasi header Accept sisi server.
4. Setel header cache jangka panjang (Cache‑Control: max-age=31536000, immutable).
5. Aktifkan lazy‑loading (loading="lazy" atau IntersectionObserver) agar AVIF yang berada di luar layar tidak langsung didekode.
6. Nyalakan konversi edge CDN bila Anda lebih suka tidak menyimpan AVIF secara lokal.
7. Pantau Core Web Vitals – Anda seharusnya melihat LCP turun 0,2‑0,5 s dalam seminggu setelah peluncuran.

Pandangan ke depan: Pada 2028 IDC memperkirakan > 80 % gambar web akan menjadi AVIF‑first, berkat dukungan HDR dan header “image format negotiation” yang akan datang di Chrome 130+. Memasuki lebih awal tidak hanya meningkatkan performa hari ini, tetapi juga mempersiapkan situs Anda untuk gelombang pengalaman visual web berikutnya.

Tag: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp