WebP dan AVIF untuk Marketer Indonesia: Cara Pilih Format Gambar yang Bikin LCP Lompat di 2026

TL;DR: WebP dan AVIF adalah format gambar modern yang bisa memangkas ukuran file 25-60% dibanding JPEG pada kualitas visual setara. Untuk landing page bisnis Indonesia, dampaknya langsung terlihat di metrik LCP, bisa turun 500 ms hingga lebih dari satu detik tanpa perubahan desain.

Banyak marketer di Indonesia masih meng-upload gambar produk dalam format JPEG 1920x1080 berukuran 400-800 KB. Padahal hero image yang sama, dikonversi ke WebP atau AVIF, bisa di bawah 200 KB dengan kualitas yang sulit dibedakan mata pengguna.

Saya melihat pola ini berulang di banyak audit performa: gambar adalah biang kerok LCP yang lambat, bukan JavaScript atau CSS. Memilih format yang tepat sering lebih dampak daripada lazy loading atau code splitting.

Kenapa Format Gambar Penting untuk Marketer

Studi HTTP Archive menunjukkan gambar menyumbang sekitar 50% ukuran median halaman web di 2026. Untuk halaman bisnis dengan banyak hero image, foto produk, dan testimonial, persentasenya bisa lebih tinggi.

Karena gambar paling besar di viewport pertama biasanya jadi elemen yang diukur untuk LCP, memilih format dan kompresi yang tepat langsung berdampak pada skor Core Web Vitals dan secara tidak langsung pada peringkat SEO.

Perbandingan Format: JPEG vs PNG vs WebP vs AVIF

Praktik standar di industri 2026: AVIF sebagai prioritas pertama, WebP sebagai fallback, JPEG/PNG sebagai fallback terakhir untuk browser legacy.

Studi Kasus: Atmo (LMS)

Saat saya optimasi halaman landing untuk Atmo, platform LMS yang saya bangun, hero image awalnya JPEG 1920x1080 sebesar 380 KB. Setelah konversi ke WebP, turun jadi 240 KB. Tambah AVIF untuk browser modern, jadi 145 KB. LCP di koneksi 4G turun dari 2.9 detik ke 2.1 detik, dan score Lighthouse Performance naik dari 72 ke 89, semua dalam satu sore kerja.

Tidak ada perubahan layout. Tidak ada redesign. Hanya ganti format gambar dan layani lewat Image CDN.

Cara Implementasi Praktis

Untuk Next.js: gunakan next/image, framework akan otomatis serve WebP atau AVIF jika browser mendukung. Konfigurasi di next.config.ts:

images: {
  formats: ['image/avif', 'image/webp']
}

Untuk WordPress: pasang plugin seperti ShortPixel atau Imagify yang otomatis convert dan serve format modern.

Untuk HTML statis: gunakan elemen <picture>:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="...">
</picture>

Pasangkan dengan lazy loading untuk gambar di bawah viewport, dan dengan Performance Budget agar tim disiplin tidak balik upload JPEG mentah.

Pertanyaan Umum

Apakah saya harus pilih WebP atau AVIF?

Pakai keduanya. Browser modern akan ambil AVIF, browser yang lebih lama jatuh ke WebP, dan legacy ke JPEG. Tidak ada trade-off.

Bagaimana dengan kualitas visual?

Pada level kompresi 75-80, WebP dan AVIF sangat sulit dibedakan dari JPEG kualitas 85 secara visual, tapi ukurannya jauh lebih kecil.

Apakah Google Image Search masih index WebP dan AVIF?

Ya. Google secara resmi mendukung kedua format untuk indexing sejak 2020 (WebP) dan 2022 (AVIF). Sumber: panduan gambar dari Google Search Central.

Apakah saya perlu generate ulang semua gambar lama?

Tidak. Mulai dari halaman tertinggi traffic, lalu rambah ke halaman lain bertahap. Image CDN seperti Cloudinary atau Vercel Image Optimization bisa convert on-the-fly tanpa Anda generate manual.

Penutup

Format gambar adalah salah satu lever performa dengan ROI tertinggi yang sering diabaikan marketer Indonesia. Sebelum bicara redesign atau A/B test copy, pastikan dulu hero image Anda bukan JPEG 800 KB. Lihat juga panduan WebP di web.dev dan panduan AVIF dari Cloudflare.