Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua gambar dalam format gambar lama, yang menunjukkan potensi penghematan yang diperoleh dengan menayangkan gambar versi AVIF tersebut:
Mengapa menyajikan gambar dalam format AVIF atau WebP?
AVIF dan WebP adalah format gambar yang memiliki kompresi dan karakteristik kualitas yang unggul dibandingkan dengan versi JPEG dan PNG yang lebih lama. Mengenkode gambar dalam format ini daripada JPEG atau PNG berarti gambar akan dimuat lebih cepat dan mengonsumsi lebih sedikit data seluler.
AVIF didukung di Chrome, Firefox, dan Opera dan menawarkan ukuran file yang lebih kecil dibandingkan format lain dengan setelan kualitas yang sama. Lihat Codelab Penyajian Gambar AVIF untuk informasi selengkapnya tentang AVIF.
WebP didukung di versi terbaru Chrome, Firefox, Safari, Edge, dan Opera serta memberikan kompresi lossy dan lossless yang lebih baik untuk gambar di web. Lihat Format Gambar Baru untuk Web untuk mengetahui informasi selengkapnya tentang WebP.
Cara Lighthouse menghitung potensi penghematan
Lighthouse mengumpulkan setiap gambar BMP, JPEG, dan PNG di halaman, mengonversinya masing-masing menjadi WebP, dan memperkirakan ukuran file AVIF, melaporkan potensi penghematan berdasarkan angka konversi.
Kompatibilitas browser
WebP didukung oleh Chrome, Firefox, Safari, Edge, dan Opera versi terbaru, sedangkan dukungan AVIF lebih terbatas. Anda harus menyediakan gambar PNG atau JPEG pengganti untuk dukungan browser lama. Lihat Bagaimana cara mendeteksi dukungan browser untuk WebP? untuk mengetahui ringkasan teknik penggantian dan daftar di bawah untuk dukungan browser untuk format gambar.
Untuk melihat dukungan browser saat ini untuk setiap format modern, lihat entri di bawah:
Panduan khusus stack
AMP
Sebaiknya tampilkan semua
komponen amp-img
dalam format WebP sambil menentukan penggantian yang sesuai
untuk browser lain.
Drupal
Sebaiknya instal dan konfigurasi modul untuk memanfaatkan format gambar WebP di situs Anda. Modul tersebut otomatis menghasilkan versi WebP dari gambar yang Anda upload untuk mengoptimalkan waktu pemuatan.
Joomla
Sebaiknya gunakan plugin atau layanan yang akan otomatis mengonversi gambar yang Anda upload ke format yang optimal.
Magento
Pertimbangkan untuk menelusuri Magento Marketplace guna menemukan berbagai ekstensi pihak ketiga untuk memanfaatkan format gambar yang lebih baru.
iPhone
Perhatikan bahwa webp, gambar avif, dan video webm tidak akan berfungsi di iPhone yang menggunakan iOS 16 di bawah.
WordPress
Sebaiknya gunakan plugin atau layanan yang akan otomatis mengonversi gambar yang Anda upload ke format optimal.