Bagian Peluang dalam laporan Lighthouse mencantumkan semua gambar di halaman Anda yang tidak berukuran sesuai, beserta potensi penghematan dalam kibibyte (KiB). Ubah ukuran gambar ini untuk menghemat data dan meningkatkan waktu pemuatan halaman:
Cara Lighthouse menghitung gambar berukuran terlalu besar
Untuk setiap gambar di halaman, Lighthouse membandingkan ukuran gambar yang dirender dengan ukuran gambar sebenarnya. Ukuran yang dirender juga memperhitungkan rasio piksel perangkat. Jika ukuran yang dirender setidaknya 4 KiB lebih kecil dari ukuran sebenarnya, maka gambar gagal dalam audit.
Strategi untuk menyesuaikan ukuran gambar dengan benar
Idealnya, halaman Anda tidak boleh menyajikan gambar yang lebih besar daripada versi yang dirender di layar pengguna. Ukuran yang lebih besar dari itu hanya akan membuang-buang byte dan memperlambat waktu pemuatan halaman.
Strategi utama untuk menayangkan gambar dengan ukuran yang sesuai disebut "gambar responsif". Dengan gambar responsif, Anda membuat beberapa versi setiap gambar,
lalu menentukan versi mana yang akan digunakan dalam HTML atau CSS menggunakan kueri media, dimensi area pandang, dan sebagainya. Selain itu, RespImageLint adalah bookmarklet yang berguna untuk mengidentifikasi nilai srcset dan sizes yang optimal untuk gambar Anda. Lihat Menayangkan gambar responsif untuk mempelajari lebih lanjut atribut ini.
CDN Gambar adalah strategi utama lainnya untuk menayangkan gambar dengan ukuran yang sesuai. Anda dapat menganggap CDN gambar seperti API layanan web untuk mentransformasi gambar.
Strategi lainnya adalah menggunakan format gambar berbasis vektor, seperti SVG. Dengan jumlah kode yang terbatas, gambar SVG dapat diskalakan ke ukuran apa pun. Lihat Mengganti ikon kompleks dengan SVG untuk mempelajari lebih lanjut.
Alat seperti gulp-responsive atau responsive-images-generator dapat membantu mengotomatiskan proses konversi gambar ke dalam beberapa format. Ada juga CDN gambar yang memungkinkan Anda membuat beberapa versi, baik saat Anda mengupload gambar, atau memintanya dari halaman Anda.
Panduan khusus stack
AMP
Gunakan dukungan komponen
amp-img untuk
srcset
guna menentukan aset gambar yang akan digunakan berdasarkan ukuran layar. Lihat juga Gambar responsif dengan srcset, ukuran & tinggi.
Angular
Pertimbangkan untuk menggunakan utilitas BreakpointObserver dalam Component Dev
Kit (CDK) guna mengelola titik henti sementara image.
Drupal
Pastikan Anda menggunakan Responsive Image Styles native yang disediakan oleh Drupal. Gunakan Responsive Image Styles saat merender kolom gambar melalui mode tampilan, tampilan, atau gambar yang diupload melalui editor WYSIWYG.
Gatsby
Gunakan plugin gatsby-image untuk membuat beberapa gambar yang lebih kecil untuk smartphone dan tablet. Library ini juga dapat membuat placeholder gambar SVG untuk pemuatan lambat yang efisien.
Joomla
Sebaiknya gunakan plugin gambar responsif.
WordPress
Upload gambar langsung melalui koleksi media untuk memastikan ukuran gambar yang diperlukan tersedia, lalu masukkan dari koleksi media atau gunakan widget gambar untuk memastikan ukuran gambar optimal digunakan (termasuk untuk titik henti sementara responsif). Hindari menggunakan gambar Full Size, kecuali dimensinya memungkinkan untuk digunakan. Lihat Menyisipkan gambar ke dalam postingan dan halaman.