Cara Meningkatkan Kelajuan Laman dengan AVIF dan WebP: Panduan Lengkap

TL;DR – Menukar JPEG/PNG kepada AVIF (atau WebP jika AVIF tidak disokong) boleh mengurangkan 30‑80 % saiz imej, memendekkan LCP sehingga 0.5 s, dan meningkatkan SEO tanpa sebarang kompromi visual. Satu fallback <picture> ringkas atau peraturan header Accept dapat melakukannya dalam beberapa minit, dan kebanyakan CDN boleh melakukan kerja berat secara automatik.

Mengapa format imej “next‑gen” penting sekarang

Setiap milisaat penting di web. Kajian dari Akamai dan Google menunjukkan bahawa 100 ms yang dijimatkan bersamaan dengan peningkatan pendapatan 1‑2 % untuk laman e‑commerce. Imej merupakan penyumbang terbesar pada halaman tipikal – > 60 % daripada jumlah bait (HTTP Archive, 2024).

Masuklah AVIF dan WebP. Kedua‑duanya menjanjikan fail 30‑80 % lebih kecil berbanding JPEG/PNG lama sambil mengekalkan kualiti visual yang tidak dapat dibezakan oleh mata manusia. Manfaatnya serta‑merta:

• Jalur lebar lebih rendah → pelan data lebih murah untuk pengguna mudah alih.
• Muat turun halaman lebih cepat → Core Web Vitals yang lebih baik, kedudukan Google yang lebih tinggi.
• Beban pelayan berkurang → jejak cache lebih kecil, bil CDN lebih murah.

Jika anda sudah mengoptimumkan CSS/JS, pemampatan imej adalah buah yang mudah dipetik yang memberikan ROI terbesar.

AVIF vs. WebP – perbandingan ringkas

Kesimpulan: AVIF menang dalam pemampatan mentah dan sokongan HDR, manakala WebP menikmati liputan legasi yang paling luas serta ekosistem animasi yang matang. Pendekatan praktikal ialah menyajikan AVIF terlebih dahulu, fallback kepada WebP, kemudian kepada JPEG/PNG untuk beberapa pengecualian.

Sokongan pelayar & strategi fallback yang boleh anda salin‑tampal

1. Corak <picture> (perundingan 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>

Pelayar memilih format pertama yang difahaminya; pelayar lama hanya mengabaikan tag <source> dan memuatkan fallback JPEG.

2. Perundingan header Accept sisi‑pelayan (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 menyajikan hero.avif; jika tidak, ia akan fallback kepada WebP atau JPEG.

3. Biarkan CDN melakukan kerja berat

Kebanyakan penyedia tepi (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) mempunyai suis yang secara automatik menukar JPEG/PNG yang dimuat naik kepada AVIF/WebP berdasarkan header Accept. Aktifkan, kosongkan cache, dan selesai.

Alat & aliran kerja – dapatkan AVIF/WebP ke dalam pipeline pembinaan anda

Satu baris untuk kebanyakan pipeline CI

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Tip: Simpan sumber resolusi tinggi asal dalam repo anda; jana AVIF/WebP secara dinamik semasa langkah pembinaan. Dengan cara itu anda boleh jalankan semula dengan tetapan kualiti yang berbeza tanpa memuat naik semula aset.

Impak dunia sebenar – angka yang penting

Sumber: Audit WebPageTest + Lighthouse (2024‑2025) pada sebuah laman runcit yang menjalankan ujian A/B selama 4 minggu. Varian AVIF memberikan LCP 0.4 s lebih cepat dan peningkatan 12 % dalam penukaran mudah alih.

Kajian kes yang boleh anda petik

• Pedagang Shopify (2025) – AVIF untuk thumbnail produk memotong berat halaman sebanyak 38 % dan memendekkan LCP sebanyak 0.3 s pada 3G.
• The New York Times – Menukar imej artikel dalam baris kepada AVIF, menjimatkan 45 % jalur lebar dan melihat peningkatan 12 % dalam penglibatan mudah alih.
• Airbnb – Gambar profil hos disajikan sebagai AVIF pada pelayar yang menyokong, memberikan first paint 0.4 s lebih cepat pada rangkaian perlahan.

Apa yang perlu dilakukan seterusnya – senarai semak cepat

1. Audit beban imej semasa anda – Lighthouse “Serve images in next‑gen formats”.
2. Tambah langkah pembinaan yang menghasilkan AVIF (dan WebP sebagai fallback) menggunakan sharp atau avifenc.
3. Kemas kini HTML dengan blok <picture> atau aktifkan perundingan Accept sisi‑pelayan.
4. Tetapkan header cache jangka panjang (Cache‑Control: max-age=31536000, immutable).
5. Dayakan lazy‑loading (loading="lazy" atau IntersectionObserver) untuk mengelakkan penyahkodan AVIF di luar skrin.
6. Aktifkan penukaran tepi CDN jika 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 selepas pelancaran.

Pandangan masa depan: Menjelang 2028 IDC meramalkan > 80 % imej web akan menjadi AVIF‑first, terima kasih kepada sokongan HDR dan header “image format negotiation” yang akan datang dalam Chrome 130+. Memulakan lebih awal bukan sahaja meningkatkan prestasi hari ini tetapi juga menjadikan laman anda bersedia untuk gelombang seterusnya pengalaman visual web.

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