Enkode gambar secara efisien

Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua gambar yang tidak dioptimalkan, dengan potensi penghematan dalam kibibyte (KiB). Optimalkan gambar-gambar ini agar halaman dimuat lebih cepat dan menggunakan lebih sedikit data:

Screenshot audit gambar Lighthouse Efisien Enkode

Cara Lighthouse menandai gambar sebagai dapat dioptimalkan

Lighthouse mengumpulkan semua gambar JPEG atau BMP di halaman, menetapkan level kompresi setiap gambar ke 85, lalu membandingkan versi aslinya dengan versi terkompresi. Jika potensi penghematan adalah 4KiB atau lebih besar, Lighthouse menandai gambar sebagai dapat dioptimalkan.

Cara mengoptimalkan gambar

Ada banyak langkah yang dapat Anda lakukan untuk mengoptimalkan gambar, antara lain:

Mengoptimalkan gambar menggunakan alat GUI

Pendekatan lainnya adalah menjalankan gambar melalui pengoptimal yang Anda instal ke komputer dan jalankan sebagai GUI. Misalnya, dengan ImageOptim, Anda menarik lalu melepas gambar ke UI-nya, lalu mengompresi gambar secara otomatis tanpa mengurangi kualitas secara signifikan. Jika Anda menjalankan situs kecil dan dapat menangani pengoptimalan semua gambar secara manual, opsi ini mungkin cukup baik.

Opsi lainnya adalah Squoosh. Squoosh dikelola oleh tim Google Web DevRel.

Panduan khusus stack

Drupal

Sebaiknya gunakan modul yang otomatis mengoptimalkan dan mengurangi ukuran gambar yang diupload melalui situs dengan tetap mempertahankan kualitas. Selain itu, pastikan Anda menggunakan Responsive Image Styles bawaan Drupal (tersedia di Drupal 8 dan yang lebih baru) untuk semua gambar yang dirender di situs.

Joomla

Sebaiknya gunakan plugin pengoptimalan gambar yang mengompresi gambar Anda dengan tetap mempertahankan kualitas.

Magento

Pertimbangkan untuk menggunakan ekstensi Magento pihak ketiga yang mengoptimalkan gambar.

WordPress

Sebaiknya gunakan plugin WordPress untuk pengoptimalan gambar yang mengompresi gambar Anda dengan tetap mempertahankan kualitas.

Referensi