Menayangkan gambar dalam format modern

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:

Screenshot audit gambar Lighthouse Serve dalam format modern

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.

Referensi