Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua gambar di halaman Anda yang tidak berukuran tepat, beserta potensi penghematan dalam kibibyte (KiB). Ubah ukuran gambar ini untuk menghemat data dan mempercepat waktu muat halaman:
Cara Lighthouse menghitung gambar yang 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 minimal 4KiB lebih kecil dari ukuran sebenarnya, gambar tersebut tidak akan lulus audit.
Strategi untuk mengubah ukuran gambar dengan benar
Idealnya, halaman Anda tidak boleh menampilkan gambar yang lebih besar dari versi yang dirender di layar pengguna. Jika ukuran file lebih besar dari ukuran tersebut, byte akan terbuang dan waktu muat halaman akan diperlambat.
Strategi utama untuk menayangkan gambar dengan ukuran yang tepat disebut "gambar responsif". Dengan gambar responsif, Anda membuat beberapa versi dari setiap gambar, lalu menentukan versi mana yang akan digunakan dalam HTML atau CSS menggunakan kueri media, dimensi area pandang, dan seterusnya. 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 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 berbagai format. Ada juga CDN gambar yang memungkinkan Anda membuat beberapa versi, baik saat 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 di Component Dev
Kit (CDK) untuk mengelola titik henti sementara gambar.
Drupal
Gunakan fitur Responsive Image Styles bawaan (tersedia di Drupal 8 dan yang lebih baru) 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. SDK ini juga dapat membuat placeholder gambar SVG untuk pemuatan lambat yang efisien.
Joomla
Pertimbangkan untuk menggunakan plugin gambar responsif.
WordPress
Upload gambar langsung melalui library media untuk memastikan
ukuran gambar yang diperlukan tersedia, lalu sisipkan dari library
media atau gunakan widget gambar untuk memastikan ukuran gambar optimal digunakan
(termasuk untuk titik henti sementara responsif). Hindari penggunaan gambar Full Size
kecuali jika dimensinya memadai untuk penggunaannya. Lihat Menyisipkan gambar ke postingan dan halaman.