Optimasi Gambar: Cara Membuat Website Lebih Cepat dengan AVIF

TL;DR: Gambar biasanya menyumbang bobot terbesar sebuah halaman, sehingga mengoptimalkannya adalah jalan tercepat memperbaiki kecepatan. Mengganti format ke AVIF dengan fallback ke WebP atau JPEG sering memangkas ukuran file 30 hingga 50 persen pada kualitas setara, langsung memperbaiki skor LCP tanpa menyentuh desain.

Saat sebuah halaman terasa lambat, banyak orang langsung curiga ke server atau kode. Pada praktiknya, biang keladi yang paling sering saya temukan jauh lebih sederhana: gambar yang terlalu berat.

Dalam beberapa proyek optimasi performa terakhir, mengecilkan dan mengganti format gambar hampir selalu jadi perubahan dengan dampak terbesar per jam kerja. Bukan refactor besar, cukup aset yang dikemas lebih cerdas.

Kenapa Gambar Menentukan Kecepatan

Gambar hero di paruh atas layar biasanya menjadi elemen yang diukur sebagai Largest Contentful Paint, salah satu dari tiga Core Web Vitals yang dipakai Google sebagai sinyal pengalaman halaman. Jika gambar itu berat, skor LCP ikut buruk, dan pengguna menunggu layar utama terisi.

Masalahnya berlipat di perangkat seluler. Untuk audiens Indonesia yang mayoritas membuka website lewat data seluler, file gambar besar bukan cuma soal kecepatan, tetapi juga ongkos kuota yang ditanggung pengunjung.

AVIF: Hemat Ukuran Tanpa Mengorbankan Kualitas

AVIF adalah format gambar modern berbasis codec AV1 yang memampatkan foto lebih efisien dari JPEG dan WebP. Pada kualitas visual setara, AVIF kerap menghasilkan file yang jauh lebih kecil.

Strategi yang aman bukan mengganti semua gambar menjadi AVIF secara buta, melainkan menyajikan AVIF lebih dulu dengan fallback otomatis:

• Sajikan AVIF sebagai pilihan pertama.
• Sediakan WebP sebagai cadangan untuk browser yang belum mendukung AVIF.
• Sertakan JPEG sebagai jaring pengaman terakhir.

Dengan pola ini, browser memilih format terbaik yang ia pahami, dan tidak ada pengguna yang melihat gambar rusak.

Tiga Teknik Pendamping yang Sering Terlewat

Mengganti format saja sudah membantu, tapi tiga teknik berikut menggandakan dampaknya:

Khusus pengguna Next.js, komponen gambar bawaannya sudah menangani sebagian besar pekerjaan ini, termasuk ukuran responsif dan format modern, selama Anda mengisi atribut ukuran dengan benar. Praktik detailnya dirangkum baik di dokumentasi web.dev tentang optimasi gambar.

Contoh Nyata dari Proyek

Saat mengerjakan tampilan Nalesha, toko parfum yang berat di galeri produk, foto produk adalah aset paling sering dimuat sekaligus paling berisiko memperlambat halaman. Pendekatan yang kami pakai sederhana: hero dan thumbnail dialihkan ke format modern dengan fallback, ukuran disesuaikan per breakpoint, dan gambar di bawah layar di-lazy load.

Hasil seperti ini bervariasi tergantung jumlah dan ukuran gambar awal, tetapi polanya konsisten: setelah gambar diringankan, halaman terasa lebih ringan dan metrik LCP membaik tanpa satu pun perubahan pada desain visual.

Pertanyaan Umum

Apakah saya harus mengganti semua gambar lama ke AVIF sekarang?

Tidak perlu sekaligus. Mulai dari gambar paling berdampak, yaitu hero dan gambar di paruh atas layar, lalu lanjut bertahap. Selalu sediakan fallback agar tidak ada pengguna yang kehilangan gambar.

Apakah AVIF memperlambat proses build atau upload?

Encoding AVIF memang lebih lambat dari JPEG, tetapi ini terjadi sekali saat memproses gambar, bukan saat pengguna membuka halaman. Manfaat kecepatan di sisi pengunjung jauh melebihi ongkos encoding sekali itu.

Bagaimana cara mengukur dampaknya?

Gunakan Lighthouse atau PageSpeed Insights sebelum dan sesudah perubahan, dan perhatikan metrik LCP serta total bobot halaman. Bandingkan pada kondisi jaringan seluler agar lebih mewakili audiens nyata.

Mulai dari Satu Gambar

Optimasi gambar bukan proyek besar yang harus tuntas dalam sehari. Pilih satu halaman penting, ringankan hero-nya ke AVIF dengan fallback, ukur sebelum dan sesudah, lalu ulangi. Kecepatan website paling sering datang bukan dari satu lompatan besar, melainkan dari banyak gambar yang dikemas lebih rapi.