Bagian Peluang pada laporan Lighthouse Anda 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 muat halaman:
Cara Lighthouse menghitung gambar yang terlalu besar
Untuk setiap gambar di halaman, Lighthouse membandingkan ukuran gambar yang dirender dengan ukuran gambar yang sebenarnya. Ukuran yang dirender juga memperhitungkan rasio piksel perangkat. Jika ukuran yang dirender setidaknya 4 KiB lebih kecil dari ukuran sebenarnya, gambar akan gagal dalam audit.
Strategi untuk menentukan ukuran gambar dengan benar
Idealnya, halaman Anda tidak boleh menayangkan gambar yang lebih besar dari versi yang dirender di layar pengguna. Jika lebih besar dari itu, byte yang terbuang akan semakin banyak dan memperlambat waktu pemuatan halaman.
Strategi utama untuk menayangkan gambar dengan ukuran yang sesuai disebut "gambar responsif". Dengan gambar responsif, Anda membuat beberapa versi dari setiap gambar,
lalu menentukan versi mana yang akan digunakan di 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 atribut ini lebih lanjut.
CDN Gambar adalah strategi utama lainnya untuk menayangkan gambar dengan ukuran yang sesuai. Anda dapat menganggap CDN gambar seperti API layanan web untuk mengubah gambar.
Strategi lain adalah dengan menggunakan format gambar berbasis vektor, seperti SVG. Dengan jumlah kode yang terbatas, gambar SVG dapat diskalakan ke ukuran berapa 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 menjadi beberapa format. Ada juga CDN gambar yang memungkinkan Anda membuat beberapa versi, baik saat mengupload gambar, maupun 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, size &ketinggian.
Angular
Pertimbangkan untuk menggunakan utilitas BreakpointObserver di Component Dev
Kit (CDK) untuk mengelola titik henti sementara image.
Drupal
Pastikan Anda menggunakan Responsive Image Styles native yang disediakan dari 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 menghasilkan 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 library media untuk memastikan
ukuran gambar yang diperlukan tersedia, lalu masukkan dari library
media atau gunakan widget gambar untuk memastikan ukuran gambar yang optimal digunakan
(termasuk untuk titik henti sementara responsif). Hindari menggunakan gambar Full Size, kecuali dimensinya memungkinkan untuk digunakan. Lihat Menyisipkan gambar ke postingan dan halaman.