Audit gambar AVIF

Konversi JPEG ke AVIF hanya jika halaman jadi lebih cepat

AVIF paling berguna jika diperlakukan seperti audit gambar, bukan pengaturan ekspor umum. Panduan ini membantu menemukan foto JPEG yang layak AVIF, memilih proses tinjauan, dan menghindari publikasi file yang lebih kecil tapi kualitasnya buruk.

Putusan cepat

Konversi pengecualian, bukan seluruh folder media

Keputusan terbaik JPEG ke AVIF dimulai dari dampak halaman. Konversi file foto besar yang masih memperlambat halaman setelah diubah ukuran. Biarkan thumbnail rutin, tangkapan layar UI, diagram, dan aset kecil tetap di jalur sederhana.

Kandidat kuat Gambar LCP fotografi besar

Gunakan AVIF saat foto hero atau halaman landing masih mendominasi berat setelah diubah ukuran dan ekspor WebP.

Mungkin Penting tapi tidak dominan

Uji AVIF hanya jika file saat ini masih cukup berat atau halaman memiliki masalah kecepatan jelas.

Hindari Aset kecil, grafis, atau belum ditinjau

Lewati AVIF jika gambar kecil, kebanyakan UI, banyak teks, atau Anda tidak bisa memeriksa hasil sebelum publikasi.

Audit gambar dulu

Ajukan pertanyaan ini sebelum memilih AVIF

AVIF bisa sangat baik, tapi bukan solusi ajaib. Format penting setelah gambar diubah ukuran dengan benar, diberi peran tepat, dan ditinjau dalam tata letak yang benar-benar dilihat pengunjung.

Pertanyaan Mengapa ini penting Tindakan
Apakah ukuran yang dirender sudah benar? AVIF tidak bisa memperbaiki gambar 4000px yang ditampilkan pada 900px. Ubah ukuran dulu, lalu bandingkan format.
Apakah gambar ini memengaruhi LCP atau kesan pertama? Foto besar di atas lipatan lebih berdampak daripada dekorasi halaman dalam. Prioritaskan visual hero, landing, dan kampanye.
Apakah kontennya berupa foto? AVIF biasanya unggul pada foto, bukan grafik UI datar atau logo. Gunakan PNG, SVG, atau WebP saat tepi tajam lebih penting.
Bisakah Anda meninjau hasilnya dalam konteks? AVIF bisa menyembunyikan artefak sampai gambar berada di tata letak sebenarnya. Periksa lebar mobile, gradasi, wajah, dan pemotongan.
Apakah Anda punya jalur fallback? Tidak semua lingkungan memperlakukan format modern dengan cara yang sama. Publikasikan dengan markup gambar atau setara framework Anda.

Pemilihan kandidat

Gambar JPEG mana yang cocok sebagai kandidat AVIF?

Cari gambar di mana file lebih kecil mengubah halaman, bukan hanya pengelola file. Kandidat terkuat biasanya foto, penting secara visual, dan cukup besar untuk memengaruhi persepsi kecepatan muat.

Kandidat terbaik

Foto hero LCP

Foto hero besar yang mendefinisikan viewport pertama dan tetap berat setelah diubah ukuran biasanya adalah kasus penggunaan AVIF paling kuat.

Kandidat baik

Gambar kampanye halaman landing

Foto kampanye atau produk bisa memerlukan tinjauan ekstra saat tampil di bagian atas halaman dan harus tetap terlihat sempurna.

Kandidat selektif

Gambar fitur editorial

Gunakan AVIF saat gambar cukup besar untuk penting, bukan hanya karena setiap gambar artikel diekspor ulang.

Kandidat buruk

Tangkapan layar dengan banyak teks

Tangkapan layar, UI, diagram, dan ikon sering gagal pada kejernihan teks sebelum mendapat manfaat dari kompresi AVIF.

Tinjauan kualitas

Jangan salin angka kualitas antar alat AVIF

Pengatur kualitas AVIF tidak universal. Nilai yang bagus di satu encoder bisa terlalu lembut atau berat di encoder lain. Mulai dengan default alat atau kualitas menengah, lalu nilai hasilnya di halaman asli.

Tujuannya bukan file AVIF terkecil. Tujuannya file terkecil yang masih mendukung halaman: detail cukup bersih, gradasi dapat diterima, tidak ada kehilangan tekstur yang mengganggu, dan tidak ada pergeseran warna yang terlihat.

Urutan tinjauan
  1. Bandingkan dengan JPEG atau WebP yang sudah diubah ukuran, bukan file kamera asli.
  2. Periksa gambar pada ukuran desktop yang dirender dan lebar mobile.
  3. Periksa wajah, langit, gradasi, bayangan, tekstur kecil, dan warna merek.
  4. Pastikan file benar-benar dimuat di halaman yang akan Anda publikasikan.

Mode kegagalan visual

Artefak AVIF yang perlu diperiksa sebelum publikasi

Ekspor AVIF yang baik bisa terlihat sangat bagus. Yang buruk bisa gagal tanpa terlihat: file lebih kecil, tapi gambar terasa datar, buram, atau berisik di bagian halaman yang pertama kali dilihat pengguna.

Banding pada langit atau gradasi Latar belakang halus bisa menunjukkan garis bertingkat saat kompresi terlalu tinggi.
Kulit atau tekstur produk seperti lilin Potret dan permukaan produk bisa kehilangan detail alami meski file terlihat tajam sekilas.
Detail halus yang kabur Daun, kain, rambut, dan pola kecil berulang bisa menjadi buram sehingga terasa kualitasnya lebih rendah daripada penghematan byte yang didapat.
Perubahan warna atau kontras Gambar kampanye dan foto produk perlu pemeriksaan warna yang aman untuk merek setelah konversi.
Kesalahan pemotongan dan titik fokus File lebih kecil bukan keuntungan jika pemotongan responsif menyembunyikan bagian gambar yang menarik perhatian halaman.

Pengiriman

Publikasikan AVIF dengan fallback, bukan pengganti buta

Untuk gambar halaman penting, jaga pengiriman tetap sederhana dan dapat diprediksi. Gunakan AVIF dulu jika didukung, simpan fallback WebP atau JPEG, atur lebar dan tinggi, dan jangan biarkan browser terlambat mengetahui ukuran tata letak.

Hanya preload AVIF jika benar-benar gambar LCP. Preload semua aset yang dikonversi bisa membuat halaman lebih sibuk, bukan lebih cepat.

HTMLMarkup gambar dengan fallback AVIF
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

Privasi dan kontrol

Jaga gambar kampanye yang belum dirilis agar tidak masuk ke alur unggah acak

Foto JPEG besar sering bukan file netral. Bisa berisi produk belum dipublikasikan, pekerjaan klien, petunjuk lokasi, materi kampanye yang disusun, atau nama file yang mengungkap konteks internal. Mengunggahnya ke konverter harus keputusan sengaja, bukan default.

Alur kerja lokal menjaga file sumber, nama output, dan langkah tinjauan tetap dekat dengan proyek. Ini sangat berguna saat halaman landing yang sama perlu beberapa kali ekspor sebelum tampilan visual pas.

Alur kerja praktis

Proses ulang JPEG ke AVIF yang bisa diulang tanpa menjadikan setiap gambar sebagai proyek

  1. 01
    Kumpulkan hanya kandidat berat

    Mulai dari daftar singkat foto JPEG besar yang masih penting setelah pengubahan ukuran normal dan ekspor WebP.

  2. 02
    Ekspor varian AVIF secara terpisah

    Simpan output AVIF di folder khusus agar JPEG sumber dan file WebP rutin tetap mudah dibandingkan.

  3. 03
    Tinjau di halaman asli

    Tempatkan kandidat ke komponen atau template asli dan periksa hasil yang terlihat, bukan hanya pratinjau konverter.

  4. 04
    Publikasikan dengan markup fallback

    Sajikan AVIF di tempat didukung dan pertahankan pengiriman fallback WebP atau JPEG untuk perilaku yang dapat diprediksi.

  5. 05
    Dokumentasikan aturan

    Catat peran gambar mana yang menggunakan AVIF agar pembaruan berikutnya tidak menjadi tebakan.

Batas format

Gunakan WebP sebagai dasar dan AVIF sebagai peningkatan

Alur kerja yang sehat biasanya punya jalur default dan pengecualian. WebP adalah default untuk gambar rutin situs karena praktis dan didukung luas. AVIF digunakan saat gambar foto besar masih terlalu berat.

Batas itu menjaga alur kerja artikel tetap cepat sekaligus memberi cara menyelamatkan gambar yang mendominasi berat atau LCP.

Gambar artikel rutin Gunakan WebP kecuali file tertentu masih terlalu berat.
Foto hero fotografi besar Coba AVIF setelah mengubah ukuran dan bandingkan hasil visualnya.
Tangkapan layar dan UI Pilih PNG atau WebP saat teks dan tepi tajam penting.
Ekspor batch yang belum ditinjau Jangan publikasikan AVIF secara membabi buta hanya karena foldernya lebih kecil.

Daftar periksa sebelum publikasi

Periksa ini sebelum mengganti JPEG dengan AVIF

Gambar sumber telah diubah ukuran File AVIF mendekati ukuran tampilan terbesar, bukan asli kamera.
Halaman menggunakan AVIF Pemeriksaan jaringan atau sumber halaman memastikan file baru benar-benar disajikan.
Ada fallback WebP atau JPEG tetap tersedia untuk jalur pengiriman yang Anda gunakan.
Kualitas telah ditinjau Halaman akhir diperiksa artefaknya di desktop dan mobile.
Metadata masih masuk akal Teks alternatif, gambar Open Graph, dan referensi gambar JSON-LD tidak rusak secara tidak sengaja.
Asli tetap dipertahankan JPEG sumber tetap tersedia untuk pemotongan, ukuran, dan ekspor ulang di masa depan.

FAQ

Pertanyaan yang Sering Diajukan

Jawaban praktis untuk keputusan publikasi JPEG ke AVIF